Frontend · How to use a skill

set-up-nextjs-tailwind-site

Sets up a new Next.js App Router project with Tailwind, a shared layout, header, footer, 404 page and one route per page in your website brief, then pushes it to GitHub. Use when the user wants to start a new website, create a Next.js site, or turn a page list into a working project.

Version 1.0 · Updated 2026-10-31

View raw SKILL.md

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/set-up-nextjs-tailwind-site/raw' -o ~/'.claude/skills/set-up-nextjs-tailwind-site/SKILL.md'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/set-up-nextjs-tailwind-site/raw' -o '.cursor/skills/set-up-nextjs-tailwind-site/SKILL.md'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/set-up-nextjs-tailwind-site/raw' -o '.agents/skills/set-up-nextjs-tailwind-site/SKILL.md'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Set up a Next.js and Tailwind website

When to use

  • Starting a small-business or marketing website from nothing.
  • You have a page list (ideally docs/website-brief.md from the Website mode of write-prd-prompt) and want a project that runs locally with every page in place.
  • Not for adding pages to an existing site; just add the route folders.

Handoff

  • Reads: docs/website-brief.md (page list, business name, contact details). If it is missing, ask for the page list and business name instead of guessing.
  • Writes: a project that runs with npm run dev, pushed to a GitHub repository. Record the repo URL and how to run it in README.md.

Steps

  1. Check Node.js is installed (node -v; use the current LTS). Create the project with the recommended defaults (TypeScript, ESLint, Tailwind CSS, App Router, no src/ folder):
   npx create-next-app@latest my-site --yes
   cd my-site
  1. Copy the brief into the project as docs/website-brief.md so later steps can read it.
  2. Shared layout in app/layout.tsx: set <html lang="en"> (or en-AU), a skip link (<a href="#main" className="sr-only focus:not-sr-only">Skip to content</a>), <Header />, <main id="main">{children}</main>, <Footer />.
  3. components/site/Header.tsx: business name or logo linking to /, a <nav aria-label="Main"> with one link per page from the brief, and the main call to action as a button-styled link (usually to /contact). On small screens use a <details>/<summary> menu or a button with aria-expanded.
  4. components/site/Footer.tsx: business name, contact details from the brief, links to /privacy and /contact, and the current year.
  5. One route per page in the brief: app/about/page.tsx, app/services/page.tsx, app/contact/page.tsx, app/privacy/page.tsx. Each gets an <h1> and the draft copy from the brief, so nothing is blank. Keep app/page.tsx simple: the home page is designed in a later step.
  6. app/not-found.tsx: a friendly 404 with a link home and to /contact.
  7. Keep page data in one place: lib/site.ts exporting site = { name, url, email, phone, address, nav: [...] }. The header, footer, SEO and contact steps all read from it.
  8. Run npm run dev, click every nav link, then npm run build and fix any error before moving on.
  9. Put it on GitHub: create an empty repository, then git add -A && git commit -m "Initial site" && git branch -M main && git remote add origin <repo-url> && git push -u origin main. Write the repo URL and "npm install, npm run dev" in README.md.

Gotchas

  • Never commit .env.local or API keys. create-next-app already lists .env* in .gitignore; keep it.
  • Use next/link for internal links and next/image for images (with alt text), not raw <a>/<img>.
  • Tailwind v4 is configured in CSS (@import "tailwindcss"; in app/globals.css), not in tailwind.config.js. Theme colours come in the next step.
  • Don't add a CMS, auth or database yet. A small-business site needs none of them to launch.
  • Names: folder names become URLs. Use lowercase kebab-case (app/our-work/), not app/OurWork/.

Example prompt

"Here's my website brief. Create the Next.js project with every page in it, a header and footer, and push it to my GitHub."

Licence: CC BY 4.0. Attribution when you reuse it: From TheSkillVault, https://theskillvault.ai, CC BY 4.0