Frontend & Design for Claude Code

Generate Canvas, Excalidraw, and Mermaid diagrams in Obsidian

Control and stream a running iOS, iPad, or Apple Watch Simulator with serve-sim — taps, gestures, hardware buttons, rotation, camera injection, and the live preview.

Official Expo skills: app design, SDK upgrades, and deployment to App Store/Play Store/web.

Design operations skills: handoff specs, design critique facilitation, design sprint planning, asset management, and design debt audits.

User research skills for designers: personas, empathy maps, journey maps, interview scripts, usability testing, and card sorting.

Design system skills: component specs, design tokens, naming conventions, spacing and grid systems, accessibility standards, and documentation.

Designer utility skills: portfolio review, resume building, case study structure, design presentations, stakeholder communication, and design briefs.

Interaction design skills: micro-interactions, animation principles, state machines, gesture patterns, error handling UX, and feedback patterns.

Prototyping and testing skills: wireframe specs, usability heuristics, heuristic evaluations, accessibility audits, A/B test design, and benchmark analysis.

UI design skills: color palettes, typography systems, layout grids, responsive breakpoints, dark mode specs, visual hierarchy, and brand alignment.

UX strategy skills: information architecture, content strategy, navigation patterns, user flows, task analysis, and competitive UX audits.

Visual critique skills: hierarchy analysis, brand consistency checks against mood/voice/tokens, composition evaluation, and typography audits — with a /critique-screen command that compiles a prioritised fix list.

Up-to-date action manuals for browser automation. Get verified CSS/XPath selectors for any website directly into your agent context.

Turn the current project website into a short, polished, shareable launch video using HyperFrames.

Create polished, professional reveal.js presentations with themes, multi-column layouts, callout boxes, code highlighting, animations, speaker notes, and custom styling.

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

Generate and edit images using Google's Nano Banana 2 (Gemini 3.1 Flash Image Preview) API. This skill should be used when the user asks to create or modify images, especially when they need fast iteration, explicit aspect-ratio control, or resolution control from 512px to 4K.

Create, animate, and export pixel art using Aseprite through natural language and commands

skills-map router (picks which skill to use) + go-no-go Stage 0 gate (NO-GO is the default) + Spec → Plan → Build → Test → Review → Ship workflow + debug-hypothesis + wiki-aggregate + Tavily web search + Nano Banana image generation + frontend-design aesthetics guide + subagent-brief token discipline + build-until-pass self-correcting build loop.

Generate and edit images via fal.ai Nano Banana Pro or OpenAI GPT Image 2

Skill: Spectrum design tokens and component schemas, zero config. Uses the embedded Spectrum snapshot via the design-data CLI.

Skill: spec-conformant design token lookup, validation, diff, and authoring for any custom dataset via the design-data CLI.

Skill: Spectrum 2 component documentation on-demand. Fetches S2 design guidelines, component options, and usage patterns without loading a persistent MCP server.

Post-production overlays on top of a clip: AI-generated cover as first frame, HTML/CSS kinetic captions, illustration overlays, chapter chips, end-card CTA. HyperFrames-backed, single final encode.

Horizontal ↔ vertical conversion (16:9 ↔ 9:16, 4:3 ↔ 3:4). Crops a narrow band and tracks the active speaker via MediaPipe + mouth-aspect-ratio variance.

14 Apple HIG skills (foundations, platforms, patterns, inputs, technologies, and 8 component categories) plus an MCP server (hig_list_skills / hig_lookup / hig_audit) and a Bun-based CLI auditor that detects 348 HIG patterns across SwiftUI, UIKit, React, Vue, Svelte, Angular, Compose, Flutter, and React Native.

SwiftUI preview integration for AI coding. Capture, review, and iterate on SwiftUI views using axe CLI.

Audit and improve front-end usability using 15 established design principles. Acts as a Senior UX designer/engineer reviewing your interface end-to-end.

From zero knowledge to hero website. Four skills and 57 commands: design (siteasy), SEO, defect inspection, and a whole-site /audit orchestrator running 14 parallel sub-agents. GEO for AI search, stack-aware design-system generator, interactive live variant mode, report export, WCAG 2.2, image strategy, accessible forms, parallax, and motion.

Real-time communication and voice agent integration with LiveKit. Enables AI agents to participate in video, audio, and messaging sessions.

Chaos skill: chaos-design

UX designer — user flows, information architecture, wireframes, and interaction design

Information architecture — design navigation structure, content hierarchy, sitemap, and taxonomy for a product or feature set. Use when asked to "organize the navigation", "information architecture", "how should content be structured", "sitemap", "nav redesign", "where should X live", or "content hierarchy".

UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the navigation", "what screens exist", or before starting any flow or wireframe work.

Usability review — evaluate an existing flow or UI against usability heuristics, flag friction points, and recommend fixes. Use when asked to "review the UX", "usability audit", "what's wrong with this flow", "UX feedback", "critique this design", or "why are users dropping off here".

Text and Mermaid wireframes — produce screen-level layouts with content hierarchy, component placement, and interaction annotations. Use when asked to "wireframe this", "sketch the UI", "layout for this screen", "lo-fi mockup", "screen design", or "what should this page look like".

Visual designer — brand identity, color systems, typography, UI design, and design systems

|

|