A community-driven platform for asking and answering programming questions. Get help, share knowledge, and collaborate with other developers from around the world.
Claude Code uses the Playwright CLI (not the Playwright MCP) to drive a browser when exploring the app. Install once globally and pull the latest skill files:
# Claude Code uses for browser exploration (Global chosen)
npm install -g @playwright/cli@latest
# Ensure latest Playwright CLI skill
playwright-cli install --skillsNext.js 16 with the below:
| Category | Tool | What it does |
|---|---|---|
| Language | TypeScript 6 | Static type checking with strict mode enabled |
| Styling | Tailwind CSS v4 | Utility-first CSS framework for rapid styling |
| next-themes | Light/dark mode theming provider | |
| Linting | Biome | Fast linter and formatter (replaces ESLint + Prettier) |
| markdownlint-cli2 | Lints markdown files for consistent formatting | |
| Testing | Vitest | Fast unit test runner (Vite-native, Jest-compatible) |
| Playwright | E2E browser testing (Chromium, Firefox, WebKit, Mobile) | |
| Testing Library | React component testing utilities | |
| Git Hooks | Lefthook | Runs checks on commit (lint, typecheck, unit tests) and push (build, E2E tests) |
| Optimisation | React Compiler | Automatic memoisation and performance optimisations |
| Analytics | Vercel Speed Insights | Real user performance metrics viewable on Vercel |
| Vercel Web Analytics | Privacy-friendly visitor analytics viewable on Vercel |
For exact list see package.json
| File | What | Generally In This Project Template |
|---|---|---|
| ▢ .gitattributes | Git line ending and file type handling | Normalises line endings across platforms for consistent Git diffs |
| ▢ .gitignore | Files and directories Git should ignore | Prevents build outputs and dependencies from being committed |
| ▢ .markdownlint.yaml | Markdownlint configuration | Disables strict linting rules for practical writing |
| ▢ .vscode/extensions.json | VS Code extension recommendations | Useful extensions to use in this Next.js project |
| ▢ .vscode/settings.json | VS Code editor and formatting settings | Enables auto-formatting and configures Biome and Tailwind extensions |
| 🌺 .claude/commands/ | Claude Code repeatable prompts | Write commits, evaluate CodeRabbit comments etc. |
| 🌺 .claude/settings.json | Claude Code permissions | Allow/Deny permissions for files, commands, websearch etc |
| 🌺 .mcp.json | Claude Code MCP config | shadcn MCP for component install, Ref MCP for docs search |
| 🌺 CLAUDE.md | Claude Code project context | Documents tech stack for Claude Code (customise!) |
| 🅽 next.config.ts | Next.js framework configuration | Enables React Compiler and customises Next.js build settings |
| 🅽 package.json | Project dependencies and npm scripts | Defines project dependencies, scripts, and npm package metadata |
| 🅽 postcss.config.mjs | PostCSS plugins config for CSS processing | Enables Tailwind CSS v4 processing via PostCSS plugin |
| 🧪 biome.json | Biome linter and formatter | Sets linting rules, formatting style, and import organisation |
| 🧪 lefthook.yml | Git hooks manager | Automates code quality checks on commit and E2E tests on push |
| 🧪 tsconfig.json | TypeScript compiler settings | Configures TypeScript compiler options and module resolution behaviour |
| 🧪 playwright.config.ts | Playwright E2E test runner configuration | Sets test browsers (desktop + mobile), parallel execution, and base URLs |
| 🧪 .playwright/ | Playwright test outputs (custom organisation) | Contains test artifacts in test-results/ and HTML playwright-report/ (all Playwright outputs nested under /.playwright/ for clean structure) |
| 🧪 vitest.config.ts | Vitest test runner config | Sets up React component testing environment and references vitest.setup.ts |
| 🧪 vitest.setup.ts | Global test setup | Adds helpful test assertions like expect(element).toBeVisible() |
| 🚀 .github/dependabot.yml | Dependabot config | Automated dependency update PRs weekly (npm + GitHub Actions) |
| 🚀 .github/workflows/check-lint-type.yml | GitHub Actions CI workflow | Runs Biome linting/formatting checks and TypeScript type checking on PRs |
| 🚀 .github/workflows/test-e2e.yml | GitHub Actions CI workflow | Runs Playwright E2E tests on PRs (builds production, tests browsers, uploads reports) |
| 🚀 .github/workflows/test-e2e-vercel.yml | GitHub Actions CI workflow | Runs Playwright E2E tests against Vercel Preview deployments (triggered by Vercel) |
| 🚀 .github/workflows/test-unit.yml | GitHub Actions CI workflow | Runs Vitest unit tests on PRs (uses jsdom environment, React Testing Library) |
(1) Use Ngrok to Test App From Phone: (Terminal 1: npm run dev) + (Terminal 2: ngrok http 3000)
(2) GitHub Action - A branch protection ruleset exists to protect main. Includes checks for GitHub workflow jobs to pass before merging PR to main. See .xdocs/project-setup.md for config details.
(3) Vercel For Deploys - When you raise a PR it automatically deploys to Vercel Preview and Playwright e2e tests run on that too in addition to GitHub servers. When you merge the PR into main, you are deploying to Vercel prod. See .xdocs/project-setup.md for config details.