---
name: plan-project
description: Creates a Notion page with the project plan before starting implementation. Use this automatically at the start of every new sandbox project, before writing any code.
metadata:
  category: Project Creation
---

# Skill: Plan Project

Creates a Notion page as a live document with an embedded features database. The page captures the objective, flows, and overall status. The database tracks every feature with its state, description, and validation criteria — populated screen by screen via `/refine-feature`.

## When to use

- Automatically at the start of every `/bootstrap-react-project` flow, after the user describes what they want to build
- When the user explicitly asks to document the plan

## Steps

### 1. Gather information from the conversation

Extract from the conversation:
- **Project name** — the name given in `/bootstrap-react-project`
- **Objective** — what the user wants to explore or validate
- **Screens** — list of screens described by the user, with a brief description of each
- **Base features** — i18n is always included; note any other relevant config
- **material-hu components** — which components will likely be used (tables, forms, cards, charts, etc.)

Do not try to identify components yet — that comes per feature in `/refine-feature`.

If any of these are unclear, ask before continuing.

### 3. Propose validation criteria for each screen

For each screen, propose 2-4 validation criteria based on what the user described. These should be in plain Spanish and describe what the user should be able to see or do — not technical assertions.

**Examples:**
- ✅ "Al entrar a la pantalla se ve la lista de pedidos del mes"
- ✅ "Puedo filtrar por estado y la lista se actualiza"
- ✅ "Si hago clic en un pedido, veo el detalle"
- ❌ "El componente OrderList renderiza correctamente"
- ❌ "El estado de React se actualiza al filtrar"

These criteria serve as a **visual checkpoint** — the user confirms each screen against them before committing.

The user can refine the criteria after seeing the screen in action.

### 4. Create the Notion page and features database

Ask the user for the Notion link where the page should be created, or use the workspace location defined by the team.

Create the page using `TEMPLATE.md` as the structure. Fill in:
- **Objetivo**
- **Estado** → `Planificado`
- **Contexto técnico** → features activas, stack base

Then create the **Features database** embedded in the Features section with these properties:

| Propiedad | Tipo | Opciones |
|---|---|---|
| Name | Title | — |
| Módulo | Select | *(se agregan al refinar)* |
| Screen | Select | *(se agregan al refinar)* |
| Estado | Select | `Pendiente`, `En progreso`, `✅ Listo` |
| Descripción | Text | — |
| Orden | Number | — |
| Criterios | Text | — |
| Commit | Text | — |

Set the default view grouped by Módulo → Screen, ordered by Orden. The database starts empty — it gets populated as each screen is refined.

Page title: `[Project name] — Plan`

Share the link:
> Creé la página del proyecto acá: [link]. Voy a ir completándola paso a paso.

### 5. Identify flows and validate with the user

Build a flow diagram that shows how the user navigates between screens and states. This catches misunderstandings early — before any detail work.

Generate a Mermaid flowchart that includes:
- **Every screen** as a node
- **Every navigation action** as an edge (button clicks, menu selections, form submissions)
- **Conditional states** as decision nodes (e.g. empty vs populated, authenticated vs not)
- **Overlays** (drawers, dialogs, menus) as separate nodes connected to their trigger

**Example:**
```mermaid
flowchart TD
    A[Step 1: Información básica] -->|Continuar| B{¿Hay pasos?}
    B -->|No| C[Step 2: Empty state]
    B -->|Sí| D[Step 2: Lista de pasos]
    C -->|+ Nuevo paso| E[Drawer: Nuevo paso]
    D -->|+ Nuevo paso| E
    D -->|3 dots → Editar| E
    D -->|+ Nueva acción| F[Menú: Tipo de acción]
    E -->|Guardar| D
    F -->|Seleccionar| D
```

Update the Notion page with the diagram in the **Flujos** section.

Share with the user:
> Agregué el diagrama de flujos a la página. ¿Están todos los caminos, o falta alguno?

Wait for confirmation. The user may:
- Add missing flows ("falta el flujo de eliminar paso")
- Correct wrong connections ("desde ahí no se vuelve a la lista, se va al paso 3")
- Confirm it's complete

⛔ Do NOT proceed until the flow diagram is confirmed.

### 6. Confirm screen list with the user

From the confirmed flow diagram, extract and list all screens for the user to review:

> Estas son las pantallas que veo en el flujo:
> 1. **[Módulo] — [Screen]**: [descripción de una línea]
> 2. …
>
> ¿Están todas, o falta alguna?

Wait for confirmation. The database is empty at this point — each screen's features get added when `/refine-feature` is run for that screen.

### 7. Share final plan and wait for approval

> El plan general está listo: [link]. Tiene el objetivo, los flujos y las pantallas. Cuando quieras arrancar con una pantalla, usamos `/refine-feature` para detallarla y después `/build-feature` para construirla. ¿Arrancamos?

Do not write any code until the user explicitly confirms.

### 8. Keep the page up to date as features are built

After each `/build-feature` visual checkpoint and commit:
- Add any design decisions that came up to **Decisiones de diseño**
- If all features in the database are `✅ Listo`, update the page **Estado** to `Listo para revisar`

(Feature status, commit, and last save point are updated by `/build-feature`.)
