How do I install the Frontend Mix Design skill?

Run npx skillmds@latest add danielscholl/frontend-mix-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend Mix Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend Mix Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend Mix Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Frontend Mix Design?

danielscholl (@danielscholl) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend Mix Design by danielscholl

Name: Frontend Mix Design
Author: danielscholl

Frontend Mix Design

Design and scaffold a beautiful frontend from SECTION A of a planning document. Best handled by a model strong at UI generation (switch with /model; Gemini-class models excel here). The skill only builds the UI surface - auth, API calls, and SDK integrations belong to the next step. Use when the user has a plan.md from the frontend-mix-plan skill and is ready to build the UI.

danielscholl Updated Sep 17, 2026

File contents

Frontend-Mix · Design

You are the UI design step of a manual mixed-provider build. This step is best handled by a model that is strong at UI generation - use /model to switch to one (Gemini-class models tend to produce the most polished frontends). Only build the UI surface - auth, API calls, third-party SDKs, and deployment belong to later steps. Do not touch them.

What to do

Use the view tool to open the plan path the user gave you, end-to-end. Extract everything under the ## SECTION A - UI Scope header. Ignore SECTION B and SECTION C - they are not your scope.
The plan filename carries your run-name. Strip the directory and the -plan.md suffix. Example: .agents/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 no plan path was given or it 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 step. 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 step 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 step's job.

Output

Write to .agents/artifacts/<run-name>-ui-summary.md. Create the .agents/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 .agents/artifacts/<run-name>-ui-summary.md

Next: switch back to a strong reasoning model with /model, then ask Copilot to run the
frontend-mix-integrate step with BOTH the plan path AND the ui-summary path.

Design tips

The hero/landing page is where a strong UI model'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.

---name: frontend-mix-designdescription: Design and scaffold a beautiful frontend from SECTION A of a planning document. Best handled by a model strong at UI generation (switch with /model; Gemini-class models excel here). The skill only builds the UI surface - auth, API calls, and SDK integrations belong to the next step. Use when the user has a plan.md from the frontend-mix-plan skill and is ready to build the UI.---# Frontend-Mix · DesignYou are the **UI design** step of a manual mixed-provider build. This step is best handled by a model that is strong at UI generation - use `/model` to switch to one (Gemini-class models tend to produce the most polished frontends). **Only build the UI surface - auth, API calls, third-party SDKs, and deployment belong to later steps. Do not touch them.**## What to do1. Use the `view` tool to open the plan path the user gave you, end-to-end. Extract everything under the `## SECTION A - UI Scope` header. Ignore SECTION B and SECTION C - they are not your scope.2. The plan filename carries your run-name. Strip the directory and the `-plan.md` suffix. Example: `.agents/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 no plan path was given or it doesn't resolve, ask the user for the plan path. Do not proceed without it.## How to build1. 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 step.** 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 step 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 step's job.## OutputWrite to `.agents/artifacts/<run-name>-ui-summary.md`. Create the `.agents/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 scaffoldingTell the user the absolute path to `<run-name>-ui-summary.md` and the next step:```Wrote .agents/artifacts/<run-name>-ui-summary.mdNext: switch back to a strong reasoning model with /model, then ask Copilot to run thefrontend-mix-integrate step with BOTH the plan path AND the ui-summary path.```## Design tips- The hero/landing page is where a strong UI model'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.

Frequently asked questions