---
description: Step-by-step workflow for building a feature in a humand-create-app project. Follow this when the user asks to build a feature, after /refine-feature has detailed it.
alwaysApply: false
---

# Workflow: Build a Feature

Follow these steps when building a feature in a sandbox project.

---

## 1. Understand the request

Before writing any code:

- Ask what the feature does and what data it needs (if not already specified)
- Check if a similar page or component already exists — use it as reference
- Identify which layout to use: `DashboardLayout` (default) or `BlankLayout`

---

## 2. Create the screen folder

Features live inside a module. The path is always:

```
src/pages/{Module}/{Screen}/
├── index.tsx          # Screen entry point, uses a layout
├── components/        # Components specific to this screen
├── constants.ts       # Screen-specific constants (if needed)
├── hooks.ts           # Screen-specific hooks (if needed)
└── types.ts           # Screen-specific types (if needed)
```

Example: a "List" screen inside the "Processes" module →  `src/pages/Processes/List/`

If the `{Module}/` folder doesn't exist yet, create it as a bare folder (no files at the module root — the sandbox doesn't need the full services/queries/hooks structure that production modules have).

---

## 3. Add the route

In `src/App.tsx`, add a `<Route>` entry using the module/screen path:

```tsx
<Route path="/{module}/{screen}" element={<ScreenPage />} />
```

Example: `<Route path="/processes/list" element={<ProcessesList />} />`

Import the page at the top of `App.tsx`.

---

## 4. Add a nav item

The nav item is per-module, not per-screen. In `src/layouts/DashboardLayout/index.tsx`:

- **New module** → add an entry to `SECTIONS` pointing to the first screen's path:
  ```ts
  { key: 'processes', title: 'Procesos', path: '/processes/list', icon: <IconSomeIcon /> }
  ```
- **Existing module** → do NOT add another nav item. The module entry already exists.

Choose an icon from `@material-hu/icons/tabler`.

---

## 5. Implement the page

- Use `DashboardLayout` as the wrapper
- Fetch data through `src/services/axios.ts` (or a dedicated service file)
- Use `Stack` and material-hu DS components for layout and UI
- Follow conventions in `rules/file-types/sandbox.md`

---

## 6. Verify

Run before considering the feature done:

```bash
npx tsc --noEmit   # type check
bun run lint       # biome lint + format check
```