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
figma-generate-diagram
figma/dev-mode-mcp-server-guide
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
fandhe-frontend
fandhe-ai/agent-reference-skills
>
figma
jetbrains/skills
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
ui-themes
aussiegingersnap/cursor-skills
Theme generation with tweakcn for shadcn/ui and Magic UI animations. Use when setting up project themes, customizing color schemes, adding dark mode, or integrating animated components.
shopify
binhmuc/autobot-review
Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product/order/customer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.
reacticx
honeyhead/reacticx_skills
React Native animated component library reference for Reacticx - 90+ production-ready components with Reanimated and Skia. Triggers on reacticx, reactix, or requests for animated React Native UI components (shaders, carousels, bottom sheets, toggles, pickers, loaders, etc).
ck:shopify
binjuhor/shadcn-lar
Build Shopify apps, extensions, themes with Shopify CLI. Use for GraphQL/REST APIs, Polaris UI, Liquid templates, checkout customization, webhooks, billing integration.
brandfy-design-tokens
promovaweb/brandfy
Gera paletas acessíveis e tokens para websites e sistemas. Use para produzir CSS, JSON e tema Tailwind nos modos light e dark.
figma-use-figjam
figma/dev-mode-mcp-server-guide
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
create-design-system-rules
dedalus-erp-pas/hexagone-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.
figma-skill
idanbeck/claude-skills
Read Figma files, export assets, and manage comments. Use when the user asks to get Figma designs, export images from Figma, or work with Figma components.
component-audit
murphytrueman/design-system-ops
Audit a design system's component library for health, producing a findings-based assessment of usage, complexity, duplication, and coverage gaps with actionable recommendations. This produces a deep, single-dimension audit of the component library, NOT a cross-cutting system health assessment. Trigger when someone says: audit my components, component health, what components do I have, unused components, component coverage, component review, assess my library, or anything about evaluating the quality and health of a component library. Do NOT trigger for building machine-readable index files or dependency graphs for AI agents — use codebase-index for those. Do NOT trigger for a holistic health summary — use system-health for that.
figma-to-design-init
codestate-cs/figma-to-design
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, detects API call patterns, and generates design token files under .claude/design-tokens/. Run this once per project before using /figma-to-design-build.
editor-themes
basiclines/rampa-studio
Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration.
marketplace-build-component
vercel-labs/sitecore-skills
Builds UI components using the Blok design system for Sitecore Marketplace apps. Use when the user wants to create UI, add components, build a page layout, or work with Blok/shadcn components in a marketplace app.
external-resource-context
shinpr/claude-code-workflows
Captures and persists access methods for resources outside the repository (design source, design system, API schema, IaC source, secret store) so downstream work can reach them deterministically. Use when work depends on external resources, or when the user mentions design source, design system, API schema, IaC source, secret store, or canonical source.
component-api-validator
murphytrueman/design-system-ops
Audit component APIs for consistency, breaking changes, TypeScript coverage, and contract compliance across a component library. Trigger when someone says: component prop review, verify component types are exported, component API audit, check our component interfaces, are our props consistent, API consistency check, prop naming review, breaking change detection, or anything about checking whether component APIs are structurally sound and consistent across the library.
figma-create-new-file
figma/dev-mode-mcp-server-guide
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
lint-fix
getsentry/sentry
Fix violations of an eslintPluginScraps rule across the codebase. Use when asked to "fix lint violations", "apply a lint rule", "fix scraps rule errors", "roll out a lint rule", "enforce a rule codebase-wide", or "fix design system lint". Covers manual fixes, autofix, batching, and codemod strategies for large-scale rollouts.
design-system
tyler-r-kendrick/agent-skills
|
figma-to-design-audit
codestate-cs/figma-to-design
Audit your codebase for design token drift. Finds hardcoded colors, spacing, and font values that should use design tokens. Reports unused tokens and components not following the design system. Run periodically to keep your codebase consistent.
figma
nafiurrahmanniloy/figma-skill
Figma design bridge for Claude Code. Browse files, extract components, download assets, extract design tokens, and generate code for Tailwind, React, Vue, Svelte, React Native, Flutter, and CSS. Use when user mentions Figma, design tokens, Figma-to-code, or wants to convert designs to components.
figma-implement-design
moizibnyousaf/ai-agent-skills
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
lint-new
getsentry/sentry
Create a new ESLint rule with tests for eslintPluginScraps. Use when asked to "create a lint rule", "add an eslint rule", "scaffold a rule", "write a new scraps rule", or "new design system lint rule". Covers rule creation, test authoring, registration, and autofix implementation.
m3-web-tailwind
shelbeely/shelbeely-agent-skills
Implement Material Design 3 with Tailwind CSS by mapping M3 design tokens to Tailwind's theme configuration. Covers the tailwind-material-3 plugin and manual token mapping. Use this when building M3-styled projects with Tailwind CSS.
css-conventions
perdolique/workflow
CSS conventions for authoring and reviewing CSS, SCSS, CSS Modules, design tokens, and responsive layouts. Use whenever a task changes or reviews styling, regardless of framework.
figma-quarterback
snailb1007/snail-codex-skills
Coordinate a high-fidelity Figma-to-code workflow for screens, layouts, drawers, dialogs, or component groups. Use when Codex receives one or more Figma URLs or node IDs and must decide how to extract exact design intent, split work into reusable components, route implementation safely, and keep conversion and apply work aligned with the local design system and verification constraints.
figma-implement-design
firecrawl/skills
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
ui-designer
majiayu000/spellbook
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
frontend-ui-dark-ts
involvex/skills
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
button-skill
ashwinikarnik/rds-skills
Reusable workflow for implementing and validating the RDS Button component using @rds-vue-ui packages from the private registry, including theme wiring, examples, and QA checks.
design-system-context
doanchienthangdev/omgkit
Automatic design system context injection for UI consistency
component-library-patterns
vibeeval/vibecosystem
Design system token management, component API design, Storybook, and visual regression testing patterns
moai-connector-figma
rdmptv/adbautoplayer
Design System & UI Kit Development with Figma 2025, Design Tokens, and Component Documentation
shopify
nilecui/skillsbase
Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product/order/customer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.
figma-implement-design
iml1s/flutter-claude-skills
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
figma-node-fetcher
learnwy/skills
Fetch Figma node JSON or node image from a Figma URL. Use when users need layer/node structure, node screenshot export, or design-token inspection from Figma. Require URL with node-id query. Check FIGMA_ACCESS_TOKEN first and guide setup when missing.
design
alicoder001/agent-skills
UI design guidelines for web apps covering layout, typography, color, spacing, and component consistency. Use when defining or reviewing UI/UX design systems, page layouts, or visual hierarchy.
tailwind-design-system
baotoq/micro-commerce
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.
design-production
mevans2120/design-suite-claude-skills
Creates production-ready design files, prototypes, and specifications for development teams. Translates validated concepts into detailed, implementable designs with comprehensive specs for developers. Produces Figma files (via API), high-fidelity prototypes, design specifications, and animation files.
design-tokens
darkroomengineering/cc-settings
Generate OR consolidate design tokens — type scales, color palettes, spacing systems, dark-mode derivations with WCAG checks (generate); or audit-and-reduce an over-grown Tailwind v4 token set with identical render (consolidate). Outputs CSS/Tailwind. Triggers "design tokens", "type scale", "color palette", "theme setup", "reduce tokens", "dedupe tokens", "too many tokens", "consolidate tokens".
figma-import
madebysan/claude-figma-skills
Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens — then creates Figma variable collections via figma-console MCP. Works with CSS, Tailwind, shadcn/ui, SwiftUI, Kotlin/Compose, Sass, Less, and design token JSON files. Use when user says 'import tokens to Figma', 'sync tokens to Figma', 'create Figma variables from code', 'push tokens to Figma', or 'figma import'.
figma-to-android
aihip/android-claude-code-skills
Use when converting Figma design data (node JSON, layer descriptions, annotation data, or screenshot descriptions) into production-ready Android native View XML and Kotlin code. Trigger phrases: figma to android, figma 转 android, figma 生成代码, 设计稿转代码, design to android code, figma node json, convert figma, 还原设计稿.
figma-use-slides
figma/dev-mode-mcp-server-guide
This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
figma-implement-design
figma/dev-mode-mcp-server-guide
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
figma-sync
bighardperson/computer-science-skills-collection
|
moai-domain-uiux
modu-ai/cc-plugins
>
moai-library-shadcn
modu-ai/cc-plugins
>
moai-foundation-uiux
rdmptv/adbautoplayer
Core UI/UX Foundation - Enterprise design systems, component architecture, accessibility, icons, and theming integration
igniteui-blazor-theming
igniteui/igniteui-blazor
Covers theming and visual customization for Ignite UI for Blazor: choosing and switching built-in themes (Bootstrap, Material, Fluent, Indigo - light and dark variants), customizing component appearance with CSS custom properties (design tokens), using the igniteui-theming MCP server to generate component themes and palettes, applying custom palettes, setting roundness/spacing/sizing tokens globally, dark mode switching, scoped component theming, and CSS parts. Use when users ask about changing the look and feel of Ignite UI Blazor components, applying a color scheme, generating CSS variables, using CSS parts, or customizing design tokens. Do NOT use for grid data features or component configuration - use igniteui-blazor-grids or igniteui-blazor-components instead.
design-tokens-theming
param087/saas-ui-skills
Use when setting up a design system — color, typography, and spacing scales as CSS variables, the shadcn/ui theme, and dark mode. Covers semantic tokens, Tailwind wiring, and consistent theming across components.
figma-create-design-system-rules
figma/dev-mode-mcp-server-guide
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.
figma-extract
nexu-io/open-design
Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.
monogame-ui-controls
alca259/monogame-skills
MonoGame UI component library — Label, Button (with hover animation), ProgressBar/health bar, ScrollView with scissor clipping, Panel, Sprite (texture display), and Checkbox. Use this skill whenever the user asks about specific UI components - buttons, labels, text display, health bars, progress bars, scroll views, inventory slots, dialog boxes, tooltips, panels, image/sprite in UI, checkbox, toggle, or "how do I build a specific component" in MonoGame — even if they just say "I need a button", "how do I make a health bar", or "how do I show an image in my UI".
design-tokens
andronics/claude-plugin-css-pro
Design token management for creating, organizing, and applying design tokens across projects. Supports multiple formats (CSS custom properties, Sass, JS, JSON). Use when setting up design systems or managing design tokens.
figma-bridge
owl-listener/designpowers
Use to turn Designpowers' markdown specs into something a designer can actually SEE and manipulate, and to pull existing Figma work back in. Bridges in both directions — push design-lead's visual decisions or built code into real Figma frames (code-to-design), and pull a Figma file in for review or as a design-system source (design-to-code). Falls back to a clickable HTML prototype when Figma isn't available. Invoke at the screenshot checkpoint, at handoff, when reviewing a Figma link, or whenever the user says "show me", "put this in Figma", or "make it real
figma-pixel-implement
fudesign2008/open-skills
Implement Figma UI with export-faithful assets and a design-spec table for later measured verify. Use when implementing from Figma URLs/nodes or user asks pixel-level restore / 按稿实现. Prerequisite: a working Figma design-context channel (MCP or equivalent)—not a Cursor-only skill name. Does NOT claim pixel alignment complete—hand off to figma-pixel-verify. Triggers — 「像素级还原」「按稿实现」「Figma 对齐实现」「还原 Figma」「figma 保真实现」 / implement from Figma, pixel restore. Do NOT use for code→Figma canvas writes, no-design creative UI, or post-impl alignment checking alone (use figma-pixel-verify).
ui-theming
k9i-0/flutter_autonomous_template
UI theming skill for applying brand designs to Flutter apps. Use when user asks to 'apply X style', 'change theme to Y', 'make it look like Z', or provides reference images for UI design.
shopify
mamba-mental/agent-skill-manager
Build Shopify applications, extensions, and themes using GraphQL/REST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product/order/customer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.
stage-ui-design-system
stagewise-io/stagewise
Stagewise UI theming, design tokens, derived utilities, and component library reference. Use when creating, editing, or reviewing UI in apps/browser, implementing new screens or components, or styling with Tailwind in the stagewise codebase.