Skill UI

A two-layer skill combining disciplined coding practices with terse prose output. The THINK layer enforces surgical edits, simplicity, and goal-driven execution before writing code. The SPEAK layer compresses responses into 'caveman' style for token efficiency, removing filler words while preserving technical accuracy. Ideal for requests requiring brevity, token efficiency, or rigorous engineering discipline.

This skill guides the creation of production-ready design systems using Tailwind CSS. It covers advanced topics such as implementing design tokens, managing component variants, establishing responsive patterns, and ensuring high accessibility standards. Use this when building component libraries, applying theming, or standardizing UI patterns across a large codebase.

Master modern Tailwind CSS v4 development with CSS-first configuration, container queries, and design tokens. Learn responsive layouts, dark mode, and component extraction strategies for efficient frontend engineering.

This skill automatically routes subtasks to the most cost-effective Claude model (Haiku, Sonnet, or Opus) based on complexity. It logs real token usage and cost per session, and includes an A/B testing feature to validate model tier savings against your actual workload, ensuring accurate cost control.

This skill performs a quick automated lint scan to detect common design system violations in seconds. It checks for hardcoded colors, raw pixel values, old width/height syntax, physical properties, forbidden colors, missing data-slots, and improper className usage. Ideal for running after every file change to maintain design consistency and prevent technical debt in UI development projects using design tokens.

Scaffold new mobile pages/screens using StyleSeed layout patterns. Provides a template with PageShell, TopBar, and BottomNav components, enforces design tokens, spacing rules, and verifies against Golden Rules.

This skill generates composed UI patterns like card layouts, lists, forms, and grids using design system primitives. It helps developers assemble reusable interface sections efficiently without recreating basic elements. Suitable for building structured content areas within pages while adhering to established design tokens and layout rules for consistency.

This skill reviews UI code for design system compliance, accessibility standards, and best practices. It checks for hardcoded values, component conventions, mobile responsiveness, performance optimization, typography consistency, and visual coherence. It ensures code aligns with established design tokens and accessibility guidelines like WCAG.

This skill enables you to view, add, or modify design tokens within the StyleSeed design system. It manages core visual properties like colors, typography, spacing, radius, and shadows by synchronizing JSON source files with CSS implementations. Use it to maintain consistency across your UI components and ensure design system integrity during development.

This skill enables you to create interface designs, wireframes, and comprehensive design systems. It covers user research methodologies, accessibility standards like WCAG, and modern design tools such as Figma. The expert specializes in design tokenization, component libraries, and cross-platform consistency. Capabilities include usability testing, information architecture, visual design, interaction design, and design system governance. Ideal for building accessible, user-centered digital experiences across web, mobile, and desktop platforms.

Add distributed rate limiting to API routes, middleware, and edge functions with @upstash/ratelimit and Upstash Redis. Covers sliding window, fixed window, and token bucket algorithms, per-identifier keys, and returning 429 with Retry-After headers.

Manage environment variables and secrets safely so credentials never leak into Claude sessions, terminal output, logs, or git commits. Useful for configuring apps, CI pipelines, and shared repos while keeping API keys and tokens protected from accidental exposure.