---
name: build-feature
description: Builds a feature within a screen of a humand-create-app project. Creates the folder structure, page component, route, and nav item. Use after /refine-feature has detailed the feature, or when the user says "construir feature", "implementar pantalla", "agregar módulo".
metadata:
  category: Implementation
---

# Skill: Build Feature

Scaffolds a complete feature (module + route + nav item) following module-architecture conventions from the `humand-react` plugin.

## Prerequisites

**MANDATORY: Before writing any code, complete the pre-flight rules check** defined in `rules/workflows/preflight-rules-check.md`. Read ALL listed rules from `humand-react` and `sandbox.md` before proceeding to step 2. Do not skip this.

**Context recovery**: If `.handoff/` exists in the project root, read the **last** handoff file
(highest order number). Pay attention to **Shared artifacts** and **Non-obvious decisions** —
these affect the current feature. Do not read older handoff files unless the last one references them.

## When to use

- After `/refine-feature` has detailed the feature to implement
- User says "construir feature", "implementar esta pantalla", "agregar un módulo"

## Prerequisites

Before implementing, read these shared files and pass their content to subagents:
- **`references/CONVENTIONS.md`** — team conventions for component choices and styling
- **`references/PATTERNS.md`** — code snippets for common UI patterns

## Steps

### 1. Gather requirements (run directly — Sonnet)

Ask the user (if not already provided from `/refine-feature`):
- **Module name** (PascalCase — the top-level grouping, e.g. `Processes`, `Onboarding`)
- **Screen name** (PascalCase — the specific view within the module, e.g. `List`, `Create`, `Detail`)
- **What it should display** — table, form, detail view, etc.
- **Icon** for the module's nav item — suggest one from `@material-hu/icons/tabler` (only needed if this is the first screen in a new module)
- **Entities** — what data does this feature work with? (e.g. Process, Step)

The folder will be `src/pages/{Module}/{Screen}/` and the route `/{module}/{screen}`.

Confirm before proceeding.

### 2. Read feature details from the database

Invoke `/fetch-feature-spec` with `{notionPageUrl}`, `{featureName}`, `{moduleName}`, `{screenName}` to load the Descripción, Criterios, and internal page (component table, data structure, pseudo-snippet) into context.

### 3. Create the module folder

Read and follow `module-architecture.md` and `module-architecture-files.md` from the `humand-react` plugin. Create only the files needed for the feature — don't create empty folders or placeholder files.

**Before writing any file, decide the structure** following `module-architecture-files.md` conventions. `index.tsx` should only orchestrate — layout, composition, and wiring. All types, constants, hooks, and sub-components go in their own files:

- `types.ts` — if the feature has its own TypeScript types or enums
- `constants.ts` — if the feature has mock data, static arrays, or config objects
- `hooks/use{Name}.ts` — if the feature has non-trivial state logic (pagination, filters, load more)
- `components/{ComponentName}/index.tsx` — if the feature has sub-components

**Naming rule:** All file names, folder names, component names, TypeScript types, variables, and route paths MUST be in English. Only user-visible strings (labels, titles, messages) go in Spanish.

Read the relevant pattern from `references/PATTERNS.md` and the conventions from `references/CONVENTIONS.md`. Then launch a subagent with the pattern snippet, the feature details from the database, and the conventions:

```
Agent({
  model: "sonnet",
  prompt: `
    You are implementing a UI feature in a Humand sandbox project.

    Project: {projectPath}

    Files to create (only create what's needed — do not create empty files):
    - src/pages/{Module}/{Screen}/index.tsx — orchestration only: layout, composition, wiring
    - src/pages/{Module}/{Screen}/types.ts — if the feature has its own types or enums
    - src/pages/{Module}/{Screen}/constants.ts — if the feature has mock data or static config
    - src/pages/{Module}/{Screen}/hooks/use{Name}.ts — if the feature has non-trivial state logic
    - src/pages/{Module}/{Screen}/components/{Name}/index.tsx — if the feature has sub-components

    Naming rule: ALL file names, folder names, component names, types, variables, and routes MUST
    be in English. Only user-visible strings (labels, titles, messages) go in Spanish.

    ## Code pattern to follow
    {paste the relevant snippet from references/PATTERNS.md}

    ## Feature details from refinement
    {paste component table from the feature record's internal page}
    {paste data structure table from the feature record's internal page, if applicable}

    ## Team conventions (MUST follow)
    {paste contents of references/CONVENTIONS.md}

    ## Mock data
    {paste mock data structure for mock/db.json if applicable}

    Write the complete file(s). Follow the pattern closely. Do not add comments or explanations.
  `
})
```

### 4. Post-build checks

Invoke `/verify-feature`. It runs Phase 1 (mechanical — tsc, biome, pattern check) and Phase 2 (semantic review against project rules) on the files changed in this feature.

Fix any Critical/High findings before continuing to the visual checkpoint.

### 5. Visual checkpoint

Tell the user where to see the new screen — be explicit:
> Agregué la pantalla de [nombre]. La encontrás en el menú de la izquierda como "[Label]". ¿La podés revisar y decirme si se ve como lo planeamos?

Wait for confirmation before continuing.
If something looks wrong, fix it now — do not move on.

### 6. Close the feature

Invoke `/commit-feature` with `{projectPath}`, `{screenName}`, `{featureName}`, `{notionPageUrl}`. It commits with the project convention and updates Notion (Estado → ✅ Listo, Commit, Último punto de guardado).

### 7. Feature handoff (MANDATORY — not skippable)

**Every feature ends with a handoff.** No exceptions. Do not ask the user whether to generate it, do not skip it to "save time", do not defer it to "the next session". If step 6 completed successfully, step 7 runs.

Invoke `/handoff-feature`. It writes `.handoff/feature-{orden}-{screen-kebab}.md` and asks the user about context cleanup.
