# Add Feature

> Scaffold a new feature (page + server action + test) following this repo's patterns. Use when adding any user-facing feature to the app.

- **Type:** Skill
- **Install:** `agentstack add skill-nikandr-surkov-ai-saas-starter-add-feature`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [nikandr-surkov](https://agentstack.voostack.com/s/nikandr-surkov)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [nikandr-surkov](https://github.com/nikandr-surkov)
- **Source:** https://github.com/nikandr-surkov/ai-saas-starter/tree/main/.claude/skills/add-feature
- **Website:** https://ai-saas-starter-six.vercel.app

## Install

```sh
agentstack add skill-nikandr-surkov-ai-saas-starter-add-feature
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Add a feature

Follow these steps in order. Look at an existing feature first —
`src/app/(app)/generate/` is the reference implementation of this shape.

## 1. Spec it

Copy `specs/TEMPLATE.md` to `specs/NNN-short-name.md` and fill it in
(problem, solution, out-of-scope, data changes, test plan). Two paragraphs
beat zero. Show the user before writing code.

## 2. Data (only if the spec says so)

If the feature needs schema changes, stop and run `/db-migration`. Schema
changes require asking the user first.

## 3. Server action

Create `src/app/(app)//actions.ts`:

- `"use server"` at the top.
- First line of every action: re-check the session via the helper in
  `src/lib/auth/` — never rely on middleware alone. Throw/redirect if absent.
- Validate all input with a Zod schema. Parse, don't cast.
- Mutations that touch credits go through `src/lib/credits/` only.
- Return typed results; `revalidatePath` what the mutation changed.

## 4. Page

Create `src/app/(app)//page.tsx`:

- Server Component. Fetch data directly (Drizzle), no client fetching.
- Re-check the session server-side, same as the action.
- `"use client"` only for leaf components that need interactivity (forms,
  toggles) — keep them small, pass data down from the RSC.
- UI per DESIGN.md: existing shadcn primitives from `src/components/ui/`,
  ledger rows for lists, mono for numbers/labels, no new colors.

## 5. Navigation

Add the page to the sidebar nav in the app shell component (one entry:
lucide icon + label).

## 6. Test

Write a Vitest file next to the logic you added (`*.test.ts`):

- Cover the action's happy path, invalid input (Zod rejection), and the
  unauthenticated case.
- If credits are involved, assert the ledger invariant still holds
  (balance cache === sum of transactions).

## 7. Done means done

`pnpm typecheck && pnpm lint && pnpm test` all green. Walk the feature once
in the browser (`pnpm dev`).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [nikandr-surkov](https://github.com/nikandr-surkov)
- **Source:** [nikandr-surkov/ai-saas-starter](https://github.com/nikandr-surkov/ai-saas-starter)
- **License:** MIT
- **Homepage:** https://ai-saas-starter-six.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-nikandr-surkov-ai-saas-starter-add-feature
- Seller: https://agentstack.voostack.com/s/nikandr-surkov
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.