Tailwind CSS
FrontendCommonly used with
Skills using Tailwind CSS (711)
coss
Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
coss-particles
Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.
design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
octopus-ui-ux-design
Design UI/UX systems with style guides, palettes, typography, and component specs for new interfaces
ss-a11y
Audit a component or page for accessibility issues and fix them
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-build
Build a screen with StyleSeed's composed method, then run the code and pixel gates before presenting. Use when building or rebuilding a screen; sets up the project first if needed.
ss-component
Generate a new UI component following the StyleSeed design conventions
ss-copy
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
ss-dial
Turn one design axis up or down — "denser", "bolder", "flatter", "livelier", "sharper corners". Use for a single-axis change, not a mood word (those go to /ss-restyle); updates the lock and re-runs the gate.
ss-feedback
Add appropriate user feedback states (loading, success, error, empty) to a component or page
ss-flow
Design user flows and navigation structure following proven UX patterns
ss-lint
Quick automated lint — detects common design system violations in seconds
ss-motion
Apply a named StyleSeed motion from the five personality seeds or the keyword move library. Use when asked for a specific motion or a vibe word like "springy", "snappy", or "shimmer".
ss-page
Scaffold a new product page or screen from the compiled StyleSeed output grammar, surface adapter, brand recipe, and project lock.
ss-pattern
Generate a composed UI pattern from the active StyleSeed grammar and brand recipe using existing primitives.
ss-reference
Compile screenshots, URLs, Figma exports, or an existing UI into a project-local output grammar. Use when the user supplies a design reference StyleSeed does not already model.
ss-review
Review UI code for design system compliance, accessibility, and best practices
ss-score
Score a visual artifact's implementation quality 0-100 against its composed StyleSeed rule set — category breakdown, evidence, and prioritized fixes.
ss-setup
Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
ss-tokens
Generate an accessible semantic palette from a key color, or view, add, and modify design tokens. Use when a user supplies a brand color or needs light/dark theme roles.
ss-update
Check and update an existing StyleSeed installation by exact rule/skill revision, preserve project-owned design decisions, then recompile and verify the effective bundle.
ss-verify
Inspect rendered UI or visual artifacts against their StyleSeed contract. Report findings; fix and re-render only within an authorized build or repair task.
styleseed
Route a StyleSeed request to exactly one first workflow after resolving the current artifact boundary. Use when the user asks generally for StyleSeed help rather than invoking one specific ss-* skill.
styleseed-design-review
Reviews UI/frontend code and tells you exactly why it "looks AI-generated" — then how to fix it. Use it when a React/Tailwind/HTML interface looks off, generic, or unfinished, when you want a design score before shipping, or when asked to make UI look more professional, polished, or "designed, not generated." Self-contained; based on the open-source StyleSeed design engine.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
landing-page
Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.
tailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
vite-flare-starter
Scaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI. Run setup.sh to clone, configure, and deploy. Use whenever the user wants a batteries-included Cloudflare full-stack app, vite-flare-starter scaffold, or a React + Cloudflare app with auth + database + Workers AI ready to go.
brand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
skillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard, fix visual bugs in either frontend, or need to know which design tokens, ss-* classes, components, or patterns to use. Covers the two dashboard styles (Clean / Playful) in light and dark, design tokens, the ss-* class system, component API, page structure, accessibility, keyboard shortcuts, and anti-patterns. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.
brainstorming
需求澄清 Skill。当用户只给了模糊描述时自动触发，通过业务提问把一句话翻译成完整需求，交给 Boss 流水线执行。 Triggers: '我想做一个', '帮我做', '有个想法', 'brainstorm', '帮我规划一下', '做个XX', 'I want to build' Does NOT trigger: - 需求已经完整（包含做什么 + 给谁用 + 核心场景） - 纯技术问题或 bug 修复 Output: .boss/<feature>/design-brief.md 需求设计简报
ss-restyle
Apply one optional StyleSeed aesthetic profile without changing the selected output grammar, product job, or core design judgment.
slides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
design-code
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
design-component
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
design-doctrine
The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token set. Installed as a plugin, this skill carries what CLAUDE.md carries in the repo.
image-to-code
Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.
penguin-harness-frontend
Use when changing the PenguinHarness Web App (`packages/web`) — adding or restyling any UI, picking a status colour, adding an icon, laying out a row or a form field, writing user-facing copy, or building a popup. Covers the semantic tone tokens, the icon size/stroke/gap scale, the semantic-versus-formatting rule for explanatory text, the two-dictionary i18n contract, and the portal-panel pattern with its Esc and scroll caveats.
ss-learn
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or brand data. Use when a person asks StyleSeed to remember, learn from, generalize, review, or prepare a reusable rule from an accepted design correction.
ss-resolve
Compile the effective StyleSeed rule bundle for one artifact, or inspect install and evidence health read-only. Use before setup or build, or to diagnose rule drift.
ss-studio
Turn a brief into three creative directions, a human-selected interaction plan, prototype, and showcase reel. Use when a request needs more than one static screen — client concepts or interaction exploration.
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
code-review-excellence
Master effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale. Use when reviewing pull requests, establishing review standards, or mentoring developers.
anomaly-alert
Identify anomalous sessions using Agent Monitor data — cost outliers from the pricing engine, token anomalies (cache miss spikes, compaction baseline surges), unusual event type ratios (PreToolUse/PostToolUse gaps, APIError clusters), behavioral deviations from workflow intelligence (complexity score outliers, error propagation anomalies), and sessions with abnormal metadata (extreme turn_count, high thinking_blocks, zero turn_duration).
benchmark
Benchmark one session (or a small recent set) against the rolling average using Agent Monitor data — cost, total tokens, tool count, and workflow complexity score — and report where each metric lands as a percentile of the population. Tells you whether a session was normal, cheap, or an outlier. Use when judging whether a session was typical or out of band.
budget-set
Define a spend budget for Claude Code and, optionally, create a cost alert rule that fires when usage crosses the limit, via POST /api/alerts/rules on the Agent Monitor dashboard. Reads current spend from /api/pricing/cost to size the budget sensibly and explains every rule field before writing. Use when setting a spend limit or wiring up a budget guardrail.
cache-efficiency
Analyze prompt-cache effectiveness for Claude Code usage from the Agent Monitor dashboard — cache hit rate (total_cache_read / (total_cache_read + total_input)), cache_write vs cache_read reuse, cache-read vs cache-write spend, and the sessions with the poorest reuse. Pulls token totals from /api/analytics, per-session detail from /api/sessions, and dollar splits from /api/pricing/cost. Use when diagnosing cache spend or deciding whether prompt caching is paying off.
config-audit
Run a full audit of the user's Claude Code configuration via the Agent Monitor Config Explorer API: counts per surface (user vs project), duplicate or overlapping skills and subagents, hooks that run shell commands, and which surfaces are read-only vs mutable. Reads /api/cc-config/overview, /skills, /agents, /commands, /hooks, and /settings. Use when reviewing your Claude Code setup for sprawl, duplication, or risk.
cost-alert
Review the configured cost alert rules and the alerts currently fired on the Agent Monitor dashboard, then explain exactly what tripped and why. Uses /api/alerts (fired feed) and /api/alerts/rules (definitions). Use when checking spend alerts or asking why a cost alarm went off.
cost-breakdown
Break down Claude Code costs using the Agent Monitor pricing engine. Shows per-model costs (input, output, cache_read, cache_write at $/Mtok rates), per-session costs, daily trends, and compaction baseline token recovery. Use when analyzing spending, comparing model costs, or planning budgets.
daily-budget-check
Run a daily spend check-in against a daily budget on the Agent Monitor dashboard — today's spend vs the daily target, pace through the day, and the projected overage if the current pace holds. Uses /api/pricing/cost and /api/sessions (grouped by started_at = today). Use for a quick daily spend check-in or a morning/evening budget pulse.
dashboard-status
Quick dashboard health and status overview — checks the Agent Monitor API (port 4820), reports session/agent/event counts from /api/stats, confirms WebSocket connectivity, reads the redacted hook status returned by /api/settings/info, and shows data freshness (last event timestamp). Use to verify the monitoring system is operational.
endpoint-probe
Probes each major Agent Monitor API route — /api/stats, /api/analytics, /api/sessions, /api/pricing/cost, /api/workflows/runs, /api/cc-config/overview — and reports each one's HTTP status, latency, and response shape, flagging which are reachable. Use to verify a dashboard install is wired up correctly.
event-trace
Trace the full event chain for one Claude Code session into an ordered timeline of every event type with tool_name and summary, highlighting gaps, out-of-order events, and failures. Reads /api/events?session_id= and /api/sessions/:id from the Agent Monitor dashboard. Use when debugging what a session actually did, step by step.
file-headers
MANDATORY for every coding agent (Claude Code, Codex, or any other) on every change-set — every applicable source file the agent creates or updates MUST start with the project's copyright/authorship header (file overview + exact author line). Use automatically whenever writing a new file or editing an existing one; do not wait to be asked. Covers JS/TS/TSX/CJS/MJS, Python, shell, and CSS. Includes the audit script to verify repo-wide compliance.
health-check
Run comprehensive health checks on the Claude Code Agent Monitor system. Validates dashboard API, database, WebSocket, hooks, and disk usage. Use to verify the monitoring setup is working correctly.
hook-diagnostics
Diagnose Claude Code hook installation, delivery, and ingestion issues. Checks hook configuration, connectivity, event flow, and identifies common problems. Use when events are not appearing in the dashboard.
hook-inventory
Inventory hooks across the user, project, and project-local settings plus the ~/.claude/hooks scripts directory — read through the Agent Monitor Config Explorer API — and flag hooks that POST to the network or run arbitrary commands. Reads /api/cc-config/hooks and /api/cc-config/hook-scripts. Use when auditing hook safety.
i18n-parity
MANDATORY for every coding agent and contributor touching localized content — keep all five localization surfaces (dashboard UI keys, wiki page, mirrored READMEs, locale-aware formatting, language switchers) in parity across every supported language. Use automatically (without being asked) whenever you add or change user-visible UI copy, add an i18n key, edit README.md, edit wiki/index.html, or change docs that the READMEs and wiki mirror — and use the full new-language checklist whenever adding a language (a new README-XX.md, a new client/src/i18n/locales/<xx>/ directory, or a new lang-option in the wiki).
live-watch
Polls the Agent Monitor /api/stats endpoint several times over a short window and reports the live deltas in active_sessions, active_agents, events_today, and ws_connections so you can see activity moving in real time. Use when watching the dashboard for live changes rather than a one-time snapshot.
mcp-audit
Audit the configured MCP servers (user + project scope) via the Agent Monitor Config Explorer API: transport (stdio vs http), command/args and env variable names, headers, and the source file each definition came from. Reads /api/cc-config/mcp. Use when reviewing MCP integrations for hygiene, duplication, or unexpected transports.
memory-review
Review the file-based memory store via the Agent Monitor Config Explorer API: the user and project CLAUDE.md plus per-project auto-memory files under ~/.claude/projects/<slug>/memory/*.md. Groups by project, shows the index (MEMORY.md) vs per-fact files, and flags stale or oversized facts. Reads /api/cc-config/memory and /api/cc-config/file?path=. Use when curating agent memory.
model-mix
Break down Claude Code usage by model family (Opus / Sonnet / Haiku) from the Agent Monitor dashboard — each family's share of tokens, share of cost, and the spots where an expensive model is doing cheap work. Pulls per-model token and cost splits from /api/pricing/cost, current rates from /api/pricing, fleet token totals from /api/analytics, and per-session model assignment from /api/sessions. Use when deciding model routing or whether to downshift work to a cheaper tier.
model-savings
Estimate the dollars saved by routing eligible Claude Code work to a cheaper model family, using the Agent Monitor pricing engine. Re-prices each model's token mix at the target family's rates and quantifies the delta. Uses /api/pricing (rates), /api/pricing/cost (current per-model spend), /api/sessions, and /api/analytics. Use when hunting for cost cuts or comparing model tiers.
optimization-suggest
Suggest concrete optimizations for Claude Code usage based on historical session data. Covers cost reduction, speed improvement, error prevention, and workflow efficiency. Use for data-driven optimization planning.
pattern-detect
Detect recurring patterns using the Agent Monitor's workflow intelligence — toolFlow transitions (tool A → B frequency matrices), recurring workflow patterns, agent co-occurrence pairs, model delegation habits, error propagation paths by agent depth, and compaction triggers. Use to discover habitual usage patterns and anti-patterns.
productivity-score
Calculate a productivity score using actual Agent Monitor metrics — session completion rates, cache efficiency (cache_read vs input), compaction pressure (baseline tokens), turn velocity (turn_count / total_turn_duration_ms), tool success ratio (PreToolUse vs PostToolUse), and the workflow intelligence API's complexity and effectiveness scores.
push-to-forked-pr
Push the current working tree directly to a GitHub PR whose head lives on a **fork**, without creating a new branch and without pushing to `origin` (which is usually the upstream). Invoke when the user says things like "push straight to PR
regression-watch
Detect quality and efficiency regressions over time using Agent Monitor data — rising error rate (APIError events), falling cache hit rate, growing compaction frequency, and climbing cost-per-session. Splits history into an earlier baseline window and a recent window and reports which metrics are getting worse, by how much, and where. Use when checking whether things are degrading or trending in the wrong direction.
session-compare
Compare two sessions side-by-side using Agent Monitor data — per-model token usage (input/output/cache_read/cache_write + compaction baselines), pricing engine cost breakdowns, workflow intelligence (complexity scores, tool flow transitions, subagent effectiveness), session metadata (thinking_blocks, turn_count, turn_duration_ms, usage_extras), and full event timelines with all 10+ event types.
session-debug
Debug a specific session by inspecting its full event chain (PreToolUse, PostToolUse, Stop, SubagentStop, Compaction, APIError, TurnDuration, Notification events), agent hierarchy (recursive parent/child tree with subagent_type and depth), token usage with compaction baselines, workflow intelligence data (orchestration DAG, error propagation by depth), and session metadata (thinking_blocks, turn_count, total_turn_duration_ms).
session-report
Generate a comprehensive session report with per-model token usage (input, output, cache_read, cache_write including compaction baselines), cost breakdown via the pricing engine, tool invocations, agent hierarchy, compaction events, API errors, turn durations, and thinking block counts. Use when reviewing a specific session or summarizing activity over a date range.
skill-inventory
Inventory the installed skills and which plugins contribute them, then flag overlap with the user's own skills — read through the Agent Monitor Config Explorer API. Reads /api/cc-config/skills and /api/cc-config/plugins. Use when managing skills: deduping, deciding what to keep, or tracing a skill back to the plugin that ships it.
spend-forecast
Forecast Claude Code spend to the end of the week or month from the daily session trend on the Agent Monitor dashboard — moving average of daily spend × days remaining, added to spend-to-date. Uses /api/analytics daily_sessions, /api/pricing/cost, and /api/sessions for a per-day cost curve. Use when projecting cost or asking "where will my spend land".
transcript-grep
Search a Claude Code session transcript for a string or regex pattern and show every matching message with surrounding context. Reads /api/sessions/:id/transcript and resolves sessions via /api/sessions?limit= from the Agent Monitor dashboard. Use when hunting for a specific message, prompt, tool call, or error inside a session's conversation.
update-project-docs
MANDATORY for every coding agent (Claude Code, Codex, or any other) — keep this repository's documentation in sync after any change to behavior, configuration, interfaces, events, schema, or features. Use automatically (without being asked) at the end of ANY change-set that adds or alters an env var, event type, hook behavior, session/agent state transition, API route or response shape, DB schema, WebSocket message, MCP tool, CLI command, or user-facing feature — and whenever the user asks to "update the docs / README / wiki / architecture". Knows the full doc surface (README + CN/VN/KO/ES, ARCHITECTURE, root index.html, wiki + i18n, server/client READMEs, docs/*) and which docs each kind of change touches.
usage-trends
Analyze Claude Code usage trends over time using the Agent Monitor's analytics API — daily session counts, daily event counts, token volumes by type, model distribution, tool usage rankings, and agent/event type distributions across 365-day retention windows.
version-release
Choose and apply the correct semantic version bump for this repository. Use for every user-visible release, before merge when a change set should ship as patch, minor, or major, and whenever package/plugin/desktop version metadata must stay synchronized.
ui-ux-pro-max
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
build-dashclaw
Contribute to the DashClaw codebase — architecture, scaffolding, tests, CI
meridian-ui
Build, develop, and debug the Meridian dashboard - the Next.js static export that runs inside the Tauri tray webview. Covers the bridge to Rust, component patterns, and the bun test runner.
a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
apply-aesthetic
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
brandkit
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
design-qa
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
design-review
Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
design-tokens
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
figma-integration
Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.
governance
Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.
migrate-design-system
Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.
performance
Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.
prototype
Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.
redesign
Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.
token-build
Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.
ux-writing
Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.
heroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
Showing top 100 of 711 skills using Tailwind CSS by quality score.
See all 711 skills via search →Integration detected automatically from skill content. Some results may be false positives.