| name | website-one-shot |
| description | Create a complete, production-ready demo website for a business — use this skill whenever the user says "create a demo website", "build a site for [business]", "one-shot website", "generate a website demo", or provides a business URL and asks to build them a site. Also use when the user wants to quickly spin up a Next.js website for any client or prospect. Orchestrates URL scraping, autonomous research, guided discovery, parallel content/design/structure agents, Next.js app assembly, local dev preview, and optional Vercel deployment. |
| version | 1.0.0 |
Website One-Shot
Generate a complete, polished demo website for a business — from a URL or business name to a live Vercel link. Built for sales demos: research-driven, conversion-optimized, visually distinctive.
Overview
This skill handles everything: scraping existing sites, researching the business from public sources, running parallel AI agents for content/design/structure, assembling a complete Next.js app, letting you review it locally, and deploying to Vercel.
Tech stack: Next.js 15 (App Router) · TypeScript · Tailwind CSS v4 · ShadCN/UI · Google Fonts · Vercel
Output: A shareable https://[business-name].vercel.app URL you can send to the prospect.
Phase 1: Discovery
Determine which mode applies:
Mode A — Business has an existing website:
If the user provides a URL, proceed here.
-
Use WebFetch to scrape the URL. Extract and record in BRIEF.md:
- Business name, tagline
- Services / products offered
- Existing color palette (hex values if visible)
- Tone: formal / casual / playful / luxury
- Navigation structure and existing pages
- Contact info, phone, address, social links
- Any copy worth keeping (strong headlines, compelling descriptions)
-
Before asking the user anything, run autonomous research to fill gaps. Record all findings in BRIEF.md with [FOUND], [PARTIAL], or [MISSING] status. Read references/discovery.md for the full research checklist and search query patterns.
-
After research: identify which discovery questions remain [MISSING]. Ask only those — batched in a single message. Target ≤ 4 questions. See references/discovery.md Part 2 for the question bank.
-
Update BRIEF.md with the user's answers.
Mode B — No existing website (user provides business name + industry + location):
- Confirm: business name, industry, city/location, and the primary goal of the site.
- Run the same autonomous research as Mode A (see
references/discovery.md).
- Ask only unanswered questions — expect ~6–8 since no site exists to scrape.
- Compile
BRIEF.md — note clearly this is a greenfield site.
Both modes produce the same BRIEF.md format. All subsequent phases are identical.
Phase 2: Synthesis
- Read
BRIEF.md and references/aesthetics.md
- Classify the business into an industry category
- Select the appropriate aesthetic profile
- Write
PROJECT-PLAN.md in the current working directory:
- Pages to create (Home page + 2–4 additional pages)
- Key sections per page, in order
- Chosen color palette (primary, secondary, accent, neutral — with hex values)
- Typography pairing (display font + body font, both from Google Fonts)
- Aesthetic theme name
- Selected wow effects: leave as
TBD — pending user selection in Phase 3
- Primary CTA text and goal
- Skill file directory path (so agents can find reference files)
Phase 3: Wow Effect Selection
Present the user with 5 wow-effect combinations to choose from. Each option is a complete "hero effect + scroll effect + extras" bundle — not individual effects in isolation.
How to generate the 5 options
Read references/aesthetics.md and references/wow-effects.md. Using the aesthetic profile chosen in Phase 2, build 5 distinct combos:
- Option 1 — Profile Default: The recommended combo from
aesthetics.md for this profile (e.g. for professional-authority: particle network + staggered fade-up + glassmorphism nav).
- Option 2 — Subtle / Minimal: A toned-down version. Fewer or lighter effects — prioritizes speed and simplicity. Good for users who want polish without spectacle.
- Option 3 — Bold / Dramatic: A more theatrical version. Pulls in effects from higher-energy profiles (e.g. GSAP text-split reveals, horizontal scroll sections, ambient glow layers).
- Option 4 — Cross-Profile Mix: Borrows the hero effect from a different aesthetic profile that still fits the brand. Creates a unique feel that doesn't follow the standard template.
- Option 5 — Animation Library Showcase: Uses Framer Motion or GSAP more aggressively — scroll-scrubbed parallax, staggered variant cascades, layout animations. For users who want to show off.
Presentation format
Use AskUserQuestion with a single question. Present each option with:
- A short name (2–3 words)
- A one-sentence description of the visual experience
- The specific effects included (hero / scroll / extras)
The 4 options in AskUserQuestion should be:
- Options 1–4 from the list above (pick the 4 most distinct/relevant combos)
- The user can select "Other" to access Option 5, request 5 new options, or describe a custom combination
If the user asks for 5 more options, generate 5 completely new combos (mix profiles, swap hero/scroll pairings, try different animation libraries) and present again in the same format. Repeat until the user is satisfied.
If the user describes a custom combination, validate that it's implementable with the effects in wow-effects.md and confirm back to them.
After selection
Update PROJECT-PLAN.md:
- Replace the
TBD wow effects field with the user's chosen combo
- Include: hero effect name, scroll effect name, extras, and which animation library to use (if any beyond CSS)
Noise texture overlay and micro-interactions are always included regardless of selection (except dependable-local skips noise texture). Do not present these as choices — they're automatic.
Phase 4: Parallel Agent Generation
Spawn 3 Task agents in a single message (all 3 tool calls in one response for true parallelism):
Agent 1 — Content (references/agents/content-agent.md):
- Reads:
BRIEF.md + PROJECT-PLAN.md + skill's references/landing-page-principles.md
- Produces:
CONTENT.md — all page copy, headlines, CTAs, testimonials, section by section
Agent 2 — Design (references/agents/design-agent.md):
- Reads:
BRIEF.md + PROJECT-PLAN.md + skill's references/wow-effects.md + skill's references/landing-page-principles.md
- Produces:
DESIGN.md — Tailwind config, CSS variables, font imports, component styles, selected wow effect specs
Agent 3 — Structure (references/agents/structure-agent.md):
- Reads:
BRIEF.md + PROJECT-PLAN.md + skill's references/wow-effects.md
- Produces:
STRUCTURE.md — Next.js App Router file tree, component inventory with TypeScript props, interactive component specs
Do NOT pause or wait here — the agents run in the background and the orchestrator should immediately proceed to Phase 5 once all three agents have returned their results.
Phase 5: Assembly
Spawn 1 Task agent (references/agents/merger-agent.md):
- Reads:
BRIEF.md + CONTENT.md + DESIGN.md + STRUCTURE.md
- Creates the complete Next.js project in
./[business-name-slug]/
- No TODOs, no placeholder content — the output must be demo-ready
Phase 6: Proofread & QA
Spawn 1 Task agent (references/agents/proofread-agent.md):
- Reads:
BRIEF.md + PROJECT-PLAN.md + CONTENT.md + DESIGN.md + STRUCTURE.md
- Runs
npm run build inside ./[business-name-slug]/ to catch compile errors
- Reviews all generated source files for: broken imports, missing components, TypeScript errors, hardcoded placeholder text, color mismatches vs DESIGN.md, inconsistent spacing/layout, accessibility issues, and visual glitches (e.g. text-on-text contrast, overlapping elements, missing responsive breakpoints)
- Fixes all issues directly — no TODOs, no "fix later" comments
- Runs
npm run build again after fixes to confirm a clean build
Do NOT pause here. Proceed immediately to Phase 7 once the proofread agent finishes.
Phase 7: Dev Build & Local Preview
cd [business-name-slug] && npm run dev
The build was already verified by the proofread agent. Start the dev server immediately and tell the user: "Your site is running at http://localhost:3000 — take a look and let me know if you'd like any changes, or give me the go-ahead to deploy."
Apply any requested changes and re-verify the build passes before moving on.
Phase 8: Deploy to Vercel
Once the user confirms they're happy with the local preview:
- Show a brief summary: pages created, aesthetic profile used, wow effects implemented, Google Fonts used
- Deploy:
vercel --prod
- Output the live URL prominently — this is the shareable link for the sales demo
Reference Files
All reference files are relative to this skill's directory:
references/discovery.md — research checklist + gap-filling question bankreferences/aesthetics.md — industry profiles with color systems, typography, wow effect recommendationsreferences/wow-effects.md — interactive effect catalogue (particle network, scroll reveals, glassmorphism, etc.)references/landing-page-principles.md — conversion design best practices (section order, CTA rules, visual hierarchy, mobile-first)references/agents/content-agent.md — content generation agent promptreferences/agents/design-agent.md — design system agent promptreferences/agents/structure-agent.md — app structure agent promptreferences/agents/merger-agent.md — final assembly agent promptreferences/agents/proofread-agent.md — QA / proofread agent prompt
When spawning agents, pass the full path to the relevant agent reference file in the Task prompt so the agent knows where to find its instructions.
