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
ui-component-library
verivend/verivend-vue3-template
shadcn-vue component usage patterns, CLI-based installation, Tailwind integration, and accessibility best practices. Use when adding UI components, buttons, dialogs, or form elements.
components
alfredo1996/neoboard
Build UI using NeoBoard's existing component library. Use when creating pages, widgets, dashboards, or any user-facing UI. Reads Storybook stories to understand available components before writing new code.
gen-library
kelsi-andrewss/claude-multi-agent-pipeline
Generate a UI component library via Gemini. Creates reusable components with clean interfaces that ui-coder agents import instead of generating per-story. Use /gen-library before /ship for projects with UI work.
frontend
slantview/claude
UI/UX implementation specialist combining design systems, React/Vue/Angular development, responsive layouts, and accessibility. Integrates Figma designs with modern frontend frameworks. Use PROACTIVELY for user interface work, component development, or design implementation.
animated-component-libraries
shannonjlove/claudedesignskills
Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP.
state-management
kevfarid/noxen-skills
>
design-system
premmodhaofficial/motadata-ai-pipeline
Motadata React Library component catalog, props API, CVA variants, usage patterns, and import conventions. This is the primary reference for all frontend agents when generating UI code. Covers 40+ components built on Radix UI with Tailwind CSS (mdt- prefix) and Class Variance Authority. Use when any frontend agent needs to select, compose, or configure a UI component.
refine
nejcjelovcan/traceframe
Refine a Linear issue to make it implementation-ready. Use when the user wants to analyze, plan, and prepare a Linear issue for implementation.
moai-library-shadcn
gkswls5006-web/snake-game
>
design-tokens
gregorymm/design-tokens
Extract design tokens from Figma design system files (variables, styles, component properties) into W3C DTCG or CTI format. Generates tokens.json, tokens.css, tokens.scss, and Style Dictionary config. Supports write-back to push local token changes into Figma variables via REST API. Triggers on "extract tokens", "design tokens", "figma tokens", "token export", "export variables from figma", "write tokens back", "push tokens to figma", "sync tokens".
design-tokens
julianoczkowski/skills
Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".
design-tokens
sidelineprojects/designer-skills
Generate a design tokens file (CSS variables or Tailwind config) based on a chosen aesthetic philosophy, with light and dark mode palettes, spacing scale, type ramp, and component-level tokens. Use when starting a new project, establishing a visual system, setting up tokens, or mentions "tokens" or "design system".
design-tokens
levisek/claude.config
Use when editing CSS, SCSS, styled-components, Tailwind configs, or any styling code in a project that already has a design-token system — CSS custom properties, Tailwind theme extension, or exported token object. Enforces "no hardcoded colors, font-sizes, border-radius, z-index, spacing" — values must come from tokens. Do NOT use for third-party libraries consumed as-is, for initial token-scheme design (when you're writing the tokens themselves), or for one-off throwaway prototypes.
design-tokens-emit
zacharticulatev/designer-pro-and-seo
Convert a design system spec into code-deliverable token files — CSS variables, a Tailwind config fragment, SCSS variables, or Style-Dictionary JSON. Trigger when the user says "emit tokens", "tailwind config", "css variables", "style dictionary", "convert design system to code", or wants to bridge from spec to implementation.
product-design-tokens
mgiovani/cc-arsenal
>-
refresh-design-tokens
synerise/faststore.store
>
design-tokens-typography
eliranabu/schoolclaudeskills
>
design-token
launchapp-dev/animus-cli
Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance.
design-token-audit
launchapp-dev/animus-cli
Audit design token usage across a product for consistency and coverage.
figma-to-code
zane-tv/agent-skills
Use whenever the user pastes or references a figma.com / Figma design link or node and wants code to match it — whether that means building something new OR fixing/adjusting existing code to match the design. This includes small targeted edits like "fix the text color to match Figma", "make the spacing match the design", "adjust the font to match Figma", "this should look like Figma", as well as full builds like "code this design", "implement this section from Figma", "convert Figma to HTML/React/Vue", "build this Figma page". Also covers any request that compares existing code against a Figma design and corrects the difference (color, spacing, typography, layout, icons). Multiple Figma URLs in one prompt is a strong signal. The skill reads exact styles and design variables from the Figma MCP, downloads images/SVG icons, then verifies the result in the browser with Playwright and an objective pixel-diff loop until it matches. Triggers in any language, including Vietnamese ("sửa cho giống figma", "khớp với figma", "đúng như figma", "sửa màu/spacing/font theo figma"). Strongly prefer this skill over guessing styles from a screenshot — the Figma MCP returns authoritative measurements.
figma-to-code
hacho55/absolutelyskilled
>
figma-to-code
seoulmomenttech/seoul-moment-fe
피그마 설계를 분석하여 프로젝트의 Tailwind v4 기반 기술 스택 및 컨벤션에 맞춰 코드로 변환합니다. UI 컴포넌트 라이브러리(@seoul-moment/ui)를 우선적으로 활용합니다.
figma-to-code
07130918/claude
Figma MCPでデザインを取得しReact/Chakra UIへ変換するワークフロー。figma URLからデザインコンテキスト・画像・スクリーンショット・デザインシステム情報を取得し、既存コンポーネントへのマッピング、Chakra UI tokenへの変換、レスポンシブ対応を含む実装パターン。「Figma通りに実装」「デザイン通りに」という文脈で参照する。
figma-design-to-code
aibiz-automatyzacje/claude-code-starter
Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).
figma-design-to-code
hk-hub/agentskills
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
figma-code-connect-components
hosseinmirzapur/opencode-skills
|
figma-bridge
shawnbaek/ios-experts
>-
figma-mcp-0to1
davecelot/skilly-hand
Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns.
figma
oimiragieo/agent-studio
Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems.
figma-intake
moizk/code-skills
Use when a feature comes with a Figma design that needs to feed a planning or implementation pipeline — 'I have a Figma design', 'extract this Figma', 'pull the design from Figma', 'feed this Figma into the pipeline'. Distills the design into a self-contained design spec (screenshots, component list, tokens/variables, Code Connect mappings) so downstream planners consume the spec as the visual source of truth instead of a bare Figma URL. Must run where the Figma MCP is available (the main session), not inside a sub-agent. Not for generating designs INTO Figma (use figma-generate-design) or implementing Figma directly to production code.
gdex-ui-theming
gemachdao/gdex-skill
CSS theming system for GDEX trading UIs — dark/light modes, trading colors, responsive breakpoints, and Tailwind CSS configuration
material-ui-theming
mui/material-ui-docs
Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.
ui-theme
grvpanchal/elegant
Design-token systems — semantic CSS custom properties for colours, spacing, typography, and shadows, with light/dark theme switching via a `body.dark` class override. Use when setting up a token catalogue, auditing components for hardcoded colours/magic numbers, or adding dark-mode support via token swaps.
ui
ingloriouscoderz/forge-skills
Design system guidance for components, theming, and UI primitives with Inglorious UI.
ui-website
scottdurow/power-platform-full-stack-skills
Design guidance for React websites with CSS-based theming. Covers typography (Google Fonts), color palettes via CSS variables, motion/animation, accessibility (WCAG 2.1 AA), backgrounds, responsive layout, and aesthetic mood mapping. Use for public-facing and portal-style websites. For Fluent UI v9 business apps, use the `ui-fluentui-react` skill instead. Triggers on "website design", "website theming", "google fonts", "css variables", "design aesthetics", "website ui", "website styling", "react website", "css theming", "design system", "website accessibility", "web typography", "color palette", "css animation", "responsive layout", "dark mode", "light mode", "theme toggle", "useTheme", "theme tokens", "theme switching".
theming
robinhserrano/drxs-ai-expo-plugin
Design tokens and theming for Expo/React Native — ThemeProvider, StyleSheet-based tokens, and light/dark mode.
ui-color-palette-scale-palette
a-ng-d/skills-ui-color-palette
Build a full color palette from source colors. Uses get_palette to generate scales and themes, then previews the result visually. Use when the user wants to create a complete palette before auditing, exporting, or deploying it.
igniteui-react-customize-theme
georgianastasov/eye-of-mordor
This skill customizes Ignite UI for React component styling using CSS custom properties, Sass, and the full theming system and should be used when applying brand colors, dark mode, component-level overrides, or scoped themes in a React application
design-shiny-ui
pjt222/agent-almanac
>
daisy
taylorparsons/cortege-hackathon
Create or modify any UI/UX using Tailwind CSS and DaisyUI components and themes. Use when the request mentions Tailwind, DaisyUI, "create the UX", building UI screens/components, applying DaisyUI themes, or converting existing UI to Tailwind + DaisyUI in any web project (HTML, React, Next.js, etc.).
theme-factory
mits1088/ai-reels-studio
Apply consistent product-aligned color and typography themes to reels. Use when starting a new reel to set the visual palette, or when a reel's colors feel inconsistent. Provides pre-set themes for common AI products plus custom theme generation.
skeleton-component-library
dragoon0x/everything-design-taste
Common skeleton screen patterns for different component types.
component-slot-first
homjson/ui-slot-first-skill
Enforce slot-first implementation for UI code generated from design sources such as Figma MCP, MasterGo MCP, Lanhu, Jijing, screenshots, or design-to-code specs. Use when implementing Vue, React, or other frontend UI with component libraries such as Element Plus, Ant Design Vue, Naive UI, Vuetify, PrimeVue, Ant Design, MUI, Chakra UI, or similar. Prefer the library component's slots, props, render hooks, theme tokens, and documented APIs for headers, titles, footers, actions, prefixes, suffixes, empty states, cells, overlays, and toolbars before rebuilding those regions with custom HTML.
design-tokens-system
plugin87/full-stack-design-skills
Comprehensive design token architecture and system implementation. Use this skill for token definition and structure, token generation and transformation, design token distribution across platforms, Figma Variables, design token sync automation, and multi-platform token consumption (web, mobile, docs).
design-tokens
aboudjem/ui-ux-suite
Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, motion
figma-code-connect-components
aicae/opendesign
|
figma-to-code
igtm/figma-code-dl
Figma URL を渡されたら、(0) プロジェクトルートの FIGMA.md で解釈を把握 → (1) 既存コードを正にして data-name を突合 → (2) figma-code-dl CLI で TSX をローカルファイル化（token 削減）→ (3) 読み取って実装、までを 1 本で回す統合スキル。途中で新規 component が必要になれば cva で取り込み `.figma/instance-map.json` に追記する。「Figma URL を渡された」「この画面を React で実装」「Figma の component を取り込んで」「Switch を DS に追加」等で発火。重い MCP tool（get_design_context など）は CLI が 1 回叩くだけで、それ以外のフェーズは get_metadata / get_libraries / get_variable_defs などの軽量 tool しか使わない。**必須前提**：local Figma Dev Mode MCP server (`http://127.0.0.1:3845`) が起動していること。動いていなければこのスキルは使えない — cloud 版にはフォールバックせず、公式の figma MCP プラグインが使えるならそちらを直接使い、それも無ければ何もしない。
figma-code-connect-components
iacob-alexandru-andrei/open-design
|
figma-code-connect-components
xmheilong/open-design
|
ui-theme
higashi-kota/drawing-explorer
|
figma-code-connect
memi-design/design-skills
Route a Figma Code Connect request to Figma's current official workflow and documentation without reproducing upstream instructions. Use when mapping published Figma components to code implementations requires the official Figma MCP integration.
ui-android
rshzrh/ui-design-skills
Generate slop-free Android UI in Jetpack Compose + Material 3 Expressive (Android 14+ / API 34+). Use whenever the user asks to build, design, scaffold, restyle, or improve a screen, component, activity, fragment, or any Android interface in Compose. Two phases — theme tokens first (with approval gate), then UI — both gated by a self-audit checklist that the model MUST run before claiming done.
figma-implement-design
openai/plugins
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-create-design-system-rules
openai/plugins
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-code-connect
openai/plugins
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
figma-create-new-file
openai/plugins
**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)
figma-automation
rohitg00/buildwithclaude
Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
external-resource-context
shinpr/codex-workflows
Discovers, confirms, and records external resource access methods for project design and implementation work, including design sources, design systems, API schemas, database schemas, IaC sources, secret stores, environment config, and verification environments. Use when external resource context needs to be discovered or refreshed, recorded in docs/project-context/external-resources.md, or referenced from a Design Doc/UI Spec.
figma
su-record/vibe
Figma → 코드 본체 — tree 기반 구조적 코드 생성.
figma
edward-h26/onepromptclaudecode
Repo-local wrapper for the Figma plugin. Use for Figma file inspection, design implementation, diagrams, design systems, and Code Connect work.