250 free skills · page 4 of 5
Design Systems skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Real files from public repositories — hand-curated, never invented. Sorted by installs.
4 / 5page
generic-fullstack-design-systemtravisjneuman/.claudeComplete design system reference for full-stack applications. Covers colors, typography, spacing, component patterns (shadcn/ui), effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.Design Systems130
cursor-animated-sitesrheinmir/setupBuild 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 Systems125
design-system-generatorqodex-ai/ai-agent-skillsGenerate design systems and theme variations. Creates cohesive visual systems with color schemes, typography, and component styling.Design Systems123
android-material3-design-systemkrutikjain/android-agent-skillsApply Material 3 tokens, color, type, spacing, adaptive components, and theme ownership in Android apps.Design Systems122
ui-visual-design-systemphazurlabs/sumiVisual 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.Design Systems122
design-system-managementanthropics/knowledge-work-pluginsManage 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 Systems118
design-md-conventionthebeardedbearsas/claude-craftConvention 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.Design Systems115
rico-ui-ux-themesricocc/rico-skillsUI/UX design optimization toolkit with 20 built-in themes and custom theme generation.Design Systems114
amsterdam-design-systemamsterdam/amsterdam-agent-skillsProduction guidance for building City of Amsterdam digital products using the official design system. Components, tokens, layout patterns, and integration with Tailwind CSS v4.Design Systems113
design-system-documentercuriositech/some_claude_skillsCreates comprehensive documentation for design systems - token tables, usage guidelines, component examples, and accessibility notes. Use after generating tokens to create developer-friendlyDesign Systems113
create-design-system-rulesdedalus-erp-pas/foundation-skillsGé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 Systems111
design-systems-frontend-architecturehueyexe/frontend-agent-skillsUse when building reusable frontend systems, design tokens, component contracts, responsive layouts, CSS strategy, or design-system documentation and governance.Design Systems109design-systems-architecturephazurlabs/sumiDesign 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.Design Systems108
figma-expertrightnow-ai/openfangFigma design expert for components, auto-layout, design systems, and developer handoffDesign Systems103
ui-design-systemhieutrtr/ai1-skillsActivate this skill when: - Creating new UI components that must follow a design system - Building page layouts with consistent spacing and structure - Setting up or extending design tokens (colors, typography, spacing) - Choosing colors, fonts, or spacing values for a project - Reviewing UI code…Design Systems101
design-systemoakoss/agent-skillsBuilds 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.Design Systems101
figmavm0-ai/vm0-skillsFigma API for design files and assets. Use when user mentions "Figma",Design Systems101figma-design-tool-workflowsphazurlabs/sumiFigma 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.Design Systems100
tenzir-design-systemtenzir/skillsCanonical home of the Tenzir design system: machine-readable tokens, design principles, and brand assets. The skill defines values and design decisions; how those get realized in any given tool is out of scope.Design Systems96
figma-design-system-inventorysouthleft/figma-console-mcp-skillsOne 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.Design Systems96
visualizing-dataancoleman/ai-design-componentsBuilds 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.Design Systems91figma-check-design-paritysouthleft/figma-console-mcp-skillsCompare 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.Design Systems90
claude-design-system-architectonewave-ai/claude-skillsGenerate 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.Design Systems89
ml-system-design-reviewml-systemdesign/mlsystemdesignUse 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.Design Systems87
studio-ui-patternssupabase/supabaseDesign system UI patterns for Supabase Studio. Use when building or updatingDesign Systems87figma-setup-design-tokenssouthleft/figma-console-mcp-skillsBootstrap 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.Design Systems86figjam-create-contentsouthleft/figma-console-mcp-skillsAuthor 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).Design Systems85
figma-automationcomposiohq/awesome-claude-skillsAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.Design Systems83
godot-uijame581/godotprompterUse when building user interfaces — Control nodes, themes, anchors, containers, and layout patternsDesign Systems83figma-slidessouthleft/figma-console-mcp-skillsAuthor 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).Design Systems83
arcgis-widgets-uisaschabrunnerch/arcgis-maps-sdk-js-ai-contextBuild 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.Design Systems82
tailwindcsstimelessco/recollectGuide 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.Design Systems80
figma-pluginsrstomp/pokayokayUse 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 Systems79
design-systemjwilger/agent-skillsValue: Communication -- a documented design system creates shared vocabulary for every visual decision. When philosophy is explicit and tokens are named, contributors extend the system consistently without guessing at intent.Design Systems78
figma-official-skillspodo/design-agent-skillsRun this before any Figma ↔ code workflow:Design Systems78
implementing-figma-designsonekeyhq/app-monorepoImplements Figma designs 1:1 using OneKey component library (还原设计稿).Design Systems78claude2figmapodo/design-agent-skillsAn enforcement layer comprising four skills that ensure every Figma canvas write complies with your design system.Design Systems75design-tokens-skillpodo/design-agent-skillsCheck whether the skill at this location still has a das: block: - Global: grep -q "^das:" ~/.agents/skills/design-tokens-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" - Project: grep -q "^das:" .agents/skills/design-tokens-skill/SKILL.md 2>/dev/null && echo "pointer" || echo…Design Systems70
figma-capturedjalmajr/skillsCapture 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.Design Systems68figma-cataloguepodo/design-agent-skillsDomain navigator for Figma, design-to-code workflows, design tokens, and official platform suites. Activate when the user asks for a skill that bridges design tools and code.Design Systems65figma-variables-tokens-generatorpodo/design-agent-skillsRuns a structured questionnaire to understand your design system needs, then generates a W3C Design Token Community Group (DTCG) compliant ZIP archive.Design Systems65
ui-components-expertoimiragieo/agent-studioUI component library expert including Chakra, Material UI, and MantineDesign Systems65
tailwind-v4-best-practicesjenishshrestha/ai-skillsExpert 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.Design Systems65figma-skillpodo/design-agent-skillsConnects to the Figma API to discover Community file resources that match your project context, extracts design tokens from those files, and generates framework-specific implementation code. Supports 7 frameworks — covering major React, Vue, Angular, and native ecosystems.Design Systems64
designjohnlindquist/claudeDesign system and token management. Use for managing design tokens, colors, typography, and maintaining design consistency.Design Systems64
opendesign-tokensfinch-poi/opendesign-skillsOpenDesign 设计 Token 指南。当需要使用 @opensig/opendesign-token 包中的 CSS 变量时使用此 skill。包含六套主题（openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC）的完整 token 体系，支持颜色、间距、圆角、字体、阴影、响应式排版、栅格系统等所有设计令牌。使用场景：(1) 查找颜色值对应的语义 token，(2) 获取间距/圆角/字体的 token 名称，(3) 了解六套主题的差异，(4) 代码中使用 CSS 变量替代硬编码值，(5) 使用响应式 token 实现多断点适配，(6) 引入鸿蒙字体文件并使用字体族/字重 token（含七档字重、拉丁/中文自动分流、按字重按需引入）Design Systems63
figma-readerdelexw/claude-code-miscRead 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 Systems62
tailwind-cssdralgorhythm/claude-agentic-frameworkTailwind 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.Design Systems62
tailwind4-expertyuniorglez/gemini-elite-coreSenior 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.Design Systems62design-systemsdralgorhythm/claude-agentic-frameworkBuild and maintain design systems. Use when creating component libraries, design tokens, or style guides. Covers atomic design and tokens.Design Systems60
design-systemrobonuggets/design-systemExtract 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".Design Systems60
syncfusion-winforms-themingsyncfusion/winforms-ui-components-skillsComprehensive 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.Design Systems60
wix-design-systemwix/skillsWix 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 Systems60
component-librarybbeierle12/skill-mcp-claudeComprehensive 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.Design Systems59
clonecnhunvreus/clonecnGenerate or modify a shadcn/ui theme from a screenshot, URL, reference app, or style direction.Design Systems58
liquid-theme-standardsshopify/liquid-skillsCSS, 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.Design Systems57
ui-tokenssickn33/agentic-awesome-skillsView, add, or modify design tokens in the StyleSeed design systemDesign Systems56demo-design-tokensdralgorhythm/claude-agentic-frameworkDefault design tokens for demo applications. Use when building demos without a formal design system. Provides colors, typography, spacing, shadows, and transitions.Design Systems55
implementing-figma-ui-tempad-devecomfe/tempad-devThis skill requires TemPad Dev MCP. If tempad-dev:* tools are unavailable/inactive/unauthorized, stop and tell the user to install TemPad Dev MCP and ensure it is activated in the TemPad Dev panel in the Figma design file.Design Systems54
tailwind-design-systemrmyndharis/antigravity-skillsBuild 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.Design Systems54Other tasks
same rules, different job
