Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Implements complete Next.js App Router features from a natural language description. Generates the full vertical slice: database migration, data access layer, API routes, UI components, server actions, and tests. Targets projects using Supabase, Firebase Auth, and Tailwind CSS.
It reads the existing codebase before generating anything, so output matches current file structure and patterns rather than producing boilerplate that needs manual integration.
When to use it
- Adding a user profile page to an existing Next.js app
- Scaffolding a CRUD resource with RLS policies and typed Supabase functions
- Building a comment system with auth checks and server actions
- Generating a paginated list view with URL-based filter state
- Adding a settings form that writes to a new database table
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Add a task management feature where users can create, list, and delete their own tasks
- 1Restates the feature and decomposes it into UI, schema, business rules, and auth requirements
- 2Surveys src/, existing components, supabase/migrations/, and package.json to understand current patterns
- 3Creates a Supabase migration with a tasks table, RLS policies, and indexes, then regenerates types
- 4Generates typed CRUD functions, an API route with Zod validation and auth checks, and a Server Component page paired with a Client Component list
- 5Writes tests for schema validation, data access layer, and the API route, then stages a commit
Task management feature across 6 new or modified files, with migration ready to apply and commit message 'feat: add task-management'
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.