phase-5-design-system_skill

Overview

This skill builds platform-independent design systems and reusable component libraries that work across web, mobile, and native platforms. It focuses on design tokens, core and composite components, and theme wiring so teams deliver consistent UI quickly. Use it to centralize visual rules and accelerate component-driven development.

How this skill works

The skill generates a component scaffold (base components, composites) and a token-first theme system that can be exported per platform. It inspects project needs, suggests required components, and produces CSS-variable themes, Style Dictionary token outputs, and example component implementations (React/shadcn, Flutter, iOS/Android). It also creates documentation stubs and a PDCA checklist to iterate on the system.

When to use it

• You need a reusable component library across multiple UI frameworks
• You want to centralize design tokens and export them to web/mobile
• Onboard new designers and developers with a single source of truth
• Preparing a project for scale or long-term maintenance
• Migrating inconsistent UI into a unified design system

Best practices

• Start with a small required component list (buttons, inputs, cards) and expand iteratively
• Define tokens first (color, spacing, typography) and generate platform outputs via Style Dictionary
• Keep core components framework-agnostic and provide thin platform adapters
• Document usage, variants, and Do/Don't guidance alongside code examples
• Use PDCA: plan tokens/components, implement, review consistency, then iterate

Example use cases

• Create a CSS-variable theme and shadcn/ui component set for a React/Next.js product
• Generate Flutter ThemeData and reusable widgets from centralized design tokens
• Produce platform token outputs (CSS, Dart, Swift, Kotlin) using Style Dictionary
• Extend a default button component with loading state and variant styles for a product
• Set up a component catalog and checklist for enterprise-level design governance