---
name: erp-kit-app-6-impl-frontend
description: Implement frontend code for applications. Use after deploying the backend with erp-kit-app-5-impl-backend. Triggers when implementing frontend pages, creating React components from screen specs, or when the user mentions implementing frontend, creating pages, or building UI for an application.
metadata:
  erp-kit-version: "0.9.0"
---

# Application Frontend Implementation

Implement frontend pages for an application, driven by screen spec documentation and a deployed backend.

## Version Check

Run `npx erp-kit --version` and compare against this skill's `metadata.erp-kit-version`. If they differ, the local skills are outdated — tell the user to run `pnpm erp-kit update skills` and stop.

## Progress Logging

Log to the audit trail at every checkpoint. See [erp-kit-app-shared/references/progress-protocol.md](../erp-kit-app-shared/references/progress-protocol.md) for the full protocol.

```bash
npx erp-kit app progress log --json '<ProgressInput JSON>'
```

Required checkpoints: `step.start` (on invocation), `decision` (on user choices), `agent.dispatch`/`agent.result` (on subagent lifecycle), `artifact.create` (on file writes), `validation` (on `erp-kit app check` or build commands), `step.complete` (on finish), `error` (on failures).

Bundle all conversation since the last checkpoint into the `conversation` array. Use your session ID as `sessionId`. Use the user's original prompt as `prompt`.

## When to Use

- Implementing frontend pages from screen spec docs
- Creating React components for ListView, Form, or DetailView screens
- Building the frontend UI for an application after backend deployment

## Prerequisites

- Deployed backend (from `erp-kit-app-5-impl-backend`)
- `.env` with `VITE_TAILOR_APP_URL` and `VITE_TAILOR_CLIENT_ID`
- All four tiers of documentation:
  - `README.md` — Application overview
  - `docs/actors/*.md` — Actor definitions
  - `docs/business-flow/*/README.md` + `story/*.md` — Business flows and user stories
  - `docs/screen/*.md` — Screen specifications (ListView, Form, DetailView)

## Workflow

```
ANALYZE SCREENS → GENERATE GRAPHQL SCHEMA → IMPLEMENT PAGES → VERIFY
```

### Phase 1: Analyze Screen Documentation

Read all screen specs (`docs/screen/*.md`) to build a complete picture:

> **Parallelize if possible:** Dispatch one agent per screen spec to extract page structure, fields, actions, and navigation. Each agent reads a single screen doc and returns structured analysis.

1. **Screen types** — Identify each screen as ListView, Form (create/edit), or DetailView
2. **Fields and columns** — Map required columns (ListView), form fields (Form), and detail fields (DetailView) from each spec
3. **Actions** — Identify navigation actions (create, edit, back-to-list) and mutation actions (save, delete, activate/deactivate)

### Phase 2: Generate GraphQL Schema

Run `pnpm generate` in the frontend directory to fetch the GraphQL schema from the deployed backend.

> **Sync barrier:** Schema generation must complete before page implementation. Generated types are shared across all pages.

### Phase 2b: Scaffolded Code Orientation

The scaffolded frontend includes example pages under `src/pages/user-management/` as a reference implementation. Use these to understand the page patterns (ListView, Form, DetailView), component structure, and GraphQL fragment conventions before implementing your actual pages.

### Phase 3: Implement Frontend Pages

> **Barrier step:** Write shared layout and router files before dispatching page agents. These files are shared across all pages and must not be modified by individual page agents.

Run `pnpm lint`, `pnpm typecheck`, and `pnpm gql-tada:check` regularly during implementation. Fix errors before moving on.

Create pages driven by screen spec docs. Each screen type has a standard implementation pattern.

> **Parallelize if possible:** Dispatch one agent per screen. Each agent writes only to its own directory:
> - `src/pages/<screen-name>/`
>
> **Shared-file guard:** Layout files, router configuration, and generated types are written before dispatch. Page agents must NOT modify shared files.

**Read [pages reference](references/pages.md) for the full pattern catalog.**

**Read [app-shell UI cheat sheet](references/component.md)** for `@tailor-platform/app-shell` primitives (Layout, Button, Table, dialogs, Menu, Select, Combobox, Autocomplete, etc.).

Page types and their file structure:

| Screen Type   | Files                                                                                            |
| ------------- | ------------------------------------------------------------------------------------------------ |
| ListView      | `page.tsx` + `components/<entity>-table.tsx`                                                     |
| Form (create) | `create/page.tsx` + `create/components/create-<entity>-form.tsx`                                 |
| Form (edit)   | `[id]/edit/page.tsx` + `[id]/edit/components/edit-<entity>-form.tsx`                             |
| DetailView    | `[id]/page.tsx` + `[id]/components/<entity>-detail.tsx` + `[id]/components/<entity>-actions.tsx` |

Key frontend patterns:

- **GraphQL fragments** — Each table/form/detail component exports its own fragment; page-level queries compose fragments
- **gql.tada** — Type-safe GraphQL via `graphql()` from `@/graphql`
- **React Hook Form + Zod** — Form validation with `zodResolver`
- **urql** — `useQuery` for reads, `useMutation` for writes
- **app-shell** — Routing: `Layout`, `Link`, `useParams`, `useNavigate`. UI: see [references/component.md](references/component.md) for primitives (`Button`, `Input`, `Table`, dialogs, menus, selects, etc.)

### Phase 4: Verify

```bash
cd <app-root>/frontend
pnpm lint
pnpm typecheck
pnpm gql-tada:check
pnpm build
```

After verification passes, proceed to implementation review with `/erp-kit-app-7-impl-review`.
