nextjs-fullstack
This skill codifies an opinionated fullstack Next.js stack for building production web applications. It defines architecture patterns, file conventions, and best practices to ensure consistency across projects.
Use when: starting a new project, onboarding a developer to the stack, or reviewing code for pattern compliance.
The Stack
| Layer | Technology | Version | Purpose |
|---|---|---|---|
| Framework | Next.js | 16+ | App Router, RSC, Server Actions |
| Language | TypeScript | 5.x | Strict mode enabled |
| Styling | Tailwind CSS | v4 | Utility-first, CSS variables |
| Components | shadcn/ui | latest | Copy-paste primitives, Radix-based |
| Auth | Better Auth | latest | Email/password, OAuth, sessions |
| Database | Drizzle ORM | latest | Type-safe SQL, migrations |
| DB Provider | PostgreSQL | (via Neon/Supabase/local) | Production database |
| Animations | Framer Motion | latest | LazyMotion + m for tree-shaking |
| Forms | React Hook Form + Zod | latest | Validation, Server Actions |
| Nodemailer | latest | Transactional emails | |
| Hosting | Vercel | — | Auto-deploy, edge functions |
More from saccoai/agent-skills
website-analysis
Crawl any website in a single pass to produce both a complete structural map and full content extraction. Discovers all pages, routes, navigation, multilingual variants, and issues while simultaneously extracting all text, images, metadata, and assets. Use before any migration, redesign, or audit.
16seo-migration
SEO preservation during website migrations — redirect mapping, canonical URLs, sitemap generation, structured data, meta tags, and Search Console verification. Use when rebuilding a site to ensure zero SEO loss from URL changes, content moves, or domain switches.
9project-handoff
Generate complete client handoff documentation — deployment guide, environment setup, CMS instructions, maintenance checklist, architecture overview, and operational runbook. Use when delivering a finished project to a client or their team.
8client-proposal
Generate a professional project proposal from a website audit. Analyzes the prospect's current site, identifies issues, and produces a structured proposal with scope, deliverables, tech recommendations, and phased timeline. Use as a sales tool or for scoping client engagements.
6web-audit
Comprehensive website quality audit — Lighthouse scores, accessibility (axe-core), cross-browser testing, performance budgets, and mobile responsiveness. Generates actionable reports with pass/fail per page. Use to audit any live website or as a QA gate before deployment.
6website-refactor
End-to-end website refactoring workflow using agent teams. Orchestrates content-extraction, web-audit, and seo-migration skills as specialized teammates alongside a designer. Use when the user wants to rebuild, redesign, or migrate an existing website.
5