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
dribbble-ui-skills
ihlamury/design-skills
Dribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.
airbnb-ui-skills
ihlamury/design-skills
Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.
wds-docs
wix/skills
Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, or checking props and examples. Triggers on "what component", "how do I make", "WDS", "show me props", or component names like Button, Card, Modal, Box, Text.
figma-design-to-code
ecomfe/tempad-dev
>-
material-ui-theming
mui/material-ui
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.
responsive-design-system
patricio0312rev/skills
Implements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users request "responsive design", "mobile-first", "breakpoints", "fluid typography", or "adaptive layout".
shadcn
pedronauck/skills
Best practices for building UI components with shadcn/ui. Use when creating, customizing, or styling components with shadcn, working with Radix UI primitives, implementing design tokens, or following compound component patterns.
figma-ui-skills
ihlamury/design-skills
Figma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.
design-system
donchitos/claude-code-game-studios
Guided, section-by-section GDD authoring for a single game system. Gathers context from existing docs, walks through each required section collaboratively, cross-references dependencies, and writes incrementally to file.
vercel-ui-skills
ihlamury/design-skills
Vercel's UI design system. Use when building interfaces inspired by Vercel's aesthetic - light mode, Inter font, 4px grid.
ux-design-systems
hoodini/ai-agents-skills
Build consistent design systems with tokens, components, and theming. Use when creating component libraries, implementing design tokens, building theme systems, or ensuring design consistency. Triggers on design system, design tokens, component library, theming, dark mode.
import
subframeapp/subframe
Import an existing design system into Subframe. Discovers component files, stories, and CSS/Tailwind config, then uploads everything to Subframe for processing. This feature is only available for certain teams.
032-architecture-adr-non-functional-requirements
jabrena/plinth
Facilitates conversational discovery to create Architectural Decision Records (ADRs) for non-functional requirements using the ISO/IEC 25010:2023 quality model. Use when the user wants to document quality attributes, NFR decisions, security/performance/scalability architecture, or design systems with measurable quality criteria. This should trigger for requests such as Create ADR for Non-functional requirements; Document Non-functional requirements; Capture Non-functional requirements; Generate Non-functional requirements in an ADR; Create ADR for performance scalability or security requirements. Part of Plinth Toolkit
design-system-generator
onewave-ai/claude-skills
Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
qt-figma-token-extraction
theqtcompanyrnd/agent-skills
>
stripe-ui-skills
ihlamury/design-skills
Stripe's UI design system. Use when building interfaces inspired by Stripe's aesthetic - light mode, Inter font, 4px grid.
qt-figma-component-generation
theqtcompanyrnd/agent-skills
>
design-to-component-translator
patricio0312rev/skills
Converts Figma/design specifications into production-ready UI components with accurate spacing, typography, color tokens, responsive rules, and interaction states (hover, focus, disabled, active). Generates Tailwind/shadcn code with design system tokens mapping. Use when translating "Figma to code", "design specs to components", or "implement design system".
mobbin-ui-skills
ihlamury/design-skills
Mobbin's UI design system. Use when building interfaces inspired by Mobbin's aesthetic - light mode, Inter font, 4px grid.
design-system-creator
curiositech/some_claude_skills
Builds comprehensive design systems and design bibles with production-ready CSS. Expert in design tokens, component libraries, CSS architecture. Use for design system creation, token architecture,
Design System Architect
daffy0208/ai-dev-standards
Build scalable, maintainable design systems that unify product experiences. Use when creating component libraries, design tokens, or establishing design standards. Covers atomic design, Storybook, theming, and design system governance.
system-design
qodex-ai/ai-agent-skills
Design and architect software systems. Plans system components, interactions, and deployment patterns for scalability and maintainability.
webflow-ui-skills
ihlamury/design-skills
Webflow's UI design system. Use when building interfaces inspired by Webflow's aesthetic - dark mode, Inter font, 4px grid.
supabase-ui-skills
ihlamury/design-skills
Supabase's UI design system. Use when building interfaces inspired by Supabase's aesthetic - dark mode, Inter font, 4px grid.
openai-ui-skills
ihlamury/design-skills
OpenAI's UI design system. Use when building interfaces inspired by OpenAI's aesthetic - light mode, Inter font, 4px grid.
beehiiv-ui-skills
ihlamury/design-skills
Beehiiv's UI design system. Use when building interfaces inspired by Beehiiv's aesthetic - light mode, Inter font, 4px grid.
sgds-workflow
govtechsg/sgds-web-component
ALWAYS use this skill when building UI with @govtechsg/sgds-web-component or when a user mentions SGDS or Singapore Design System — even if they don't explicitly ask for help. This is the mandatory entry point for all SGDS development: it guides you to the right skill for setup, components, utilities, forms, theming, page layouts, block templates, and data visualisation. Read this before writing any SGDS application code.
sgds-getting-started
govtechsg/sgds-web-component
Starting point for any new application built with the SGDS web component library. Apply this skill first whenever a user is bootstrapping a new SGDS project, setting up a new app, or asking where to begin with SGDS. Covers font setup, foundation CSS, utilities, components, and app layout in the correct order.
design-system
rampstackco/claude-skills
Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.
readwise-ui-skills
ihlamury/design-skills
Readwise's UI design system. Use when building interfaces inspired by Readwise's aesthetic - light mode, Inter font, 4px grid.
segment-ui-skills
ihlamury/design-skills
Segment's UI design system. Use when building interfaces inspired by Segment's aesthetic - light mode, Inter font, 4px grid.
ashby-ui-skills
ihlamury/design-skills
Ashby's UI design system. Use when building interfaces inspired by Ashby's aesthetic - dark mode, Inter font, 4px grid.
21st-registry
21st-dev/registry
Publish a React component to the user's team library on 21st.dev so teammates can install it with a single command, or install an existing one. Triggers when the user says things like "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент", "share with team", "make this reusable", "install our Button", "use the team button".
design-tokens
dylanfeltus/skills
Generate type scales, color palettes, spacing systems, WCAG contrast checks, and dark mode derivations with math. Use when setting up a design system, creating tokens, or building a Tailwind/CSS theme. Outputs CSS custom properties, Tailwind config, or JSON tokens.
aesthetic-analysis
qodex-ai/ai-agent-skills
Analyze and extract design patterns from visual examples. Deconstructs design systems, color palettes, typography, and layout principles from reference materials.
apply-aesthetic
plugin87/ux-ui-agent-skills
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
generic-react-design-system
travisjneuman/.claude
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
Design Systems
cuellarfr/design-skills
Build, document, and maintain design systems with design tokens, component specifications, pattern libraries, naming conventions, and governance processes. Conduct system audits, define component hierarchies, and establish shared design languages.
engineering-system-designer
peterhdd/agent-skills
Design distributed systems, define architecture for scalability and reliability, or create system design documents. Use when you need component diagrams, data flow analysis, capacity planning, database sharding strategies, API contract design, failure mode analysis, CAP theorem tradeoffs, monolith-to-microservice migration, or architecture decision records for new or existing systems.
shadcn
sickn33/agentic-awesome-skills
Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
component-library
shipshitdev/skills
Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components for monorepo projects. Use when creating or refactoring UI components, reviewing component architecture, or setting up shared component patterns in a monorepo.
design-tokens
plugin87/ux-ui-agent-skills
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
sgds-writing
govtechsg/sgds-web-component
Writing style guide for the Singapore Government Design System (SGDS). Use when writing or reviewing UI copy, documentation, labels, error messages, tooltips, or any content that accompanies SGDS components. Covers tone, grammar, spelling, casing, punctuation, and plain language principles.
design-system-generator
curiositech/some_claude_skills
Design system generator that matches natural language descriptions to design trends. Expert in Swiss Modern, Neobrutalism, Glassmorphism, and 20+ other design trends. Includes trend matching
generic-static-design-system
travisjneuman/.claude
Complete design system reference for static HTML/CSS/JS sites. Covers colors, typography, component patterns, animations, and accessibility. Use when implementing UI, choosing colors, or ensuring brand consistency.
tailwind
oakoss/agent-skills
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
agentic-design-systems
thedesignproject/agent-skills
Use when designing, scaffolding, extending, or auditing a component library whose primary consumer is an AI agent — i.e. the design system needs machine-readable metadata (props, variants, relationships, tokens, anti-patterns) rather than only prose docs. Triggers include "agentic design system", "design system for AI/Claude", "make my design system AI-readable", "component metadata schema", "scaffold a UI library for an agent", or planning a new component library where the main consumer is an LLM. Don't use this skill for purely human-facing design system work — use figma:figma-generate-library for that.
webflow-mcp:figma-to-webflow
webflow/webflow-skills
>-
figma
membranedev/application-skills
|
audit-design-system
edenspiekermann/skills
Audit a Figma screen or component for design-system integration drift, including missing shared components, local overrides, and unbound tokens.
migrate-design-system
plugin87/ux-ui-agent-skills
Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.
figma-integration
plugin87/ux-ui-agent-skills
Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.
syncfusion-maui-theming
syncfusion/maui-ui-components-skills
Themes and styles Syncfusion .NET MAUI components. Use when working with SyncfusionThemeResourceDictionary, MaterialLight, MaterialDark, CupertinoLight, CupertinoDark, visual themes, or theme switching. This skill covers theme customization, color overrides, theme keys, dark mode, light mode, and branding.
system-design
proyecto26/system-design-skills
This skill should be used when the user asks to "design a system", "design <a product>" (e.g. "design WhatsApp", "design a URL shortener", "design a news feed"), "high-level architecture for…", "how would you architect…", "system design interview", or wants to scope, diagram, and justify a backend/distributed-system design. It runs a reasoning loop — clarify, estimate, design, weigh trade-offs, stress-test, iterate — and routes to focused building-block skills. Use it whenever a request is an open-ended design problem, even if the user doesn't say "system design".
syncfusion-wpf-theming
syncfusion/wpf-ui-components-skills
Implement and customize themes for Syncfusion WPF controls using SfSkinManager. Apply built-in themes (Windows 11, Fluent, Material, Office 2019), create custom themes with Theme Studio, and control visual effects like reveal animations and acrylic backgrounds. Use this skill whenever user needs to theme WPF applications, apply Syncfusion themes, customize colors/fonts, or configure theme-based visual effects and accessibility features.
design-system
thelobbi/claude
Apply and manage the AI-powered design system with 50+ curated styles
apply-design-system
edenspiekermann/skills
Review an existing design and connect it to design system components.
tremor-design-system
fefogarcia/approved-skills
Build dashboards, analytics interfaces, and data-rich UIs using the Tremor design system (React + Tailwind CSS + Recharts). Use when the user asks to create dashboard components, KPI cards, charts, data tables, analytics pages, monitoring interfaces, or any data visualization UI that should use Tremor. Triggers include mentions of "Tremor", "tremor.so", "@tremor/react", requests for dashboard UIs with charts and tables, or when the user's project already uses Tremor components. Supports both Tremor Raw (copy-and-paste, tremor.so) and Tremor NPM (@tremor/react) versions. Do NOT use for general frontend work unrelated to dashboards or data visualization, or when the user explicitly requests a different component library.
generic-design-system
travisjneuman/.claude
Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.
generic-fullstack-design-system
travisjneuman/.claude
Complete 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.