feat(code-to-prd): add analysis scripts, references, and tooling docs
- frontend_analyzer.py: scans codebase for routes, APIs, enums, framework detection - prd_scaffolder.py: generates PRD directory with README, page stubs, appendix - references/framework-patterns.md: React, Next.js, Vue, Nuxt, Angular, Svelte patterns - references/prd-quality-checklist.md: validation checklist for generated PRDs - SKILL.md updated with tooling section Both scripts are stdlib-only (no pip install).
This commit is contained in:
Leo
121
product-team/code-to-prd/references/framework-patterns.md
Normal file
121
product-team/code-to-prd/references/framework-patterns.md
Normal file
@@ -0,0 +1,121 @@
|
||||
# Framework-Specific Patterns
|
||||
|
||||
Quick reference for identifying routes, components, state, and APIs across frontend frameworks.
|
||||
|
||||
## React (CRA / Vite)
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `react-router-dom` — `<Route path="...">` or `createBrowserRouter` |
|
||||
| Components | `.tsx` / `.jsx` files, default exports |
|
||||
| State | Redux (`store/`), Zustand, Jotai, Recoil, React Context |
|
||||
| API | `axios`, `fetch`, TanStack Query (`useQuery`), SWR (`useSWR`) |
|
||||
| Forms | React Hook Form, Formik, Ant Design Form, custom `useState` |
|
||||
| i18n | `react-i18next`, `react-intl` |
|
||||
|
||||
## Next.js (App Router)
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `app/` directory — `page.tsx` = route, folders = segments |
|
||||
| Layouts | `layout.tsx` per directory |
|
||||
| Loading | `loading.tsx`, `error.tsx`, `not-found.tsx` |
|
||||
| API routes | `app/api/` or `pages/api/` (Pages Router) |
|
||||
| Server actions | `"use server"` directive |
|
||||
| Middleware | `middleware.ts` at root |
|
||||
|
||||
## Next.js (Pages Router)
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `pages/` directory — filename = route |
|
||||
| Data fetching | `getServerSideProps`, `getStaticProps`, `getStaticPaths` |
|
||||
| API routes | `pages/api/` |
|
||||
|
||||
## Vue 3
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `vue-router` — `routes` array in `router/index.ts` |
|
||||
| Components | `.vue` SFCs (`<template>`, `<script setup>`, `<style>`) |
|
||||
| State | Pinia (`stores/`), Vuex (`store/`) |
|
||||
| API | `axios`, `fetch`, VueQuery |
|
||||
| Forms | VeeValidate, FormKit, custom `ref()` / `reactive()` |
|
||||
| i18n | `vue-i18n` |
|
||||
|
||||
## Nuxt 3
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `pages/` directory (file-system routing) |
|
||||
| Layouts | `layouts/` |
|
||||
| API routes | `server/api/` |
|
||||
| Data fetching | `useFetch`, `useAsyncData`, `$fetch` |
|
||||
| State | `useState`, Pinia |
|
||||
| Middleware | `middleware/` |
|
||||
|
||||
## Angular
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `app-routing.module.ts` or `Routes` array |
|
||||
| Components | `@Component` decorator, `*.component.ts` |
|
||||
| State | NgRx (`store/`), services with `BehaviorSubject` |
|
||||
| API | `HttpClient` in services |
|
||||
| Forms | Reactive Forms (`FormGroup`), Template-driven forms |
|
||||
| i18n | `@angular/localize`, `ngx-translate` |
|
||||
| Guards | `CanActivate`, `CanDeactivate` |
|
||||
|
||||
## Svelte / SvelteKit
|
||||
|
||||
| Aspect | Where to Look |
|
||||
|--------|--------------|
|
||||
| Routes | `src/routes/` (file-system routing with `+page.svelte`) |
|
||||
| Layouts | `+layout.svelte` |
|
||||
| Data loading | `+page.ts` / `+page.server.ts` (`load` function) |
|
||||
| API routes | `+server.ts` |
|
||||
| State | Svelte stores (`writable`, `readable`, `derived`) |
|
||||
|
||||
## Common Patterns Across Frameworks
|
||||
|
||||
### Mock Detection
|
||||
```
|
||||
# Likely mock
|
||||
setTimeout(() => resolve(data), 500)
|
||||
Promise.resolve(mockData)
|
||||
import { data } from './fixtures'
|
||||
faker.name.firstName()
|
||||
|
||||
# Likely real
|
||||
axios.get('/api/users')
|
||||
fetch('/api/data')
|
||||
httpClient.post(url, body)
|
||||
useSWR('/api/resource')
|
||||
```
|
||||
|
||||
### Permission Patterns
|
||||
```
|
||||
# React
|
||||
{hasPermission('admin') && <Button>Delete</Button>}
|
||||
<ProtectedRoute roles={['admin', 'manager']}>
|
||||
|
||||
# Vue
|
||||
v-if="user.role === 'admin'"
|
||||
v-permission="'user:delete'"
|
||||
|
||||
# Angular
|
||||
*ngIf="authService.hasRole('admin')"
|
||||
canActivate: [AuthGuard]
|
||||
```
|
||||
|
||||
### Form Validation
|
||||
```
|
||||
# React Hook Form
|
||||
{ required: 'Name is required', maxLength: { value: 50, message: 'Too long' } }
|
||||
|
||||
# VeeValidate (Vue)
|
||||
rules="required|email|max:100"
|
||||
|
||||
# Angular Reactive Forms
|
||||
Validators.required, Validators.minLength(3), Validators.pattern(...)
|
||||
```
|
||||
54
product-team/code-to-prd/references/prd-quality-checklist.md
Normal file
54
product-team/code-to-prd/references/prd-quality-checklist.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# PRD Quality Checklist
|
||||
|
||||
Use this checklist to validate generated PRDs before delivery.
|
||||
|
||||
## Completeness
|
||||
|
||||
- [ ] Every route/page has a corresponding document
|
||||
- [ ] All form fields listed with type, required, validation, default
|
||||
- [ ] All table columns listed with format, sortable, filterable
|
||||
- [ ] All action buttons documented with visibility conditions
|
||||
- [ ] All API endpoints listed with method, path, trigger, params
|
||||
- [ ] Mock vs integrated APIs clearly distinguished
|
||||
- [ ] All enums exhaustively listed with every value
|
||||
- [ ] Page load behavior documented for every page
|
||||
- [ ] Page relationships mapped (inbound, outbound, data coupling)
|
||||
|
||||
## Accuracy
|
||||
|
||||
- [ ] Route paths match actual code
|
||||
- [ ] Field names match UI labels (not variable names)
|
||||
- [ ] Validation rules match actual code logic
|
||||
- [ ] Permission conditions match auth guard implementations
|
||||
- [ ] API paths match actual service layer calls
|
||||
- [ ] Enum values match source constants (no fabrication)
|
||||
- [ ] Uncertain items marked `[TBC]` with explanation
|
||||
|
||||
## Readability
|
||||
|
||||
- [ ] Business language used (not implementation details)
|
||||
- [ ] Each page doc is self-contained
|
||||
- [ ] No component names used as page names
|
||||
- [ ] Interactions described as user action → system response
|
||||
- [ ] Modals/drawers documented within their parent page
|
||||
- [ ] README system overview written for non-technical reader
|
||||
|
||||
## Structure
|
||||
|
||||
- [ ] `prd/README.md` exists with system overview + page inventory
|
||||
- [ ] `prd/pages/` contains numbered page files
|
||||
- [ ] `prd/appendix/enum-dictionary.md` exists
|
||||
- [ ] `prd/appendix/api-inventory.md` exists
|
||||
- [ ] `prd/appendix/page-relationships.md` exists
|
||||
- [ ] Cross-references use relative links
|
||||
|
||||
## Common Issues to Watch
|
||||
|
||||
| Issue | How to Detect | Fix |
|
||||
|-------|--------------|-----|
|
||||
| Missing modal content | Search for `Modal`, `Dialog`, `Drawer` components | Add as subsection in parent page |
|
||||
| Undocumented field linking | Search for conditional renders based on field values | Add to interaction logic |
|
||||
| Hidden permissions | Search for `v-if`, `v-show`, role checks, auth guards | Add visibility conditions |
|
||||
| Stale mock data | Compare mock shapes with API types/interfaces | Flag as `[Mock - verify with backend]` |
|
||||
| Missing error states | Search for error boundaries, catch blocks, toast errors | Add failure paths to interactions |
|
||||
| Unlinked pages | Cross-reference route params with navigation calls | Complete page relationships |
|
||||
Reference in New Issue
Block a user