FRMWRK
Next.js Boilerplate
Build tools with AI

Included AI skills

Skills are slash commands that give your AI assistant (Claude Code or Cursor) structured workflows. Type them in the chat to trigger the guided process.

How to use skills

  1. 1Open this project folder in Claude Code or Cursor
  2. 2Open a chat window with your AI assistant
  3. 3Type the skill command (e.g. /new-tool) and press Enter
  4. 4Follow the guided conversation — the skill handles the rest

Skills location

Skills are stored in .claude/skills/. Each skill is a Markdown file with instructions the AI follows. You can read, fork, or extend them.

/new-tool

New Tool Generator

.claude/skills/new-tool/

Transforms this boilerplate into a fully functioning internal tool by walking you through a guided questionnaire. Generates a spec, waits for your approval, then scaffolds the entire application.

When to use

Use this once, at the start, to bootstrap your tool.

What it does

  1. 1Opens a guided questionnaire — one question at a time
  2. 2Asks about your tool's purpose, users, data model, and UI pattern
  3. 3Generates docs/SPEC.md for your review
  4. 4After approval, rewrites pages, API routes, and optionally activates modules

Example interaction

You type:
/new-tool
Assistant responds:
"I'm going to help you create a new tool from this boilerplate.
I'll ask you some questions, then generate a spec for your review.

Let's start with the basics.

What is the name of your tool?"
/add-feature

Add Feature

.claude/skills/add-feature/

Scaffolds a new page, API route, and optional Prisma model into an existing tool — following the patterns already present in the codebase. Consistent with whatever /new-tool generated.

When to use

Use after /new-tool, whenever you want to add a new capability to your tool.

What it does

  1. 1Asks the feature name and a short description
  2. 2Asks which UI pattern to use: table, form, or dashboard
  3. 3Asks whether data needs to be persisted (adds a Prisma model if so)
  4. 4Generates the page, API route, and any required schema changes

Example interaction

You type:
/add-feature
Assistant responds:
"I'll help you add a new feature to this tool.

What is the name of this feature?
(e.g. 'Invoice overview', 'User management', 'Export report')"
/health-check

Health Check

.claude/skills/health-check/

Audits your tool for bugs, missing error handling, security issues, and boilerplate-specific problems. Produces a prioritised report of findings — does not apply fixes automatically.

When to use

Run before a deploy, after a sprint, or when something feels off.

What it does

  1. 1Reads all pages, API routes, and lib/ modules
  2. 2Checks for missing session guards, unvalidated inputs, hardcoded secrets
  3. 3Verifies Zod validation on all API boundaries
  4. 4Reports findings as a prioritised list: Critical → High → Medium → Low

Example interaction

You type:
/health-check
Assistant responds:
"Running a health check on this tool.

──────────────────────
🔴 CRITICAL (1)
  - app/api/export/route.ts: No session check — unauthenticated users can trigger export

🟡 HIGH (2)
  - app/api/users/route.ts: Request body not validated with Zod
  - lib/db/index.ts: Raw SQL query on line 42 — use Prisma instead

🟢 LOW (1)
  - app/dashboard/page.tsx: No empty state for the data table"
/improve

Improve

.claude/skills/improve/

Reviews your tool for UX improvements, performance optimisations, and missing features — based on what the spec says the tool should do. Produces a prioritised suggestion list.

When to use

Use at the end of a sprint, before a demo, or when the tool works but could be better.

What it does

  1. 1Reads docs/SPEC.md to understand the tool's intent
  2. 2Reviews all pages and API routes for UX and performance issues
  3. 3Compares actual implementation against the spec
  4. 4Produces a ranked suggestion list with effort estimates

Example interaction

You type:
/improve
Assistant responds:
"I'll review this tool for improvements.

Reading the codebase now.

──────────────────────
✨ Suggestions (4 total)

1. [UX · Quick] Add loading skeletons to the data table — currently shows nothing while fetching
2. [UX · Medium] The form has no client-side validation — users only see errors after submit
3. [Feature · Medium] The spec mentions CSV export but it's not implemented
4. [Performance · Hard] The dashboard fetches all records — add pagination or limit"

Writing your own skills

A skill is just a Markdown file. Create a new folder in .claude/skills/my-skill/ with a SKILL.md inside. Structure it with a description, a questionnaire, and a set of instructions for the AI to follow. Type /my-skill in the chat to invoke it.

# My Custom Skill

This skill does X.

**When to use:** Describe when to trigger this.

---

## SECTION 1: INTRO
Say: "I'll help you do X. Let me ask a few questions."

## SECTION 2: QUESTIONS
Ask one at a time:
1. "What is the name of X?"
2. "What should X do?"

## SECTION 3: EXECUTE
Based on the answers, [do the thing].

Development workflow

The following skills are part of the FRMWRK development plugin and form a workflow for planning and executing work. They're not built into the boilerplate but work seamlessly with it.

CommandPurpose
/check-statusCompact status overview of the project — tests, branches, recent changes
/plan-next-stepGenerate a technical plan for the next step, ask critical questions, wait for approval
/give-feedbackProcess feedback or questions during an active plan — clarify, update, re-approve
/executing-planExecute an approved plan step-by-step with checkpoints and task tracking

To use these skills: install the FRMWRK development plugin for Claude Code