Nxt Page — Design skill for Claude Code
Generates a Next.js App Router page with page.tsx, loading.tsx, and error.tsx.
How to install Nxt Page
Installs to ~/.claude/skills/mertjane-awesome-claude-commands-nxt-page/SKILL.md
mkdir -p ~/.claude/skills/mertjane-awesome-claude-commands-nxt-page && curl -fsSL https://raw.githubusercontent.com/mertjane/awesome-claude-commands/HEAD/commands/nxt-page.md -o ~/.claude/skills/mertjane-awesome-claude-commands-nxt-page/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Nxt Page does
description: Generates a Next.js App Router page with page.tsx, loading.tsx, and error.tsx. Auto-detects route conventions, dynamic segments, and layout patterns from the existing project. argument-hint: allowed-tools: [Read, Glob, Write]
Generate Next.js Page
Create a complete Next.js App Router page set for the route provided in $ARGUMENTS.
Parse $ARGUMENTS as the route path (e.g. `dashboard/settings`, `blog/[slug]`, `shop/[category]/[id]`).
Step 1 — Detect Projec
Alternatives in Design
- Polish UI — Polish UI elements by auditing SCSS and TSX markup against the Anytype design system, then fixing discrepancie 8.7k ★
- Clipify — Claude Code skill: turn long videos into social-ready clips 549 ★
- Design Framework — Convert HTML/CSS design output to framework-specific component code 309 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Nxt Component
Generates a Next.js + TypeScript + Tailwind component. Auto-detects project conventions (naming, folder struct
Build For Good UX Skill
Agent skill for building UIs with proper loading states, error handling, empty states, form UX, and graceful d
Design Generate
Generate a technical design document. Auto-detects level: project-level from mega-plan.json, or feature-level
Writing Review
Comprehensive writing review — auto-detects document type and runs appropriate clarity, humanization, and styl
Craft Cycle Design
Design a cycle — create new cycles with planned stories, detail existing planning cycles, or quick-sketch a ro
Symptomsync Web Change
Use when tasks touch the Next.js frontend in web/, including pages-router pages, React components, Supabase cl
Related Agents
React UI Builder
Framework-agnostic React UI implementer — pages, sections, and interactive components as props-in/callbacks-ou
Repo Cartographer
Read-only codebase explorer. Maps an unfamiliar or recently-changed repository — module layout, entry points,
Nextjs Page Architect
Next.js App Router page architect for creating properly structured pages with component separation. Use PROACT