# Screen Doc → Frontend Code Parity Check

## Context

App: {{APP_NAME}}
Screen docs: {{SCREEN_DOCS}}
Frontend pages: {{FRONTEND_PAGES}}

## Instructions

1. Read ALL screen docs at the paths above
2. Read ALL frontend page/component files at the paths above
3. For each screen doc, check if a corresponding page implementation exists
4. Return results as JSON per the Output Format section

## Extraction: Screen Docs

From each screen doc, extract:

- Screen name (from filename or heading)
- Screen type: ListView, Form (create/edit), or DetailView
- Fields/columns specified
- Actions specified (create, edit, delete, activate, etc.)
- Navigation targets

## Extraction: Frontend Code

From frontend pages, identify:

- Page files (`page.tsx`) and their routes
- Component files (tables, forms, details, actions)
- GraphQL fragments and queries used
- Form fields and validation schemas (Zod)
- Table columns defined
- Action buttons and navigation

### Screen Type → File Pattern

| Screen Type   | Expected 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`              |

## Parity Checks

| Check ID          | Question                                                      |
| ----------------- | ------------------------------------------------------------- |
| page_exists       | Does a page file exist for each screen doc?                   |
| component_exists  | Do the expected components exist for the screen type?         |
| field_coverage    | Does the page/component render all documented fields/columns? |
| action_coverage   | Does the page implement all documented actions?               |
| screen_type_match | Does the implementation match the documented screen type?     |

### How to Check

1. For each screen doc, map the screen name to an expected route path
2. Check if the expected `page.tsx` and component files exist
3. Read component code and verify documented fields appear (in table columns, form fields, or detail fields)
4. Verify documented actions appear as buttons, links, or mutations
5. Confirm the implementation pattern matches the screen type (table for ListView, form for Form, etc.)

## Common Gap Patterns

- **Missing page**: Screen doc exists but no page file
- **Missing component**: Page exists but table/form/detail component missing
- **Missing fields**: Doc specifies columns/fields not rendered in code
- **Missing actions**: Doc specifies actions not implemented
- **Type mismatch**: Doc says ListView but implementation is a DetailView

## Output Format

Return a JSON object:

```json
{
  "check_type": "screen-doc-code-parity",
  "app": "{{APP_NAME}}",
  "gaps": [...],
  "inconsistencies": [...],
  "summary": { "total_checks": N, "passed": N, "failed": N, "skipped": N }
}
```

See [impl-parity-report-format.md](impl-parity-report-format.md) for field definitions.
