design▌

CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns. \n \n Migrates configuration from tailwind.config.ts to CSS @theme blocks with native CSS variables, OKLCH color spaces, and @custom-variant for dark mode \n Provides production-ready component patterns including CVA-based variants, compound components, form controls, grids, and animations using native @keyframes and @starting-style \n Includes design token hierarchy (brand → semantic → component)

Native iOS interface design aligned with Apple's Human Interface Guidelines and platform conventions. \n \n Covers eight core design areas: layout and safe areas, typography with Dynamic Type, semantic colors and Dark Mode, native navigation patterns, system controls, accessibility (VoiceOver, contrast, touch targets), SF Symbols, and standard gestures with haptic feedback \n Includes scoring framework (0-10) for auditing iOS interface adherence, common mistakes table, and quick diagnostic check

Skills for implementing Apple's modern design systems across platforms.

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

This skill provides a curated knowledge base of 60+ UI component patterns sourced from component.gallery and enriched with best practices, layout guidance, and usage rules. It replaces generic guessing with real design-system knowledge when generating interfaces.

Design effective logos with AI image generation via inference.sh CLI.

Professional font and color themes for styling presentation decks, documents, and web artifacts. \n \n Includes 10 pre-set themes (Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden, Midnight Galaxy) each with cohesive color palettes and complementary font pairings \n Supports custom theme generation on-the-fly when none of the preset themes fit your needs \n Applies themes consistently across artifacts by r

High-converting email templates with layout patterns, subject line formulas, and mobile-first design rules. \n \n Covers five email types: welcome sequences, promotional campaigns, product updates, transactional receipts, and newsletters with specific templates and timing for each \n Enforces 600px max width, single-column layouts, 14-16px body text, and 44-50px CTA buttons optimized for 60%+ mobile opens \n Includes subject line formulas (numbered benefits, questions, personalization) capped at

Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs.

Multi-component React artifacts for Claude with bundling, state management, and shadcn/ui component library. \n \n Scaffolds React 18 + TypeScript projects with Vite, Tailwind CSS, and 40+ pre-installed shadcn/ui components via automated initialization script \n Bundles complete artifacts into single self-contained HTML files with inlined assets, ready for Claude artifact display \n Includes design guidance to avoid common \"AI slop\" patterns like excessive centering, purple gradients, and unif