SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfrontend-mix-design

frontend-mix-design

Frontend & websites

View repository

Updated 10-16 05:03

About this skill

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.