Design
UI/UX direction, visual design, and design systems
react
by dylantarre
Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries, integrating CSS custom properties, or building Next.js design system components with forwardRef and composition.
storybook
by dylantarre
Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interactive examples, visual testing setups, or design system documentation sites.
vue
by dylantarre
Builds token-driven Vue 3 components with Composition API and TypeScript. Use when creating Vue component libraries, integrating design tokens, or building Nuxt design system components with composables.
radius-scale
by dylantarre
Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, card corners, or input styling. Outputs CSS, Tailwind, or JSON.
focus-states
by dylantarre
Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
figma
by dylantarre
Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.
component-docs
by dylantarre
Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.
aria-patterns
by dylantarre
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.
getting-started
by dylantarre
Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.
design-tokens-structure
by dylantarre
Architects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, adding multi-theme support, setting up token aliasing, or organizing token hierarchies.
icon-system
by dylantarre
Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.
woocode-objects
by keepnotes-ai
Use when designing, writing, or reviewing woo catalogs, woocode object prototypes, manifest seed objects, verbs, properties, event schemas, command surfaces, or block/plug integrations in this repository. Provides an agent programmer's guide to current Woo DSL syntax, catalog shape, object organization patterns, and validation discipline.
ux-designer
by gabeosx
Expert UX/UI design assistant based on the "Refactoring UI" philosophy (by Wathan & Schoger). Enforces logic-based design, strict hierarchy, and "buildable" visual systems. Use for converting requirements into professional, high-fidelity specs.
optics-context
by RoleModel
Use the Optics design framework for styling applications. Apply Optics classes for layout, spacing, typography, colors, and components. Use when working on CSS, styling views, or implementing design system guidelines.
paper-animation-director
by huaweier00
Turn a story, folktale, fable, script, or narration into a historically and physically credible multi-layer paper animation with reference-only frontal character identities, shot-specific spatial contracts, just-in-time shot assets, complete connected poses, realistic and recognizable props, ground/support continuity, narration-driven timing, per-shot release gates, voice-stem recovery, and master/social delivery. Use when the user asks for 纸片动画, 剪纸动画, 柔和工笔动画, 宣纸水彩故事, paper-theatre animation, an illustrated folktale, a cultural or historical story film, a layered recurring-character story, or a narrative animation whose identity, direction, objects, space, actions, sound, moral ending, and platform delivery must remain consistent and readable.
supergoal
by cskwork
Use for "fix this bug", "add/build/plan/spec this feature", "prototype this", "QA / verify", "code review", "improve architecture", "learn codebase", "make skill", or "eval a harness".
nano-image-generator
by Kiwee0614
"Generate images using Nano Banana Pro (Gemini 3 Pro Preview). Use when creating app icons, logos, UI graphics, marketing banners, social media images, illustrations, diagrams, or any visual assets. Supports reference images for style transfer and character consistency. Triggers include phrases like 'generate an image', 'create a graphic', 'make an icon', 'design a logo', 'create a banner', 'same style as', 'keep the style', or any request needing visual content."
get-design-done
by hegemonart
"Master design pipeline for Claude Code. 5-stage workflow: Brief → Explore → Plan → Design → Verify. Run 'brief' first in any new project to capture the design problem, then 'explore' to inventory the codebase and interview for context. Invoke without arguments for status and auto-routing."
design-system
by Cash4478
Generate a complete design system (design.md, design-guidelines.md, design-components.md) from any reference materials — images, PDFs, links, or descriptions.
brandmint
by Sheshiyer
End-to-end brand identity orchestration system. Generates text strategy, visual assets, campaign copy, video deliverables, and publishing outputs using 44 specialized skills across 9 categories. Chains FAL.AI/Nano Banana/Flux visual generation with brand positioning, buyer personas, and campaign workflows via wave-based execution. Includes Remotion-based programmatic video generation.
anti-default-output
by Lucent-Snow
在创意写作、头脑风暴、方案设计、内容创作、分析与观点表达等任务中，当输出的价值不只由准确性决定、而是由视角和表达决定时，调用此 skill。它帮助 AI 识别自己的默认生成路径，并在输出前刻意偏离，产出有性格、有立场、令人难忘的内容。
go-benchmark-testing
by sentenz
Automates benchmark test creation for Go projects using the standard testing package with consistent software testing patterns. Use when creating performance benchmarks, profiling tests, or when the user mentions benchmarking, performance testing, or optimization.
cpp-api-documentation
by sentenz
Adds Doxygen-compatible documentation comments to C++ header files. Use this skill exclusively for adding or improving API documentation in existing header files (.hpp, .h). Do NOT create new resource files such as Doxyfile, scripts, or README files.
style-dictionary
by Tyler-R-Kendrick
Use when transforming design tokens into platform-specific outputs using Style Dictionary. Covers configuration, transforms, formats, DTCG support, and multi-platform builds. USE FOR: Style Dictionary configuration, token transforms, platform-specific token output (CSS, SCSS, iOS, Android, Compose), custom formats, DTCG-to-platform pipelines DO NOT USE FOR: authoring token files (use design-tokens), Figma variable management (use figma), component documentation (use storybook)