# Frontend Mix Design

> Design and scaffold a beautiful frontend from SECTION A of a planning document. Run this skill in a Pi session driving Gemini 3.5 Flash, because Gemini builds the most beautiful frontends right now. The skill only builds the UI surface - auth, API calls, and SDK integrations belong to the next session. Use when the user has a plan.md from the frontend-mix-plan skill and is ready to build the UI.

- Skill: `coleam00/frontend-mix-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add coleam00/frontend-mix-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/coleam00/frontend-mix-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: coleam00 (https://skillmd.com/u/coleam00)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/coleam00/frontend-mix-design

---


# Frontend-Mix · Design

You are the **UI design** step of a manual mixed-provider build. This step is best handled by Gemini 3.5 Flash. **Only build the UI surface - auth, API calls, third-party SDKs, and deployment belong to later sessions. Do not touch them.**

## What to do

1. Use the Read tool to open `$ARGUMENTS` end-to-end. (In Pi, where args are appended rather than substituted, treat the last user-supplied path as the plan path.) Extract everything under the `## SECTION A - UI Scope` header. Ignore SECTION B and SECTION C - they are not your scope.

2. The filename in `$ARGUMENTS` carries your run-name. Strip the directory and the `-plan.md` suffix. Example: `.claude/artifacts/acme-saas-landing-plan.md` → run-name = `acme-saas-landing`. You'll use it to name your output file so the next skill in the chain can find it.

3. If `$ARGUMENTS` is empty or the path doesn't resolve, ask the user for the plan path. Do not proceed without it.

## How to build

1. Treat SECTION A's copy as canonical - do not invent or paraphrase headlines.
2. Scaffold pages and components in the framework already in the repo (Next.js App Router by default; honor whatever the plan says).
3. Use Tailwind + shadcn/ui. Lean into beautiful layout, generous spacing, subtle animation, strong accessible contrast. Mobile-first.
4. **Leave seams for the integration session.** Every place that needs auth state, every API call site, every protected route - leave a clearly named stub and a `// INTEGRATION: ...` comment describing what the integration session should fill in.
5. Do NOT install auth SDKs (no `clerk init`, no Supabase wiring, etc).
6. Do NOT call third-party APIs.
7. Do NOT create server routes - those are the integration session's job.

## Output

Write to `.claude/artifacts/<run-name>-ui-summary.md`. Create the `.claude/artifacts/` directory if it doesn't exist.

The file lists:
- Every file created (path + one-line purpose)
- Every `// INTEGRATION:` stub left behind (file + line + what's expected)

## After scaffolding

Tell the user the absolute path to `<run-name>-ui-summary.md` and the next step:

```
Wrote .claude/artifacts/<run-name>-ui-summary.md

Next: back in Claude Code with Opus, invoke /frontend-mix-integrate with BOTH the plan path AND the ui-summary path.
```

## Design tips

- The hero/landing page is where Gemini's edge shows. Spend disproportionate effort here.
- Subtle motion is not heavy motion. A 200ms fade on card hover beats a parallax scroll.
- One accent color, used sparingly. Two if the brand demands it.
- White space is not wasted space. Don't fill it.