← ClaudeAtlas

scaffold-frontendlisted

Create a PRD-driven Next.js frontend in `client/` from repo-root `AGENTS.md` and `PRD.md`. Use this skill after `domain-to-spec` when the user wants the initial UI scaffold, pages, navigation, types, and optional API client generated from the confirmed PRD.
IdkwhatImD0ing/hackathonstarterkit · ★ 1 · Web & Frontend · score 57
Install: claude install-skill IdkwhatImD0ing/hackathonstarterkit
# Scaffold Frontend Create the frontend scaffold only after the repo has `AGENTS.md` and `PRD.md`. The PRD is the source of truth for pages, navigation, data types, and backend wiring. ## Preflight Check from the repo root: ```bash test -f AGENTS.md && test -f PRD.md && echo OK || echo MISSING test -d client && echo CLIENT_EXISTS || true ``` If either required doc is missing, stop and say: > This skill cannot run yet. `AGENTS.md` and `PRD.md` must exist at the repo root before scaffolding the frontend. Run the `domain-to-spec` skill first, or run `quickstart` to chain the project setup. If `client/` exists and is non-empty, stop and ask whether to merge carefully, skip frontend scaffolding, or cancel. Never overwrite it silently. ## Read The Specs Read `PRD.md` and `AGENTS.md` end to end. Extract: - Project name and summary - Pages from `Pages / Screens` - User flow and primary CTA - Core MVP features - Data model - Backend decision - Tech stack and style rules - Domain constraints that affect UI copy or validation If the PRD is missing pages or contradicts itself, ask the user to update the PRD before scaffolding. ## Scaffold `client/` Use the stack declared in `AGENTS.md`. If it matches the default stack, run: ```bash pnpm create next-app@latest client --typescript --tailwind --app --eslint --src-dir=false --import-alias="@/*" --turbopack --no-install cd client && pnpm install ``` Do not scaffold outside the repo root. ## Generate PRD Pages Create one route