494 free skills
Design Systems skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Sourced from real, public repositories — synced daily, never invented.
494 free skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Sourced from real, public repositories — synced daily, never invented.
15 tools across six categories
13 of them never send your data anywhere
Free · No signup · No trial clock
SEE THE DIRECTORY
panda-css
minbyeongchan/mbc-story
Styles UI with Panda CSS (css, cva, sva, tokens, conditions) and repo panda.config conventions. Use when editing styles, recipes, or panda.config—especially apps/h3; when the user mentions Panda CSS, styled-system, cva, or design tokens.
bright-green-tech-system-webgl
yray/skills
Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.
aura-design-systems
ceyhanmolla/opencode-skills
Automatically selects from reference design files. Analyzes project brief, presents best-matching designs, and extracts all design tokens (colors, typography, spacing, rounded) from the selected design.
amicro-design-system
gsfsss/amicro--micro-transitions-
Rules, design tokens, card structures, motion physics, and component architecture for the Amicro UI library. Use whenever creating or modifying UI components, page sections, micro-interactions, or transition features in the Amicro repository.
tailwind-app-setup
ghdoergeloh/finali
Wire Tailwind v4 + the shared design system into a new or broken app in this monorepo. Use when adding a new app under `apps/`, when classes from `@finali/ui` aren't being picked up by the bundler, when dark mode doesn't apply, when a new design token is needed, or when something "looks like a Tailwind problem." Covers the entry CSS pattern, the `@source` directive, dark‑mode wiring, and adding tokens to `tooling/tailwind/theme.css`.
Design System
omarmira/contabilidadbackup
Sistema de diseño unificado para AccountExpress. Define paleta de colores, tipografía, componentes base y patrones visuales del dark theme. Incluye herramientas de auditoría para detectar inconsistencias.
tailwindcss
exorich-lab/skills
Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.
tailwind-styling
jonit-dev/pixelperfect
Tailwind CSS styling patterns, dark theme implementation, and theme management for this project. Use when styling components, implementing UI changes, or working with the design system.
yaml-image-deck
mathruffian-dot/yaml-image-deck
Create consistent image-first slide decks from a structured YAML design system, layout registry, and per-slide content. Use when the user asks for a YAML image deck, NotebookLM-style image presentation, full-image PPTX, fixed visual grammar with controlled layouts, golden-sample style locking, or batch image slides across any subject. Supports baked slides and text-free plates with editable overlays.
transilience-report-style
aloc999/exploitninja
Threat Intelligence Report Design System — ReportLab-based PDF generation for A4 reports with Transilience branding, typography, and layout standards.
figure-diagram
concertoy/glissando
Build a diagram slide using glissando's built-in diagramBox, arrow, hookArrow, container, and native connector components. Use when the user says '/figure-diagram', 'draw a diagram', 'architecture diagram', 'flowchart', 'pipeline diagram', or needs a boxes-and-arrows style figure. Prefer this over /figure-figma and /figure for any diagram that can be expressed as labeled boxes with connections.
dx-figma-verify
easingthemes/dx-aem-flow
Visually verify a generated prototype against the Figma reference screenshot. Opens prototype in Chrome, takes a screenshot, compares with Figma reference using multimodal vision, fixes gaps, and produces a verification report. Use after /dx-figma-prototype. Trigger on "verify prototype", "compare prototype", "figma verify", "check prototype against figma". Do NOT use without a generated prototype or when no Figma reference screenshot exists.
design-themes
aminianp/skills
Generate or iterate the design system for the local prototype site by walking the user through a structured taste-elicitation flow (constraints, references, adjectives, dials), then writing a Tailwind v4 `@theme` block to `prototype/tokens.css` so all wireframes re-theme on browser refresh. Trigger when the user says "design-themes", "let's pick a theme", "set up the design system", "make it look like X", "I want this to feel like Linear/Stripe/Notion/Anthropic", "warmer / more playful / sharper / more vivid", or asks to switch the prototype between aesthetic options. Trigger proactively after `prototype-init` runs and at least one wireframe has been created, since the default monochrome theme is a placeholder rather than a chosen direction.
design
luisitoys12/estacionkusfm
Brand design system for Estación KUS FM — community radio in Irapuato, México. Covers brand colors, typography, radio player UI patterns, component guidelines, and visual identity rules for web properties.