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
cursor-animated-sites
rheinmir/setup
Build an interactive "cursor-animated walkthrough" page on top of the /docs-site-macos glass theme — a narrow LEFT step-list + wide RIGHT animated folder-tree where an arrow cursor sits in the gutter at the start of each line and moves controller→file per step, files TYPE IN like a transcript exactly when they are created (absent before), nodes are colored BY ROLE (source/read vs dest/write vs pass vs verdict) with text tags, each step has its own accent, there is a manual "step" mode and an auto-play mode, and a caption under the frame narrates the current frame. Use for explaining install→runtime lifecycles, sequences, data-flow, or any "how it works, step by step" walkthrough where the viewer must SEE which file each action touches. Hooks /docs-site-macos for the base glass design system.
design-system-generator
qodex-ai/ai-agent-skills
Generate design systems and theme variations. Creates cohesive visual systems with color schemes, typography, and component styling.
ui-visual-design-system
phazurlabs/sumi
Visual design craft: typography scales, color theory (OKLCH, color-mix, light-dark), spacing systems, grids, visual hierarchy, elevation, iconography, and modern CSS (container queries, :has(), subgrid, @layer). Use when setting type and color, fixing hierarchy, or building a visual language.
android-material3-design-system
krutikjain/android-agent-skills
Apply Material 3 tokens, color, type, spacing, adaptive components, and theme ownership in Android apps.
design-system-management
anthropics/knowledge-work-plugins
Manage design tokens, component libraries, and pattern documentation. Trigger with "design system", "component library", "design tokens", "style guide", or when the user asks about maintaining consistency across designs.
design-md-convention
thebeardedbearsas/claude-craft
Convention DESIGN.md pour design systems AI-friendly. Use when setting up a new project UI, documenting design tokens, or generating UI consistent with a design system.
rico-ui-ux-themes
ricocc/rico-skills
|
amsterdam-design-system
amsterdam/amsterdam-agent-skills
>
design-system-documenter
curiositech/some_claude_skills
Creates comprehensive documentation for design systems - token tables, usage guidelines, component examples, and accessibility notes. Use after generating tokens to create developer-friendly
create-design-system-rules
dedalus-erp-pas/foundation-skills
Génère des règles de design system personnalisées pour le codebase de l'utilisateur. À utiliser quand l'utilisateur dit « créer des règles de design system », « générer des règles pour mon projet », « configurer les règles de design », « personnaliser les guidelines du design system », ou veut établir des conventions spécifiques au projet pour les workflows Figma-vers-code. Nécessite une connexion au serveur MCP Figma.
design-systems-frontend-architecture
hueyexe/frontend-agent-skills
Use when building reusable frontend systems, design tokens, component contracts, responsive layouts, CSS strategy, or design-system documentation and governance.
design-systems-architecture
phazurlabs/sumi
Design system architecture: W3C design tokens, Style Dictionary pipelines, component library structure, theming, multi-brand token tiers, governance, versioning, and maturity models. Use when starting or scaling a design system, generating tokens, or setting up design-to-code distribution.
figma-expert
rightnow-ai/openfang
Figma design expert for components, auto-layout, design systems, and developer handoff
design-system
oakoss/agent-skills
Builds scalable design systems with tokens, theming, and component architecture. Use when creating design token hierarchies, theming systems, component variant patterns, or accessibility foundations. Use for design tokens, CVA variants, dark mode, multi-brand theming, Radix headless UI, Storybook documentation, and governance.
ui-design-system
hieutrtr/ai1-skills
>-
figma
vm0-ai/vm0-skills
Figma API for design files and assets. Use when user mentions "Figma",
figma-design-tool-workflows
phazurlabs/sumi
Figma mastery and design-to-code: Auto Layout, component architecture, variable modes, Dev Mode handoff, Figma MCP server integration, Code Connect, and token pipelines. Use when working in Figma, converting designs to code, or setting up a design-to-code flywheel.
figma-design-system-inventory
southleft/figma-console-mcp-skills
One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visual specs), and styles (color/text/effect with resolved values). Use when you need the whole design-system picture before generating code or auditing coverage — triggers: 'inventory my design system', 'extract all tokens and components', 'what's in this design system', 'dump the design system kit', 'give me every variable, component, and style', 'build a design-system manifest', 'audit my Figma library'. Has a verbosity/scope guard so big files don't blow the response budget. Goes well beyond the native MCP's get_design_context (single-selection) / get_metadata.
tenzir-design-system
tenzir/skills
>-
visualizing-data
ancoleman/ai-design-components
Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.
figma-check-design-parity
southleft/figma-console-mcp-skills
Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detect design-to-code DRIFT: triggers 'check design parity', 'does my code match the Figma', 'compare this component to the design', 'is my implementation faithful', 'find differences between design and code', 'verify the build matches Figma', 'design QA against code', 'parity score'. Reads the node's visual / typography / spacing / token / accessibility specs via use_figma (any plan) and diffs them against a codeSpec you provide. Complements the native get_design_context: instead of GENERATING code, it VALIDATES that existing code stayed in sync with the design.
claude-design-system-architect
onewave-ai/claude-skills
Generate a complete, premium design system from a brand brief or an existing site — color tokens, type scale, spacing/radius/elevation, motion language, and component specs — exported as Tailwind config, CSS variables, and a usage doc. Built to look editorial and human-crafted, not template-generated. Use when starting a new product/site, unifying an inconsistent UI, or codifying a brand into reusable tokens.
ml-system-design-review
ml-systemdesign/mlsystemdesign
Use when reviewing ML system design docs, ML/AI project repos, design-doc PRs, RAG/LLM/foundation-model architectures, agentic AI workflows, or production ML readiness. Applies the ML System Design framework by Kravchenko and Babushkin to grade designs, compare docs with code, find critical gaps and low-hanging fruit, and give specific non-cringy praise.
studio-ui-patterns
supabase/supabase
Design system UI patterns for Supabase Studio. Use when building or updating
figma-setup-design-tokens
southleft/figma-console-mcp-skills
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. For incremental edits to an existing system use figma-manage-variables; for syncing from a code tokens file use figma-import-tokens.
figjam-create-content
southleft/figma-console-mcp-skills
Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes', 'make a section/table/code block in FigJam', 'auto-arrange the board', 'read what's on the FigJam board', 'map the connections'. More granular than the native generate_diagram (which produces a whole diagram in one shot). FigJam files only (figma.editorType === 'figjam'). Requires the Figma Desktop app (Plugin API).
godot-ui
jame581/godotprompter
Use when building user interfaces — Control nodes, themes, anchors, containers, and layout patterns
figma-slides
southleft/figma-console-mcp-skills
Author Figma Slides presentations — list/create/duplicate/reorder/delete slides, read the slide grid, add text and shapes to a slide, set slide background color, set or read slide transitions (dissolve, slide-from, push-from, smart-animate), focus a slide, and toggle skip. Use when the user wants to build or edit a Figma Slides deck. Triggers: 'create a slide', 'add a slide to the deck', 'reorder slides', 'set the slide background', 'add a transition between slides', 'add text/shape to slide 3', 'read what's on this slide', 'skip this slide in the presentation'. Figma Slides files only (figma.editorType === 'slides'). Requires the Figma Desktop app (Plugin API).
figma-automation
composiohq/awesome-claude-skills
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
arcgis-widgets-ui
saschabrunnerch/arcgis-maps-sdk-js-ai-context
Build map user interfaces with ArcGIS widgets, Map Components, and Calcite Design System. Use for adding legends, layer lists, search, tables, time sliders, and custom UI layouts.
tailwindcss
timelessco/recollect
Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes.
figma-plugin
srstomp/pokayokay
Use when building Figma plugins, creating design automation tools, implementing sandbox/UI communication, or working with the Figma Plugin API for node manipulation, styles, and components.
design-system
jwilger/agent-skills
>-
figma-official-skills
podo/design-agent-skills
|
implementing-figma-designs
onekeyhq/app-monorepo
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
claude2figma
podo/design-agent-skills
|
design-tokens-skill
podo/design-agent-skills
|
figma-capture
djalmajr/skills
Capture a rendered local web page or app screen into the clipboard for pasting into Figma using the official html-to-design capture.js flow. Use when the user invokes /figma-capture, asks to copy the current browser page to Figma, asks for a dev-only Figma capture button, or asks whether figma_key/captureId is needed for Figma HTML capture.
figma-catalogue
podo/design-agent-skills
|
figma-variables-tokens-generator
podo/design-agent-skills
|
ui-components-expert
oimiragieo/agent-studio
UI component library expert including Chakra, Material UI, and Mantine
tailwind-v4-best-practices
jenishshrestha/ai-skills
Expert guidance for writing production-grade Tailwind CSS v4 code with design system thinking. Use this skill when users mention Tailwind CSS, CSS styling, design systems, theme configuration, design tokens, OKLCH colors, component styling, or migrating from Tailwind v3 to v4. Also trigger when writing or reviewing any CSS in a Tailwind project, even if "Tailwind" isn't explicitly mentioned. Covers @theme configuration, semantic utilities, and modern CSS patterns.
figma-skill
podo/design-agent-skills
|
design
johnlindquist/claude
Design system and token management. Use for managing design tokens, colors, typography, and maintaining design consistency.
opendesign-tokens
finch-poi/opendesign-skills
OpenDesign 设计 Token 指南。当需要使用 @opensig/opendesign-token 包中的 CSS 变量时使用此 skill。包含六套主题（openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC）的完整 token 体系，支持颜色、间距、圆角、字体、阴影、响应式排版、栅格系统等所有设计令牌。使用场景：(1) 查找颜色值对应的语义 token，(2) 获取间距/圆角/字体的 token 名称，(3) 了解六套主题的差异，(4) 代码中使用 CSS 变量替代硬编码值，(5) 使用响应式 token 实现多断点适配，(6) 引入鸿蒙字体文件并使用字体族/字重 token（含七档字重、拉丁/中文自动分流、按字重按需引入）
tailwind-css
dralgorhythm/claude-agentic-framework
Tailwind CSS 4.x utility-first styling patterns. Use when building UI components, creating responsive layouts, implementing design systems, or customizing themes. Covers CSS-first configuration, @theme directive, and component patterns.
tailwind4-expert
yuniorglez/gemini-elite-core
Senior expert in Tailwind CSS 4.0+, CSS-First architecture, and modern Design Systems. Use when configuring themes, migrating from v3, or implementing native container queries.
figma-reader
delexw/claude-code-misc
Read Figma designs via Figma MCP server. Auto-detects MCP availability and prompts user only if setup is needed. Use when Figma links or UI design images are found in task context.
design-system
robonuggets/design-system
Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF. Triggers on "design system", "brand book", "make design assets", "extract design", "brand page", "one page brand".
syncfusion-winforms-theming
syncfusion/winforms-ui-components-skills
Comprehensive guide for implementing Syncfusion Windows Forms SkinManager and theme application. Use this when working with WinForms themes, SkinManager, or applying Office2016/Office2019 themes to controls. This skill covers theme assemblies, VisualTheme configuration, ApplicationVisualTheme setup, and custom control styling.
wix-design-system
wix/skills
Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on "what component", "how do I make", "WDS", "show me props", "testkit", "driver", or component names like Button, Card, Modal, Box, Text.
design-systems
dralgorhythm/claude-agentic-framework
Build and maintain design systems. Use when creating component libraries, design tokens, or style guides. Covers atomic design and tokens.
component-library
bbeierle12/skill-mcp-claude
Comprehensive React component library with 30+ production-ready components using shadcn/ui architecture, CVA variants, Radix UI primitives, and Tailwind CSS. Use when users need to (1) Create React UI components with modern patterns, (2) Build complete component systems with consistent design, (3) Implement accessible, responsive, dark-mode-ready components, (4) Generate form components with React Hook Form integration, (5) Create data display components like tables, cards, charts, or (6) Build navigation, layout, or feedback components. Provides instant generation of customizable components that would otherwise take 20-45 minutes each to hand-code.
clonecn
hunvreus/clonecn
Generate or modify a shadcn/ui theme from a screenshot, URL, reference app, or style direction.
liquid-theme-standards
shopify/liquid-skills
CSS, JavaScript, and HTML coding standards for Shopify Liquid themes. Covers BEM naming inside stylesheet tags, design tokens, CSS custom properties, Web Components for themes, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme asset files.
ui-tokens
sickn33/agentic-awesome-skills
View, add, or modify design tokens in the StyleSeed design system
demo-design-tokens
dralgorhythm/claude-agentic-framework
Default design tokens for demo applications. Use when building demos without a formal design system. Provides colors, typography, spacing, shadows, and transitions.
implementing-figma-ui-tempad-dev
ecomfe/tempad-dev
>-
tailwind-design-system
rmyndharis/antigravity-skills
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
using-westpac-ui
westpacgel/gel-next
Guides consumers of the @westpac/ui component library on correct usage, capabilities, and patterns. Use when asking how to use a GEL component, whether a component supports a feature, or how to implement a UI pattern with @westpac/ui.