building-with-nextjs

Automate Next.js 15+ App Router UI creation with Vitest and Playwright tests.

1|Updated Oct 21, 2025
One-click install
npx skills add https://github.com/bryonjacob/aug --skill building-with-nextjs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-with-nextjs
Source: https://github.com/bryonjacob/aug/tree/main/aug-web/skills/building-with-nextjs
Command: npx skills add https://github.com/bryonjacob/aug --skill building-with-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation and configuration of Next.js 15+ web UIs with App Router and React Server Components, helping teams establish consistent architecture and tooling.

Core Features & Use Cases

  • Project structure guidance: App Router setup, server/client component organization, and TS strict-mode configuration.
  • Testing patterns: Integrates Vitest for unit tests and Playwright for end-to-end tests, with accessible and robust test coverage.
  • Use Case: Imagine shipping a new marketing site with a shared UI library and automated tests; this skill provides a repeatable blueprint for scaffolding, wiring tests, and validating accessibility.

Quick Start

Start a Next.js 15+ app with App Router and TypeScript, install Vitest and Playwright tooling, and run the test suite to verify server and client components.

Frequently Asked Questions about building-with-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a Next.js 15 project with App Router and Server Components?▼

To set up a Next.js 15 project with App Router, you configure the project structure to organize server and client components while enabling TypeScript strict-mode. This establishes a consistent architecture for your web UIs.

How do I configure Vitest and Playwright for Next.js App Router testing?▼

Configuring Vitest and Playwright for Next.js involves integrating unit and end-to-end testing tooling into your project. This provides accessible and robust test coverage across both server and client components.

Do I need pnpm and TypeScript to test Next.js Server Components?▼

Yes, you need pnpm and TypeScript to test Next.js Server Components using this configuration. The environment requires pnpm for package management and a TypeScript setup to properly run the test suite.

What is the best way to organize client and server components in Next.js 15?▼

The best way to organize client and server components in Next.js 15 is using a structured App Router setup that enforces TypeScript strict-mode. This approach helps teams establish consistent architecture and tooling across the application.

Can I automate accessibility testing with Playwright in a Next.js project?▼

Yes, you can automate accessibility testing with Playwright in a Next.js project by integrating it as your end-to-end testing framework. This ensures accessible and robust test coverage across your server and client components.

How do I scaffold a marketing site with a shared UI library and automated tests?▼

To scaffold a marketing site with a shared UI library and automated tests, use a repeatable blueprint for project structuring, test wiring, and accessibility validation. This automates creation and configuration of Next.js 15+ web UIs.