Design Systems

Use the design-system skill to generate or audit a UI system, extract tokens from existing code, and review styling consistency in real repos.

Use the shadcn skill to inspect project context, run the right CLI commands, install components, and compose UI with documented patterns for base vs radix, forms, theming, and registries.

design-consultation is a design-consultation skill for turning a rough product idea into a complete design direction. It creates a DESIGN.md source of truth, previews, and system-level guidance for typography, color, spacing, layout, and motion. Best for new products and UI surfaces that need a coherent starting point.

ui-ux-pro-max is a comprehensive skill for AI-assisted UI/UX design. It offers structured guidance on layouts, styles, color systems, typography, and UX rules for web and mobile projects. Ideal for developers and teams needing practical design decisions across React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, and HTML/CSS. Use it to plan, review, and improve UI with curated design intelligence.

ckm:design-system helps you build three-layer tokens, component specs, CSS variables, Tailwind mappings, and brand-consistent slide assets from a clear token architecture.

ckm:design is a structured design skill for routing and producing logos, CIP mockups, banners, slides, and SVG icons. It includes practical references, CSV-backed options, and Python scripts for repeatable design workflows instead of generic prompt-only output.

ckm:brand is a branding workflow skill for creating, updating, and reviewing brand guidelines, messaging, voice, visual identity, and design-token sync with practical scripts and checklists.

design-system-patterns helps teams design scalable UI foundations with token structure, theming architecture, and reusable component API patterns for design systems and component libraries.

visual-design-foundations helps teams build practical UI systems with typography scales, color tokens, spacing rules, and iconography guidance. Use it to install a solid design foundation, create style guides, audit hierarchy, and produce implementation-ready CSS variables from clear design constraints.

The web-component-design skill helps teams design reusable UI components for React, Vue, and Svelte with strong API patterns, accessibility guidance, and styling tradeoff references for design systems.

Use the tailwind-design-system skill to build Tailwind CSS v4 design systems with tokens, theming, variants, accessibility, and v3-to-v4 migration guidance.

polish is a final-pass UI review skill for catching alignment, spacing, consistency, token usage, and micro-detail issues before shipping. It is best for screens, flows, or components that already work but feel close, not quite polished. Use it to improve launch readiness, design-system alignment, and overall quality without unnecessary redesign.

figma-create-design-system-rules helps you generate project-specific Design System rules for Figma-to-code work. Use it to capture conventions for components, naming, tokens, file locations, and what not to hardcode so AI coding agents stay consistent across your repo. Requires a Figma MCP server connection.

site-architecture helps plan or restructure website page hierarchy, navigation, URL patterns, and internal linking. Use it to create sitemaps, nav specs, URL maps, and Mermaid or ASCII site diagrams for marketing and UI/UX planning.

The normalize skill audits a UI feature and realigns it to your design system. Learn normalize install options, required frontend-design prep, and practical usage for pages, routes, and components.

The extract skill helps teams find repeated UI patterns, tokens, and components, then plan or perform consolidation into an existing design system with a safer migration path.

The normalize skill audits a UI feature and realigns it with your design system. Learn normalize install context, required /frontend-design prep, and practical usage for pages, routes, and components.

The extract skill helps teams find repeated UI patterns, tokens, and components, then consolidate them into an existing design system with a safer migration plan.

The design-md skill analyzes Stitch projects and turns their screens into a semantic DESIGN.md source of truth for consistent layout, tone, color, and component language. Use design-md for Design Systems when you need promptable guidance for future Stitch generation, not just a visual summary.

Use the wpds skill to build or review WordPress UI with the WordPress Design System (WPDS). It helps you verify components, tokens, patterns, and package fit using the WPDS MCP server, so your wpds guide stays grounded in canonical docs instead of guesswork. Ideal for wpds for Design Systems work across Gutenberg, WooCommerce, WordPress.com, Jetpack, and related interfaces.

figma-use is the skill to install before every use_figma call so JavaScript runs safely in a Figma file context. It supports design implementation work like creating and editing nodes, wiring variables and styles, building components and variants, and inspecting file structure programmatically. The repo includes usage guidance, gotchas, and patterns to reduce common Figma automation errors.

mui is a focused guide for Material UI v7 in React, covering sx styling, theme customization, responsive layouts, and key v7 migration changes. Use it to install the skill, follow the core files, and generate MUI components with current @mui/material patterns.

makepad-2.0-theme is a Makepad 2.0 theme skill for applying theme.* variables, switching dark and light themes, and keeping design-token styling consistent. Use this guide to understand makepad-2.0-theme install and makepad-2.0-theme usage for production UI and design systems.

figma-generate-library helps you build or update a Figma design system from a codebase with an ordered workflow for tokens, component libraries, documentation, and light/dark theming. Use the figma-generate-library skill when you need a practical guide for Design Systems, not a one-off mockup. It complements figma-use for Plugin API calls.