| name | frontend-mix-design |
| description | 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. |
| argument-hint | <plan.md path> |
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
-
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.
-
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.
-
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
- Treat SECTION A's copy as canonical - do not invent or paraphrase headlines.
- Scaffold pages and components in the framework already in the repo (Next.js App Router by default; honor whatever the plan says).
- Use Tailwind + shadcn/ui. Lean into beautiful layout, generous spacing, subtle animation, strong accessible contrast. Mobile-first.
- 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.
- Do NOT install auth SDKs (no
clerk init, no Supabase wiring, etc).
- Do NOT call third-party APIs.
- 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.
