250 free skills · page 3 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.
3 / 5page
figma-code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via use_figma, use figma-use.Design Systems334
dribbble-ui-skillsihlamury/design-skillsDribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.Design Systems333airbnb-ui-skillsihlamury/design-skillsAirbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.Design Systems327
wds-docswix/skillsWix 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.Design Systems322
figma-design-to-codeecomfe/tempad-devUse this skill to turn TemPad Dev design evidence into project-consistent UI code.Design Systems315
material-ui-themingmui/material-uiGuides 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.Design Systems311
responsive-design-systempatricio0312rev/skillsImplements 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".Design Systems302
shadcnpedronauck/skillsBest 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.Design Systems302figma-ui-skillsihlamury/design-skillsFigma's UI design system. Use when building interfaces inspired by Figma's aesthetic - light mode, Inter font, 4px grid.Design Systems292
design-systemdonchitos/claude-code-game-studiosGuided, 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.Design Systems291vercel-ui-skillsihlamury/design-skillsVercel's UI design system. Use when building interfaces inspired by Vercel's aesthetic - light mode, Inter font, 4px grid.Design Systems285
ux-design-systemshoodini/ai-agents-skillsBuild 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.Design Systems258
importsubframeapp/subframeImport 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.Design Systems249
032-architecture-adr-non-functional-requirementsjabrena/plinthFacilitates 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 ToolkitDesign Systems245
design-system-generatoronewave-ai/claude-skillsCreate design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.Design Systems243stripe-ui-skillsihlamury/design-skillsStripe's UI design system. Use when building interfaces inspired by Stripe's aesthetic - light mode, Inter font, 4px grid.Design Systems228
qt-figma-token-extractiontheqtcompanyrnd/agent-skillsThis skill extracts design tokens from a Figma file, maps them to QML types, and generates a ready-to-use QML design system with a unified Theme singleton.Design Systems228qt-figma-component-generationtheqtcompanyrnd/agent-skillsThis skill reads component definitions from a Figma file via MCP and generates production-ready QML control files that consume the design-system singletons produced by the token-extraction skill.Design Systems226design-to-component-translatorpatricio0312rev/skillsConverts 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".Design Systems225mobbin-ui-skillsihlamury/design-skillsMobbin's UI design system. Use when building interfaces inspired by Mobbin's aesthetic - light mode, Inter font, 4px grid.Design Systems219
design-system-creatorcuriositech/some_claude_skillsBuilds 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 Systems217
Design System Architectdaffy0208/ai-dev-standardsBuild 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.Design Systems208
system-designqodex-ai/ai-agent-skillsDesign and architect software systems. Plans system components, interactions, and deployment patterns for scalability and maintainability.Design Systems204webflow-ui-skillsihlamury/design-skillsWebflow's UI design system. Use when building interfaces inspired by Webflow's aesthetic - dark mode, Inter font, 4px grid.Design Systems201supabase-ui-skillsihlamury/design-skillsSupabase's UI design system. Use when building interfaces inspired by Supabase's aesthetic - dark mode, Inter font, 4px grid.Design Systems200openai-ui-skillsihlamury/design-skillsOpenAI's UI design system. Use when building interfaces inspired by OpenAI's aesthetic - light mode, Inter font, 4px grid.Design Systems199beehiiv-ui-skillsihlamury/design-skillsBeehiiv's UI design system. Use when building interfaces inspired by Beehiiv's aesthetic - light mode, Inter font, 4px grid.Design Systems198
sgds-getting-startedgovtechsg/sgds-web-componentStarting 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 Systems195sgds-workflowgovtechsg/sgds-web-componentALWAYS 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.Design Systems195
design-systemrampstackco/claude-skillsBuild 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.Design Systems191readwise-ui-skillsihlamury/design-skillsReadwise's UI design system. Use when building interfaces inspired by Readwise's aesthetic - light mode, Inter font, 4px grid.Design Systems190segment-ui-skillsihlamury/design-skillsSegment's UI design system. Use when building interfaces inspired by Segment's aesthetic - light mode, Inter font, 4px grid.Design Systems189ashby-ui-skillsihlamury/design-skillsAshby's UI design system. Use when building interfaces inspired by Ashby's aesthetic - dark mode, Inter font, 4px grid.Design Systems188
21st-registry21st-dev/registryPublish 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 Systems186
design-tokensdylanfeltus/skillsGenerate 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.Design Systems185aesthetic-analysisqodex-ai/ai-agent-skillsAnalyze and extract design patterns from visual examples. Deconstructs design systems, color palettes, typography, and layout principles from reference materials.Design Systems180
apply-aestheticplugin87/ux-ui-agent-skillsApply 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.Design Systems178
generic-react-design-systemtravisjneuman/.claudeComplete 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 Systems175
Design Systemscuellarfr/design-skillsBuild, 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.Design Systems172
engineering-system-designerpeterhdd/agent-skillsDesign 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.Design Systems171
shadcnsickn33/agentic-awesome-skillsManages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.Design Systems166design-tokensplugin87/ux-ui-agent-skillsGenerate, 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.Design Systems159
component-libraryshipshitdev/skillsExpert 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 Systems159sgds-writinggovtechsg/sgds-web-componentWriting 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 Systems158design-system-generatorcuriositech/some_claude_skillsDesign system generator that matches natural language descriptions to design trends. Expert in Swiss Modern, Neobrutalism, Glassmorphism, and 20+ other design trends. Includes trend matchingDesign Systems157generic-static-design-systemtravisjneuman/.claudeComplete 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.Design Systems155
tailwindoakoss/agent-skillsTailwind 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.Design Systems153
agentic-design-systemsthedesignproject/agent-skillsUse 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.Design Systems150
webflow-mcp:figma-to-webflowwebflow/webflow-skillsTranslate a Figma design into a live Webflow project: real elements, styles, assets, fonts, and (optionally) custom code + interactions.Design Systems148
figmamembranedev/application-skillsFigma is a web-based collaborative design tool used for creating user interfaces, prototypes, and vector graphics. It's primarily used by UI/UX designers, web developers, and product managers to design and iterate on digital products.Design Systems147
audit-design-systemedenspiekermann/skillsAudit a Figma screen or component for design-system integration drift, including missing shared components, local overrides, and unbound tokens.Design Systems147migrate-design-systemplugin87/ux-ui-agent-skillsMap 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.Design Systems146figma-integrationplugin87/ux-ui-agent-skillsKeep 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.Design Systems141
syncfusion-maui-themingsyncfusion/maui-ui-components-skillsThemes 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.Design Systems139
system-designproyecto26/system-design-skillsThis 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".Design Systems136
design-systemthelobbi/claudeApply and manage the AI-powered design system with 50+ curated stylesDesign Systems135syncfusion-wpf-themingsyncfusion/wpf-ui-components-skillsImplement 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 Systems135apply-design-systemedenspiekermann/skillsReview an existing design and connect it to design system components.Design Systems133
tremor-design-systemfefogarcia/approved-skillsBuild 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.Design Systems132generic-design-systemtravisjneuman/.claudeComplete 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.Design Systems130Other tasks
same rules, different job
