Frontend & Design for Claude Code

Analyze and optimize Next.js application performance

Batch prompt writing agent for parallel image generation. Crafts multiple distinct, ready-to-use prompts for different creative directions, style variations, or derivative mockups.

Review generated design against anti-patterns, design principles, and accessibility guidelines

Scaffold Next.js components following best practices

Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.

Create publication-quality plots and visualizations using matplotlib and seaborn. Works with ANY LLM provider (GPT, Gemini, Claude, etc.).

> Scan for accessibility issues with WCAG 2.1/2.2 compliance and screen reader...

Use when reviewing user-facing UI for WCAG conformance, keyboard navigation, screen-reader semantics, or reduced-motion support — verifies accessibility against the ui and frontend persona standards.

Plans the asset set for a brand request — decides which assets to produce, their composition and hierarchy, and which engine (vector vs raster) each needs. Use before generating anything ambiguous or multi-asset.

Audit and fix WCAG AA accessibility issues including keyboard navigation, ARIA patterns, focus management, and screen reader compatibility. Use when reviewing or remediating a UI for accessibility compliance. Trigger with "run an accessibility audit", "fix WCAG failures".

Export a generated SVG asset in output/ to PNG, using the optional sharp dependency if installed, or an OS-native tool otherwise.

Generate an on-brand asset (logo, social template, doc template, or AI marketing graphic) for the active brand and save it to output/.

Create a new visual brand profile via guided Q&A, optionally bootstrapping colors and fonts from an existing website, logo, or brand-guidelines PDF.

Cross-browser testing across browsers, devices, and cloud providers

> Build WebSocket servers for real-time bidirectional communication

> Generate React components from descriptions with TypeScript and tests

> Generate React components from descriptions with TypeScript and tests

Create a mock API server for testing

> Generate utility CSS classes for spacing, colors, typography, and layout

> Generate utility CSS classes for spacing, colors, typography, and layout

Designs and manages icon systems and custom illustrations that extend the brand visually. Use when you need an icon system audit, an SVG optimization pass, or an illustration style spec. Trigger with \"audit the icon system\", \"optimize these SVGs\".

Use when designing the visual and experiential surface of a product, or reviewing a UI change for taste — the design specialist that establishes and maintains the project's design system, grounds every screen in researched real-world prior art, combines references and adds deliberate creativity, routes through the local taste skills, and catches AI slop. Verifies against the ui and creative persona standards.

Owns the structural UX layer — user flows, information architecture, wireframes, and interaction patterns. Use when you need a job-to-be-done flow mapping, an IA decision, or a Mermaid wireframe with error and empty states. Trigger with \"map the user flow\", \"design the information architecture\".

Owns the product's visual surface — brand identity, color systems, typography, SVG logos, and design token specs that bridge design to code. Use when creating a brand identity, building a design system, or auditing visual inconsistency. Trigger with \"design brand identity\", \"build design system\".

Use when reviewing changes to UI components, hooks, client state, or rendering logic (React/Vue/Svelte) — verifies component correctness, state topology, and render purity against the frontend and ui persona standards.

Designs linguistically-informed interfaces for corpus research tools — KWIC displays, concordance viewers, frequency charts, and genre filters following Swiss Design principles. Use when building or improving a UI for a corpus or NLP tool. Trigger with "design the concordance viewer", "improve the KWIC display".

Generates a CRITIC.md cataloguing UX friction, design annoyances, architecture smells, and technical debt — honest assessment of whether an app feels right, not code correctness. Use when a product feels off or before a refactor sprint. Trigger with "critique this app's UX", "audit the architecture".

Applies Swiss/International Style principles — grid systems, typographic scales, 8px spacing, and WCAG AA contrast — to create clean, functional interface designs and design system recommendations. Use when building a new component or auditing a page's visual consistency. Trigger with "review the design system", "design this component".

Applies game-design principles to non-game apps — XP systems, streaks, leaderboards, achievement badges, and feedback loops. Use when a product needs higher engagement or motivation mechanics. Trigger with \"add gamification\", \"make this more engaging\".

Video game design expert covering core loops, difficulty curves, player psychology, genre-specific patterns (platformers, roguelikes, strategy), and game feel. Use when designing a new game or improving player retention. Trigger with \"design the game loop\", \"my game feels bad\".

Coordinates game development agents (design, gamification, React/web or Godot implementation) to build or enhance interactive games and gamification features. Use when creating a new game or adding achievement systems to an app. Trigger with \"build a game\", \"add gamification to this app\".

Coordinates backend (Flask/API/DB), frontend (React/design/a11y), and quality agents to build or audit full-stack web applications. Use when building a new web app end-to-end or running a comprehensive web audit. Trigger with \"build this web application\", \"audit my web app\".

Implements and reviews React components using modern hooks, state management, and performance patterns (memoization, virtualization, code splitting) with TypeScript. Use when architecting components, debugging re-renders, or choosing a state strategy. Trigger with \"build this React component\", \"review my React code\".

Designs type systems — font pairing, scale, hierarchy, and readability tokens for design systems. Use when setting up or auditing typography for a product or codebase. Trigger with \"design a type system\", \"audit our typography\".

Designs spatial foundations — spacing scales, responsive grids, breakpoints, and layout primitives for design systems. Use when creating or auditing layout systems for a product. Trigger with \"design a layout system\", \"audit our grid\".

Designs color systems — semantic tokens, dark/light mode palettes, and WCAG contrast compliance for design systems. Use when building or auditing a color palette for a product. Trigger with \"design a color system\", \"audit our color tokens\".

Designs and stewards visual identities — logo usage rules, brand guidelines, asset libraries, and visual identity systems that stay consistent across contexts. Use when creating brand guidelines or auditing existing brand assets. Trigger with \"write brand guidelines\", \"audit our brand assets\".