Skill

fe-page

Create a new Next.js App Router page with layout, loading, and error handling

Install

npx claudepluginhub justn-hyeok/harness-for-yall --plugin fe-experts

Tool Access

This skill uses the workspace's default tool permissions.

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.9k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

bmad-help

Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.

bmad-pro-skills

43.8k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 7, 2026

Actions

View Source View Plugin View on GitHub View README

Workflow

Architecture (fe-architect):

Design the page component hierarchy
Plan route groups, layouts, parallel routes if needed
Define data fetching strategy (server components, streaming)
Determine which sub-components need "use client"

Implementation (fe-implementer):

Create page.tsx (server component by default)
Create layout.tsx if needed
Create loading.tsx with skeleton UI
Create error.tsx with error boundary
Create not-found.tsx if applicable
Implement sub-components

Styling (fe-styler):

Apply responsive layout
Ensure accessible page structure (landmarks, heading hierarchy)
Dark mode support

Review (fe-perf + fe-tester in parallel):

Performance review of the page
E2E test for the page route

src/app/$ARGUMENTS.route/ page.tsx # Main page (server component) layout.tsx # Layout (if new layout needed) loading.tsx # Suspense fallback error.tsx # Error boundary ("use client")

Create Next.js Page

Build a complete App Router page with all supporting files.

Workflow

Architecture (fe-architect):
- Design the page component hierarchy
- Plan route groups, layouts, parallel routes if needed
- Define data fetching strategy (server components, streaming)
- Determine which sub-components need "use client"
Implementation (fe-implementer):
- Create page.tsx (server component by default)
- Create layout.tsx if needed
- Create loading.tsx with skeleton UI
- Create error.tsx with error boundary
- Create not-found.tsx if applicable
- Implement sub-components
Styling (fe-styler):
- Apply responsive layout
- Ensure accessible page structure (landmarks, heading hierarchy)
- Dark mode support
Review (fe-perf + fe-tester in parallel):
- Performance review of the page
- E2E test for the page route

Arguments

route: $ARGUMENTS.route
description: $ARGUMENTS.description

Files to Generate

For route $ARGUMENTS.route:

src/app/$ARGUMENTS.route/
  page.tsx        # Main page (server component)
  layout.tsx      # Layout (if new layout needed)
  loading.tsx     # Suspense fallback
  error.tsx       # Error boundary ("use client")