🏗️ Build interfaces

frontend-design guides the creation of production-grade interfaces with exceptional attention to aesthetic details and creative choices. It produces functional code (React, HTML/CSS, Tailwind) that avoids the "generic AI" look.

Without this skill, Claude tends to create visually generic interfaces — icon+title+text grids, identical cards, blue buttons. With it, the result has real identity and visual hierarchy.

Production-grade, free of AI slop, functional code, intentional aesthetics.

Triggers when the user asks for a frontend component, website, landing page, dashboard, React interface, app UI, or styled HTML page. The skill monitors terms like "create an interface," "build a website," "React component."

Knowing the triggers helps you phrase requests that activate the right skill — and avoid vague wording that leaves Claude in generic mode.

Semantic triggers, explicit UI/frontend/component request.

The skill applies Design Thinking and Frontend Aesthetics Guidelines: intentional typography, proportional spacing, clear visual hierarchy, a cohesive palette, micro-interactions, and purposeful motion. The result passes the "AI slop test"—it doesn't look generically generated.

Production-grade interfaces convert better, communicate more clearly, and won't embarrass you when shown to clients or recruiters.

Design Thinking, Frontend Aesthetics Guidelines, AI slop test.

The frontend-design SKILL.md contains two main sections: “Design Thinking” (the process for analyzing the request before coding) and “Frontend Aesthetics Guidelines” (concrete rules for typography, color, spacing, and motion). Claude reads both before writing a line of HTML/React.

Understanding that there is an analysis process before the code explains why the skill takes a little longer — and delivers much more.

Design Thinking, Frontend Aesthetics Guidelines, React/Tailwind, HTML/CSS.

Make specific requests: describe the product, audience, and tone. The skill handles the aesthetics—you just need to provide enough context.

Specific prompts generate specific interfaces. Vague prompts generate generic interfaces, even with the skill active.

Product context, target audience, visual tone, specificity.

Works with impeccable (to polish what it generated), web-artifacts-builder (to add React state/routes) and design-designer (to generate a prompt for Claude Design before coding). Limitation: it doesn't replace interactive prototyping with Figma or handle backend APIs.

Knowing the limitations helps set the right expectations and build the right workflow: frontend-design → impeccable → web-artifacts-builder when the UI needs state.

Skill composition, iterative workflow, scope limit.

impeccable is an interface audit and redesign system. It evaluates what exists, applies shared design principles (color, theme, typography, layout, motion), and rewrites or critiques with surgical precision — without vague opinions.

Creating is easy; polishing is where most people get stuck. impeccable bridges the gap between "it works" and "it impresses."

UX audit, redesign, design laws, actionable critique.

Triggers with: "improve this design," "critique this UI," "redesign this component," "UX audit," "fix typography/spacing/color," "make it look good," "polish the interface." Any request to improve something that already exists.

The critical distinction: frontend-design creates from scratch; impeccable improves what already exists. Using the wrong skill means doing the work twice.

Improvement, critique, audit, redesign of an existing item.

The skill applies "Absolute bans" (prohibiting decorative border-left, gradient text, standard glassmorphism, hero-metric templates, identical cards) and "Shared design laws" (color, theme, typography, layout, motion). The result passes the "AI slop test" and has real visual coherence.

Knowing what’s prohibited protects you from anti-patterns that undermine visual credibility — even when they look nice on their own.

Absolute bans, shared design laws, AI slop test, visual coherence.

The SKILL.md includes: Setup (context gathering + register of the current state), Shared design laws (Color, Theme, Typography, Layout, Motion, Absolute bans, Copy), Commands with routing rules (which trigger redesign, critique, or polish), and Pin/Unpin to lock in styles that have already been approved.

Internal routing determines whether Claude will redesign, critique, or just polish. Understanding this helps you make the right request.

Setup, routing rules, commands, Pin/Unpin, context gathering.

Paste the existing HTML and request a full audit. The skill analyzes it and delivers a critique plus an improved version.

A structured audit delivers more value than asking to "improve" without criteria — you get the diagnosis and solution together.

Structured audit, diagnosis + solution, actionable critique.

Classic workflow: frontend-design generates → impeccable audits → web-artifacts-builder adds state. Limitation: requires existing HTML/code as input — it doesn't create from scratch. It also doesn't replace testing with real users; it evaluates structure and aesthetics, not usage behavior.

Positioning impeccable as step 2 (not 1) in the workflow maximizes its value — it refines, it doesn't invent.

Refinement step, required input, iterative workflow.

web-artifacts-builder is a complete suite for initializing, developing, and packaging React artifacts into a single self-contained HTML file. It supports React, Tailwind, shadcn/ui, managed state, routing, and multiple components—delivering a bundle.html shareable.

