diff --git a/product-team/code-to-prd/SKILL.md b/product-team/code-to-prd/SKILL.md index e0c49d5..f63c934 100644 --- a/product-team/code-to-prd/SKILL.md +++ b/product-team/code-to-prd/SKILL.md @@ -337,3 +337,37 @@ Each page's Markdown should be **standalone** — reading just that file gives c | Ignoring dynamic route params | `/order/:id` = page requires an order ID to load | | Forgetting permission controls | Document which roles see which buttons/pages | | Assuming all APIs are real | Check for mock data patterns before documenting endpoints | + +--- + +## Tooling + +### Scripts + +| Script | Purpose | Usage | +|--------|---------|-------| +| `scripts/frontend_analyzer.py` | Scan codebase → extract routes, APIs, enums, structure | `python3 frontend_analyzer.py /path/to/project` | +| `scripts/prd_scaffolder.py` | Generate PRD directory skeleton from analysis JSON | `python3 prd_scaffolder.py analysis.json` | + +**Recommended workflow:** +```bash +# 1. Analyze the project (JSON output) +python3 scripts/frontend_analyzer.py /path/to/project -o analysis.json + +# 2. Review the analysis (markdown summary) +python3 scripts/frontend_analyzer.py /path/to/project -f markdown + +# 3. Scaffold the PRD directory with stubs +python3 scripts/prd_scaffolder.py analysis.json -o prd/ -n "My App" + +# 4. Fill in TODO sections page-by-page using the SKILL.md workflow +``` + +Both scripts are **stdlib-only** — no pip install needed. + +### References + +| File | Contents | +|------|----------| +| `references/prd-quality-checklist.md` | Validation checklist for completeness, accuracy, readability | +| `references/framework-patterns.md` | Framework-specific patterns for routes, state, APIs, forms, permissions | diff --git a/product-team/code-to-prd/references/framework-patterns.md b/product-team/code-to-prd/references/framework-patterns.md new file mode 100644 index 0000000..e3916cc --- /dev/null +++ b/product-team/code-to-prd/references/framework-patterns.md @@ -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` — `` 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 (`