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.