When the UI needs state, tabs, modals with logic, or routing, plain HTML isn’t enough. This skill handles bundling complexity without manual configuration.

React, Tailwind, shadcn/ui, bundle.html, self-contained artifact.

Triggers with: "create a React artifact," "I want an interactive dashboard," "shadcn/ui component," "app with tabs and state," "artifact to paste into Claude," "HTML bundle with React." Keywords: artifact, React, shadcn, state, interactive, multi-component.

Knowing when to use web-artifacts-builder (React + state) versus frontend-design (static HTML/CSS) saves rework.

Interactive artifact, React, state, multiple components.

Turn a complex UI request into a bundle.html that runs in any browser without a server—everything is inlined: JS, CSS, fonts. You share a single file, and the client opens it directly. shadcn/ui components ensure consistent visual quality without design effort.

Delivering an HTML file that works offline is more professional than sending a link that depends on a server. And shadcn/ui saves hours of manual styling.

bundle.html, zero-dependency, shadcn/ui, professional delivery.

5-step workflow: (1) Initialize Project — creates a structure with index.html at the root. (2) Develop — write React/shadcn components. (3) Bundle — run bash scripts/bundle-artifact.sh that uses Parcel + @parcel/config-default + parcel-resolver-tspaths + html-inline to create bundle.html. (4) Share. (5) Test (optional with preview).

Knowing the bundling script lets you debug when the build fails or customize the process.

bundle-artifact.sh, Parcel, html-inline, @parcel/config-default, index.html required.

Describe the artifact with its state and components. The skill initializes the project, develops it, and bundles it automatically.

Detailing the components and interactions in the prompt avoids back-and-forth — the artifact comes out right on the first iteration.

Component specifications, interactions, shadcn/ui components.

Works with frontend-design (for the base visuals) and impeccable (to polish the generated components). Critical limitation: don’t use it for simple HTML without state — the Parcel overhead isn’t worth it. It also doesn’t connect to real APIs or databases.

Using web-artifacts-builder for a 3-paragraph HTML page is like using Webpack to serve a static file — unnecessary complexity.

When NOT to use, bundling overhead, static vs. interactive boundary.

design-designer is a prompt generator optimized for Claude Design. It conducts a quick interview (8 questions), synthesizes the answers, and delivers a precise prompt that instructs Claude Design to create landing pages, decks, prototypes, or clickable apps with high visual quality.

Claude Design has specific biases and limitations. Generic prompts produce mediocre results. This skill knows exactly what the model wants — and delivers it.

Prompt engineering for Claude Design, structured interview, optimized generation.

Triggers with: "I want to use Claude Design," "generate a prompt for claude.ai/design," "create a landing page in Claude Design," "prompt for a clickable prototype/deck/app," "optimize a prompt for Design." Also activates with "I need a visual design" when the context indicates claude.ai.

This is the only skill in the track that doesn’t deliver code — it delivers a prompt. Knowing the right trigger avoids confusing it with frontend-design.

claude.ai/design, prompt as output, not code.

Eliminates Claude Design antipatterns (lorem ipsum, unnecessary hero images, labels like "Our Portfolio," generic AI startup tropes with floating blobs and orbs). The generated prompt includes explicit negative instructions — what NOT to include — which most users never think to specify.

Negative instructions are just as important as positive ones in Claude Design. This skill already knows which ones to include—you don't need to figure them out through trial and error.

Negative instructions, anti-tropes, complete prompt, Claude Design biases.

4 phases: (1) Interview — 8 questions about the product, audience, tone, sections, visual style, visual references, what NOT to include, and complexity. (2) Synthesize — cross-checks answers and detects contradictions. (3) Generate — builds an optimized prompt with positive and negative sections. (4) Deliver — presents the prompt ready to paste into Claude Design. Quick Path is available if the user wants to skip the interview.

Understanding the 4 phases helps you answer interview questions more accurately — which leads to a more effective prompt.

Interview (8 questions), Synthesize, Generate, Deliver, Quick Path.

Activate the skill, and it will guide you through the interview. Alternatively, use Quick Path to go straight to the prompt without an interview.

The full interview generates more precise prompts. Quick Path is useful when you already have complete clarity about what you want.

Interview vs. Quick Path, clarity level, speed/accuracy trade-off.

Typical use: design-designer generates the prompt → Claude Design creates the visual → impeccable audits the result. Limitations: Claude Design doesn't handle long lists, complex tables, interactive maps, or data charts well. The skill warns you about these limitations before you invest time in the prompt.

Knowing what Claude Design can’t do helps avoid frustration. The skill has a section called "What Claude Design Will NOT Do Well" — read it before you start.

Claude Design limitations, the designer→Design→impeccable workflow, and setting the right expectations.