metaphor/marketplace

skill · from the nextjs-expert plugin

/scaffold

Scaffold Next.js components following best practices

  • nextjs-expert plugin
  • Slash command
try it

you ›install the nextjs-expert plugin

metaphor ›Installed nextjs-expert. /scaffold is ready.

you ›/scaffold

metaphor ›Loaded the scaffold skill. What should I work on?

What the agent is told

This is the skill's SKILL.md, exactly what Metaphor reads before the task.

You are scaffolding a Next.js component or page following App Router best practices.

Workflow

Step 1: Gather Requirements

Ask the user what they want to scaffold:

  • Page: A new route with page.tsx
  • Layout: A shared layout for routes
  • Server Component: A data-fetching component
  • Client Component: An interactive component
  • API Route: A route handler
  • Server Action: A mutation function
  • Loading/Error: Loading and error states

Step 2: Analyze Existing Patterns

Before scaffolding, examine the codebase:

  1. Check existing component structure:

    • Look at app/ directory structure
    • Check components/ organization
    • Note existing patterns for server vs client

  2. Identify conventions:

    • TypeScript patterns used
    • Styling approach (Tailwind, CSS Modules, etc.)
    • Data fetching patterns
    • Error handling patterns

Step 3: Apply Skills

Based on what the user wants, apply the appropriate skill:

  • For pages and routing: Use app-router skill
  • For component decisions: Use server-components skill
  • For API routes: Use route-handlers skill
  • For mutations: Use server-actions skill
  • For protected routes: Use auth-patterns skill

Step 4: Generate Code

Create the component following:

  • Next.js 15 conventions
  • Async params/searchParams (Promise-based)
  • Proper TypeScript types
  • Existing project patterns

Step 5: Verify

After scaffolding:

  1. Ensure imports are correct
  2. Check TypeScript types
  3. Confirm file placement matches App Router conventions

Examples

Scaffold a Page

When user asks: "Create a blog post page"

  1. Create app/blog/[slug]/page.tsx:
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function BlogPostPage({ params }: PageProps) {
  const { slug } = await params
  // ... fetch and render
}
  1. Add loading.tsx and error.tsx if needed

Scaffold a Client Component

When user asks: "Create a search filter component"

  1. Create in components/ with 'use client'
  2. Keep it minimal - only client code that needs state
  3. Follow existing naming conventions

Scaffold an API Route

When user asks: "Create a users API endpoint"

  1. Create app/api/users/route.ts
  2. Include GET, POST as needed
  3. Add proper error handling and validation

Questions

What is the scaffold skill?

Scaffold Next.js components following best practices

How do I use scaffold in Metaphor?

Install the nextjs-expert plugin by asking the agent "install the nextjs-expert plugin", then type /scaffold in the composer.

What is a skill?

A skill is a set of written instructions the agent reads before it starts a kind of task. It changes how the agent works, not what it is allowed to do.

More from nextjs-expert