From ios-craft
Build a SwiftUI design system from scratch. Use when setting up colors, typography, spacing tokens, and a component library. Can extract tokens from Figma or screenshots. Produces Swift files for design tokens and reusable components with dark mode, Dynamic Type, and accessibility built in.
npx claudepluginhub ildunari/kosta-plugins --plugin ios-craftThis skill uses the workspace's default tool permissions.
1. **Assess starting point** — Where are tokens coming from? Figma file (use Figma MCP)? Screenshot (use `visual-analyzer` skill)? Brand guidelines PDF? Or building from scratch with no existing design? This determines the first step.
Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.
Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.
Assess starting point — Where are tokens coming from? Figma file (use Figma MCP)? Screenshot (use visual-analyzer skill)? Brand guidelines PDF? Or building from scratch with no existing design? This determines the first step.
Color palette generation — If starting from scratch, pick a primary brand color and derive a full palette: primary, secondary, accent, plus neutral grays. Generate 5-9 shades per hue (50-900 scale). If extracting from source, identify the exact colors used.
Color tokens (adaptive light/dark) — Define semantic color tokens that map to the palette: background, surface, surfaceSecondary, textPrimary, textSecondary, textTertiary, border, divider, accent, success, warning, error, info. Each token has light and dark variants. See references/swiftui-color-tokens-patterns.md for implementation patterns.
Typography scale — Define a type scale with semantic names: largeTitle, title1, title2, title3, headline, body, callout, subheadline, footnote, caption1, caption2. Map to system fonts or custom fonts with specific sizes, weights, and line heights. Ensure Dynamic Type support with .font(.system(...)) or @ScaledMetric.
Spacing scale — Define a spacing scale based on a 4pt or 8pt grid: xxxs (2), xxs (4), xs (8), sm (12), md (16), lg (24), xl (32), xxl (48), xxxl (64). Implement as a Spacing enum with static properties.
Corner radii and shadows — Define corner radius tokens: small (4-6), medium (8-12), large (16-20), full (capsule). Define shadow tokens with semantic meaning: subtle, medium, elevated, floating. Each shadow has color, radius, x, y values for light and dark modes.
Component library — Build 5-8 starter components using the tokens. See references/component-library-starter.md for complete implementations. Every component must support: default/pressed/disabled states, dark mode, accessibility labels, Dynamic Type, and SwiftUI previews.
SF Symbols guide — Select appropriate SF Symbols for the component library. See references/sf-symbols-cheatsheet.md for top 50 symbols by category, rendering modes, and variable value usage.
Preview showcase — Create a DesignSystemShowcase view that displays all tokens and components in a scrollable catalog. This serves as living documentation.
Integration instructions — Provide clear guidance on: file organization (one file per concern or grouped?), how to import and use tokens in feature code, how to add new components following the same patterns, and how to keep tokens in sync with design tools.
references/swiftui-color-tokens-patterns.md — Adaptive color patterns with light/dark and high contrastreferences/sf-symbols-cheatsheet.md — Top 50 symbols, rendering modes, variable valuesreferences/component-library-starter.md — 8 complete components with states, dark mode, accessibilityvisual-analyzer skill — extract design tokens from screenshots or mockupsdesign-system-patterns — general design system architecture patterns