kickoff

What this skill does

# Kickoff — Prompt Decomposition & Skill Mapping

You take a freeform description of work and turn it into a structured, trackable task plan. Each task is annotated with which skill(s) to invoke, so the user (or an orchestrator) can work through them one by one with full context.

## What You Do

1. **Read the user's prompt** — understand what they want built or changed
2. **Decompose into tasks** — break the work into discrete, ordered steps
3. **Map skills to tasks** — annotate each step with the skill(s) that apply
4. **Create a task list** — use Claude Code's task tools so progress is visible
5. **Present the plan** — show the user the structured plan for confirmation before starting

## How to Decompose

Think about the work in terms of **what needs to exist when it's done** and work backwards:

- Does it need a new API endpoint? → `secure-fetch` first
- Does it need a new page? → `page` (and probably `routes` before it)
- Does it need a form? → `form` (and `page` for the shell)
- Does it need a loading state? → `loading` (after the page exists)
- Does it need e2e tests? → `e2e-test` (after everything else)

Order tasks so that each step's output feeds the next step's input. Backend before frontend. Shell before content. Data before UI.

## Skill Catalog

Reference this catalog when mapping tasks to skills. Each entry describes what the skill does and when to reach for it.

### Backend & Data

| Skill | What It Does | When to Use |
|-------|-------------|-------------|
| **secure-fetch** | Creates type-safe server/client HTTP request functions using `@finstreet/secure-fetch`. Covers schema, server.ts, and client.ts files. | Any time you need to call a backend API endpoint — GET, POST, PUT, DELETE. Always the first step when backend integration is needed. |
| **mock-api** | Creates mock API endpoints that plug into the secure-fetch pattern. | When the real backend endpoint isn't ready yet and you need to unblock frontend work. |

### Pages & Routing

| Skill | What It Does | When to Use |
|-------|-------------|-------------|
| **routes** | Resolves, adds, and edits entries in `routes.ts`. | When a new page needs a route, or you need to look up an existing route path. |
| **path-resolver** | Resolves feature and backend file paths based on naming conventions. | When you need to figure out where files should be created for a given feature. Invoke directly: `/path-resolver`. |
| **page** | Builds Next.js page shells — metadata, params, header selection, content wrappers. | When creating a new page. Pages are thin shells; the actual content is built by other skills (form, list, task-group, etc.). |
| **loading** | Builds `loading.tsx` skeleton pages that mirror page content structure. | After a page exists and you want a loading skeleton for it. |

### Forms & Input

| Skill | What It Does | When to Use |
|-------|-------------|-------------|
| **form** | Full form implementation using `@finstreet/forms` — schema, fields, action, default values, config, and components. | Any multi-field form: create, edit, or inquiry step forms. The most comprehensive skill. |
| **simple-form** | Lightweight action-only forms without input fields (just a submit button). | Confirmation dialogs, one-click actions, or forms with no user input fields. |
| **inquiry-process** | Multi-step form wizard using `@finstreet/forms` and `@finstreet/ui`. | When building a multi-page wizard (e.g., an onboarding flow with progress bar and multiple steps). |

### UI Components & Patterns

| Skill | What It Does | When to Use |
|-------|-------------|-------------|
| **ui** | Expert guide to PandaCSS layout primitives and `@finstreet/ui` components. | When building any UI component — layout, styling, responsive design, or component composition. |
| **modal** | Implements modals — Zustand store, modal component, and optional open button. | When you need a dialog/modal overlay. |
| **task-group** | Builds TaskGroup patterns — TaskPanels, ActionPanels, and the TaskGroup wrapper. | When displaying a set of tasks a user must complete before proceeding (e.g., checklist-style UI). |
| **list-actions** | Adds pagination, search, sorting, filtering, and grouping to an InteractiveList. | When an existing list needs server-side pagination, search, or sorting capabilities. |
| **contract-upload** | Builds a contract upload page — file upload, scan status, document management, signature process start. | When building a page where users upload contract documents for the signature process. |
| **document-exchange** | Builds document exchange pages — upload, download, and manage documents in collapsible request groups. | When building a page for document management with grouped document requests. |

### Testing & Quality

| Skill | What It Does | When to Use |
|-------|-------------|-------------|
| **e2e-test** | Writes Playwright e2e tests — form modules, card CRUD, inquiry pages, happy paths. | After a feature is built and you need automated browser tests. |

### Git & Workflow

| Skill | What It Does | When to Use |
|-------|-------------|-------------|
| **commit** | Reviews, stages, commits, and pushes changes. | When you're done with a piece of work and want to commit. Invoke: `/finstreet-dev:commit`. Requires the `finstreet-dev` plugin. |
| **pr** | Creates a pull request for the current branch. | After all work is committed and you want to open a PR. Invoke: `/finstreet-dev:pr`. Requires the `finstreet-dev` plugin. |
| **new-feature-branch** | Creates a git branch following Conventional Branch naming. | At the very start of a new feature, before any code changes. Invoke: `/finstreet-dev:new-feature-branch`. Requires the `finstreet-dev` plugin. |

## Task Plan Format

Present the plan to the user as a numbered list. Each task should have:

1. **Title** — short description of what to do
2. **Skill** — which skill to invoke (or "manual" if no skill applies)
3. **Details** — what specifically needs to happen in this step
4. **Depends on** — which prior tasks must be complete first

### Example

Given a prompt like: *"I need a new page where property managers can upload documents for a financing case. It needs a form for metadata, file upload, and a loading skeleton. The API endpoint exists already."*

The plan would be:

```
## Task Plan

1. **Resolve paths and routes**
   Skill: `path-resolver`, `routes`
   → Determine feature directory and add route to routes.ts

2. **Create page shell**
   Skill: `page`
   → Build the Next.js page with metadata, params, and sub-page header
   Depends on: 1

3. **Build metadata form**
   Skill: `form`
   → Schema, fields, action, default values, config, and form components
   Depends on: 1

4. **Build document upload section**
   Skill: `document-exchange` or `contract-upload`
   → File upload with request groups and status tracking
   Depends on: 1

5. **Assemble page content**
   Skill: `ui`
   → Compose form and upload section into the page content component
   Depends on: 2, 3, 4

6. **Create loading skeleton**
   Skill: `loading`
   → Build loading.tsx that mirrors the page structure
   Depends on: 5

7. **Write e2e tests**
   Skill: `e2e-test`
   → Happy path test covering form submission and file upload
   Depends on: 5
```

## Creating the Task List

After presenting the plan and getting user confirmation, create tasks using Claude Code's task tools:

```
TaskCreate: task 1 title — skill: X — details
TaskCreate: task 2 title — skill: Y — details (depends on: 1)
...
```

This gives the user a live progress tracker. As each task is worked on, update its status to `in_progress`, then `completed` when done.

## Rules

1. **Always present the plan before starting work** — the user should confirm or adjust before you begin
2. **Order matters** — backend before frontend, shell before content, data before UI
3. **One skill per task** where possible — if a task needs two skills, split it into two tasks
4. **Include git tasks** — if the `finstreet-dev` plugi