nextjs-setup

What problem does it solve?

This Skill provides a structured, repeatable approach to creating modern Next.js 16+ frontends with TypeScript, Tailwind CSS, App Router, and common tooling. It accelerates project initialization and ensures a consistent architecture for Phase 2 workstreams.

Core Features & Use Cases

• Project bootstrap: Create a Next.js 16+ app with TypeScript, Tailwind, App Router, and a src/ directory.
• Core dependencies: Install Zustand, Axios, Framer Motion, React Hook Form, Zod, and related utilities for robust state, HTTP, and forms.
• Project structure: Scaffold UI components, stores, hooks, and utilities; configure Tailwind and import aliases.
• Use Case: Kick off a new frontend for a Todo app with a scalable structure ready for Phase 2 enhancements.

Quick Start

Create the app with TypeScript and App Router, then install core dependencies (zustand, axios, framer-motion, react-hook-form, zod) and set up the recommended folder structure for a maintainable frontend.