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-design-system
marcelroozekrans/superpowers-extensions
Use when no design system exists yet — check for docs/design/MASTER.md first, run only if missing. Triggers on "set up the design system", "no design system yet", "establish UI conventions", "define our colors and typography", or "make it look like <product>" (Linear, Stripe, Notion, Apple, Cursor, Figma, …). Also triggers implicitly when ui-workflow ui-phase needs a contract but docs/design/MASTER.md is absent. Skip if docs/design/MASTER.md already exists — update it manually instead.
originkit
vellum-ai/originkit
>-
design-tokens
kentoshimizu/sw-agent-skills
Design token architecture workflow for semantic, scalable, implementation-ready token systems. Use when multiple screens or products need consistent color/type/spacing/motion decisions and token definitions before component implementation; do not use for backend data-model or deployment pipeline decisions.
figma-to-code
enpitech/ai-tools
Convert Figma designs to pixel-perfect, responsive code. Use when implementing UI sections from Figma files. Requires Figma MCP and Playwright MCP servers running. Handles breakpoints, design tokens, asset export, and visual verification.
figma-sync
artcom/agent-skills
Track drift between Figma designs and generated code with the figma-sync CLI — map components to Figma nodes, baseline design + code hashes, and report SYNC / DESIGN_CHANGED / CODE_CHANGED status. Use after generating or editing components from Figma, when the user asks whether code still matches the design, before regenerating a component, or to set up a design-drift gate in CI.
igniteui-react-customize-theme
igniteui/igniteui-react
This skill customizes Ignite UI for React component styling using CSS custom properties 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
amicro-design-system
subhan-code/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.
component-library
manastalukdar/ai-devstudio
Scaffold component library structure with Storybook and documentation
pixso-component-config
pixsoltd/pixso-ai-integration
Generate or update Pixso Design-to-Code component parser JSON (`componentParsers` / component config) from the current Pixso desktop file, `get_all_components` output, a local component library, or an open source component library. Use when the user asks to create, extract, draft, validate, or update component parser config JSON. Always confirm the target code resource first, fetch current Pixso component facts through Pixso MCP, inspect representative node DSL before complex mappings, and never generate mappings from cached data, stale output, or guesses.
semver-design-tokens
thrillmade/agent-skills
|
figma-to-code
linkencong/kw-skills
Extract live Figma design data through a local plugin + bridge, discover stable plugin capabilities from the registry, produce node/selection/page/bundle artifacts, and translate Figma designs into production frontend code. Use this skill whenever the user mentions Figma URLs, node IDs, page extraction, pixel-perfect restoration, screenshot baselines, bundle extraction, visual diffing, or translating Figma designs into frontend components.
figma-code-connect
synerise/synerise-design
Generate a Figma Code Connect file (*.figma.tsx) for a design system component
figma-token-bridge
bureaulabs/figma-token-bridge
Reconcile design tokens between a codebase and Figma variables using a committed lockfile and a reviewable, re-runnable plan. Detects true conflicts via three-way merge against the last agreed state, rather than blindly overwriting one side. Invoke with /figma-token-bridge.
idempiere-zk
comitsrl/comitsrl-skills
Disenar y construir UI en iDempiere usando ZK (ZUL/MVVM) y personalizaciones de tema (CSS/imagenes) empaquetadas en plugins OSGi. Usar cuando haya que crear/modificar pantallas ZK, formularios/componentes, o diferenciar Stage vs Produccion con un tema.
refactor-ui-components
ahmedbenaw/refactor-chain
Use this skill when a web UI is full of hand-rolled, bespoke primitives (custom <button> markup, div-based dropdowns, ad-hoc modals, homemade inputs/tabs/dialogs) and the user wants to \"adopt shadcn/ui\", \"use a real component library\", \"replace our custom components with a registry\", \"stop reinventing buttons\", or \"standardize our UI components\". It swaps bespoke primitives for registry components (shadcn/ui first), wires their theme to the project's design tokens, and keeps behavior identical. This is a do-the-work step of the UI lane in the refactor-chain pipeline; it runs after refactor-ui-tokens (and after the visual/mobile pass) and before refactor-ui-a11y. It may use the shadcn MCP when available. Presentation-and-structure refactor: same behavior, standardized components.
tokens
dragoon0x/optik
Generate a complete design token set. Covers color, typography, spacing, shadows, radii, and breakpoints. Exports as CSS custom properties, Tailwind config, SCSS variables, and W3C Design Tokens JSON.
figma
fandhe-ai/agent-reference-skills
>
chakraui-theming
jweck-software/chakra-agent-skills
Customize Chakra UI v3 theme, tokens, and design system. Use when the user wants to customize the theme, create design tokens, semantic tokens, component recipes, slot recipes, or modify colors/spacing/typography at the theme level. Triggers for "customize theme", "change colors", "create design tokens", "override component styles", "add brand colors", "define custom components", or when working with createSystem, defineConfig, or theme configuration files.
figma
g1joshi/agent-skills
Figma collaborative design tool. Use for UI/UX design.
figma-library
thepreakerebi/figma-local
|
twake-react-conventions
linagora/twake-guidelines
Use when writing, reviewing, or refactoring React components in Twake/Cozy frontend projects. Enforces functional components, React.memo usage, event handler naming, no inline styles, and twake-mui first with cozy-ui as fallback (never raw Material-UI).
design-tokens
itamarzand88/design-skills
Extract code-ready design tokens from a DESIGN.md file. Converts design system documentation into CSS custom properties, Tailwind CSS config, styled-components theme objects, CSS-in-JS themes, or W3C Design Tokens JSON. Use when the user wants to turn a design system into usable code tokens, generate a Tailwind config from a brand's design, create CSS variables from a DESIGN.md, bootstrap a theme file for their framework, or extract a color palette, typography scale, or spacing system as code. Also trigger when the user wants to "use Stripe's colors in my project" or "set up a theme based on Linear".
radix-ui
aehrc/pathling
Expert guidance for building React UIs with Radix Themes and Radix Primitives. Use when creating accessible, customisable UI components, setting up theming systems, working with pre-styled Radix Themes components, or building custom components on top of unstyled Radix Primitives. Trigger keywords include "radix", "radix ui", "radix themes", "radix primitives", "accessible components", "Dialog", "Dropdown", "Select", "Accordion", "Tabs", "Tooltip".
figma.connect-best-practices
coinbase/cds
Guidelines for writing Figma Code Connect property mappings. Use this skill when working on Figma Code Connect files, which typically end in .figma.tsx.
figma.audit-connect
coinbase/cds
Examines a Figma Code Connect mapping file and provides a report on the mapping's accuracy and completeness
figma-css
thepreakerebi/figma-local
|
bright-green-tech-system-webgl
devinilabs/pro-skill
Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.
tailwindcss
wgstecnologia/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.
linear-design-system
arvindrk/deep-research-agents
Maintain, extend, and improve the Linear design system. Add new UI components, modify design tokens, validate consistency, and ensure all components follow Linear's design principles and aesthetic guidelines. Use when adding components, updating tokens, validating design system usage, or migrating components to the design system.
forge-export-json
dragoon0x/forge
Export your design system as W3C Design Tokens JSON format. Compatible with Style Dictionary, Figma Tokens, and token management tools.
component-library
davekrugman/react-components-for-claude-code
Use when looking for UI components, exploring component inspiration, or adding new libraries to the registry. Invoke with /components.
component-library
thomasmartinoa/ai_shop_assistance
Manage shadcn/ui components and create missing UI components for the Shopkeeper AI. Use when user asks to add components, fix UI, create new components, install shadcn components, or manage the design system. Also use when user says "component", "UI", "shadcn", "design system", "button", "dialog", "modal", "toast", "table", "form".
library
atopile/atopile
How the Faebryk component library is structured, how `_F.py` is generated, and the conventions/invariants for adding new library modules. Use when adding or modifying library components, traits, or module definitions.
design-tokens
sukirman1901/frontend-expert
>-
design-tokens
tmddesign/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".
figma-to-code
ajaywadhara/agent-skills
Convert Figma designs into production UI code. Accepts Figma JSON exports, screenshots, or dev-mode snippets. Detects the project's existing frontend framework, design system, and component patterns — generates code that matches. Use when the user wants to build UI from Figma, convert Figma to code, implement a Figma design, or mentions "figma pack".
figma-code-extractor
ashwath99/website-builder-skills
Converts finalized Figma frames into production HTML/CSS/JS through a 4-phase pipeline: inspect, plan, generate, self-review. Handles spec extraction, asset export, variable-first token mapping, and Code Connect integration. Use when generating code from Figma designs (Mode B).
figma-ai-coding
trevorgrogers/ux-designer-skills
Figma to code with AI - MCP server workflow, vibe coding, Code Connect, file preparation, design tokens, and plugin ecosystem. Use when going from Figma designs to production code with Claude Code, Cursor, or other AI coding tools.
figma-mcp-pro
truongnat/simple-skills
>+
figma-code-connect-components
oalanicolas/open-design
|
figma-bridge
shawnbaek/indie-native-app
>-
neobr-ui-theming
nami2111/neobr-ui
Install, configure, and theme NeoBr-UI in Svelte apps. Use this whenever the user asks to set up @neobr/svelte, fix missing NeoBr-UI styles, configure Tailwind CSS v4 for NeoBr-UI, customize Neo-Brutalist colors, radius, shadows, dark mode tokens, fonts, or migrate styling from older NeoBr-UI versions.
ui-theme
sammons/agentic-collab
The Greenroom design system — palette, typography, composition rules, component patterns, and anti-patterns extracted from the v3 dashboard work. Apply when building or implementing any UI in this codebase.
ui-contrast-review
synter-media-ai/free-skills
Reviewing UI for light/dark contrast, readability, focus states, color-token drift, theme regressions.
theme-factory
drolu/agent-skills
Step-by-step guide to add a new UI theme to AiderDesk (SCSS + CSS variables + types + i18n).
figma-to-code
marvinrichter/clarc
Figma-to-code workflow: extracting design tokens from Figma Variables, syncing tokens with Style Dictionary, reading Figma files via API, handoff conventions, and maintaining parity between design and implementation. For teams with a designer.
figma-code-connect-components
hanshou101/open-design
|
figma-code-connect-components
kvksatish/open-design
|
figma-implement-design
firecrawl/openai-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.
design-principles
majiayu000/claude-skill-registry
Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs Jony Ive-level precision - clean, modern, minimalist with taste. Every pixel matters.
figma
darkroomengineering/cc-settings
Figma MCP (structured data) + pinchtab (screenshots) for design-to-code, fidelity checks, token extraction. Triggers "compare to design", "match the figma", "extract tokens from figma", "inspect in figma".
tailwind
inugamidev/ultrathink-oss
Tailwind CSS v3 + v4 — utilities, custom configuration, design tokens, @theme directive, CSS-first config, native cascade layers, Lightning CSS engine, responsive design, plugin authoring, and component patterns. Absorbs tailwindcss, tailwind-v4.
mint-css
groww-oss/webster
Complete Mint CSS design system with grid, typography, colors, utilities, and theming. Use for building consistent, responsive, and accessible web applications with a complete CSS framework.
forge-export-css
dragoon0x/forge
Export your complete design system as CSS custom properties. Includes palette, tokens, type scale, spacing, shadows, and radii in a single :root block.
design-audit
snqb/my-skills
Detect and fix design system leaks — default shadcn/bootstrap/MUI styling breaking through your brand. Use when: UI feels 'template-y', 'looks like shadcn', 'too generic', buttons are inconsistent colors, cards look default, or after shipping many features fast. Also: 'audit my design', 'check consistency', 'brand leak', 'fix the defaults'.
component-library
ashwath99/website-builder-skills
Defines every reusable UI component for marketing website construction including hero variants, feature components, social proof, CTA, content, people/profile, timeline, navigation/index, form, and media components. Specifies content slots, configuration variants, and responsive behavior for each component. Use when mapping brief content to components, selecting component variants, or understanding component composition rules.
component-library
winbda/claude-skills-collection
|
component-library
norfolk-group/hbg-screens
Reusable UI component library reference. Use when building new pages, adding UI elements, or checking which components to use.
component-library
ayyankhan101/premium-ui-skills
Build scalable component libraries with consistent APIs, design tokens, and composition patterns. This skill covers component architecture, prop design, compound components, render props, slots, variant systems, and documentation. Use it whenever the user mentions component library, design system, UI kit, component architecture, component API, or building reusable components. Trigger even when the user doesn't say 'component library' but describes system-level needs: 'build a button that works everywhere', 'create a consistent set of form components', 'make components composable'. Also when discussing component variants, compound components, or component documentation.
component-library-mastery
plugin87/full-stack-design-skills
Build and maintain production component libraries with Storybook. Use this skill for component documentation, Storybook setup and configuration, component publishing, versioning strategies, component distribution via npm, component API documentation, and library maintenance.