Frontend & Design

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI. Manages the full component lifecycle: search registries, add components, view docs, preview changes with --dry-run and --diff , and intelligently merge upstream updates while preserving local modifications Enforces critical rules across forms (FieldGroup, Field, InputGroup, validation states), composition (Groups, overlays, Card structure), styling (semantic colors, gap spacing, size shorthand), and icons (data-icon attributes) Supports multiple registries (@shadcn, @magicui, @tailark, community presets) and provides component selection guidance via a reference table covering buttons, forms, overlays, navigation, charts, and layouts Injects project context automatically including aliases, framework, base library (radix vs base), icon library, Tailwind version, and resolved paths to ensure correct imports and APIs

AI-powered mobile app design tool with REST API for creating projects, describing designs in plain language, and rendering screens. Supports high-level requests ("design a fitness app") and specific edits ("add a pricing section to this screen"); send natural language descriptions via chat messages and let the AI decide what to create or modify Requires Pro+ plan and API key with scoped permissions ( projects:read/write , chats:read/write , screenshots , components:read ) Async and sync modes available; async returns immediately with a run ID for polling, sync blocks up to 300 seconds Always screenshot newly created or updated screens after each chat run and deliver them to the user; combine all project screens into one screenshot when screens are created for the first time One active run per project at a time; retry failed requests safely using idempotency keys

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules. Covers eight rule categories prioritized by impact: list performance (FlashList, memoization, callback stability), animations (GPU properties, derived values), navigation, UI patterns, state management, rendering, monorepo structure, and configuration List performance rules address critical concerns like virtualizing large lists, optimizing images, and avoiding inline objects that trigger unnecessary re-renders Animation guidance focuses on GPU-accelerated properties (transform, opacity) and Reanimated patterns; navigation recommends native stack and tab navigators over JavaScript alternatives Includes rules for modern UI patterns: expo-image for all images, Pressable over TouchableOpacity, native modals, and safe area handling in ScrollViews

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…

Extract design primitives from a public website and generate starter token files for your project.

Comprehensive Next.js development guidelines covering file structure, RSC patterns, data fetching, optimization, and error handling. Covers 15+ topic areas including file conventions, route segments, RSC boundaries, async patterns, metadata generation, and image/font optimization Provides runtime selection guidance, directive usage, and error handling strategies with specific file conventions like error.tsx and not-found.tsx Includes data fetching patterns, route handler best practices, bundling considerations, and hydration error debugging Addresses advanced patterns such as parallel routes, intercepting routes, Suspense boundaries, and self-hosting with Docker

Final quality pass catching alignment, spacing, consistency, and interaction details before shipping. Systematically reviews visual alignment, spacing, typography hierarchy, color contrast, and interaction states across all breakpoints and device types Identifies and fixes micro-interaction gaps, transition smoothness, edge cases, error states, and loading feedback to ensure polished user experience Requires frontend-design skill context and functional completeness before starting; includes checklist covering responsive design, accessibility, performance, and code cleanup Works best when triaged by quality bar (MVP vs flagship) and available time; emphasizes testing on real devices and fresh-eyes review before final sign-off

Evaluate design effectiveness across visual hierarchy, information architecture, emotional resonance, and user experience quality. Assesses interfaces against AI-generated design anti-patterns (color palettes, gradients, glassmorphism, generic layouts) to identify and eliminate "AI slop" tells Evaluates 10 core dimensions: visual hierarchy, information architecture, emotional resonance, discoverability, composition, typography, color strategy, state handling, microcopy, and affordance Requires frontend-design skill context and the Context Gathering Protocol; runs teach-impeccable if no design foundation exists Delivers structured critique reports with anti-pattern verdicts, priority issues ranked by impact, concrete fixes, and provocative questions to unlock better solutions

Strategic animation and micro-interaction enhancement for improved usability and delight. Guides systematic assessment of animation opportunities across feedback, transitions, entrance effects, and delight moments, with mandatory accessibility support for prefers-reduced-motion Provides timing recommendations (100–800ms by purpose), GPU-accelerated easing curves, and anti-patterns to avoid (bounce/elastic effects, layout property animations, animation fatigue) Covers implementation across CSS transitions, @keyframes, JavaScript Web Animations API, and Framer Motion, with performance optimization for 60fps on target devices Requires frontend-design skill context and performance constraints before proceeding; includes detailed patterns for buttons, forms, state changes, navigation, and delight moments

Rethink designs for different screens, devices, and contexts while maintaining consistency. Assess source and target contexts (device type, input method, screen size, connection speed, usage patterns) to identify what won't fit or work across platforms Apply context-specific strategies: single-column layouts and touch targets for mobile, two-column hybrid layouts for tablet, multi-column and hover states for desktop, narrow widths and inline CSS for email Use responsive techniques including CSS Grid/Flexbox, media queries, container queries, and clamp() for fluid sizing; increase touch targets to 44x44px minimum and remove hover dependencies on touch devices Test on real devices across orientations, browsers, and input methods rather than relying solely on browser emulation

Identify and improve unclear interface text to make products easier to understand and use. Assesses copy across error messages, form labels, buttons, help text, empty states, success messages, and confirmation dialogs to find jargon, ambiguity, passive voice, and missing context Requires frontend-design skill context and audience analysis before proceeding; gathers technical level and user mental state to inform improvements Applies core principles: be specific, concise, active, human, and helpful; prioritizes actionable guidance over vague explanations Verifies improvements against comprehension, actionability, brevity, consistency, and tone fit for the situation

Systematically identify and fix performance bottlenecks across loading, rendering, animations, and bundle size. Covers five optimization areas: image optimization, JavaScript/CSS reduction, font loading, rendering performance, and animation efficiency Includes Core Web Vitals guidance (LCP, FID/INP, CLS) with specific thresholds and remediation strategies Provides code examples for common patterns: lazy loading, code splitting, layout thrashing prevention, GPU-accelerated animations, and virtual scrolling Emphasizes measurement before and after optimization, testing on real devices with throttled connections, and avoiding premature optimization

Strategically introduce color to monochromatic designs while maintaining hierarchy, accessibility, and visual restraint. Requires running the frontend-design skill first to establish design context and gather existing brand colors Guides systematic color application across semantic states (success, error, warning, info), accents, backgrounds, data visualization, borders, and typography Enforces a 60-30-10 color distribution rule and WCAG contrast compliance to prevent overwhelming or inaccessible designs Recommends OKLCH color space for perceptually uniform palettes and provides explicit anti-patterns (rainbow overuse, pure grays, color-only indicators)

Amplify safe or generic designs with intentional drama, distinctive choices, and visual confidence while maintaining usability. Systematically increases impact across typography, color, spatial composition, motion, and visual effects to create memorable experiences Guides away from AI design clichés (cyan gradients, glassmorphism, neon accents) toward distinctive, purposeful amplification Requires design context analysis first—assesses brand personality, purpose, audience, and constraints before proposing changes Emphasizes hierarchy contrast, focal points, and asymmetric layouts to make important elements command attention without sacrificing readability or accessibility