| name | create-playground-page |
| description | Use when adding a PR playground test page for a bug fix or feature in apps/prs. Covers the React and Angular wiring, which differ. Every PR needs BOTH a React and an Angular page so reviewers can verify the change in each framework. |
Skill: Create a PR playground page
Every fix or feature PR ships a playground page so reviewers can verify it visually. You need both a React and an Angular page. They wire up differently, and missing the Angular one is the most common gap.
Use the issue number throughout. Bugs go under bugs/, features under features/. Naming is bug{N} / feat{N}, no hyphen, where {N} is the issue number.
See apps/prs/react/src/routes/README.md for the canonical steps.
If not provided, ask the user whether this is a bug or a feature, and what the issue number is.
React (route file and component in routes)
Files live flat in apps/prs/react/src/routes/bugs/ (or features/).
- Copy the route template:
cp apps/prs/react/src/routes/_TEMPLATE.tsx to either apps/prs/react/src/routes/bugs/bug{N}.tsx or apps/prs/react/src/routes/features/feat{N}.tsx.
- Rename the component inside the file from
TemplateRoute to Bug{N}Route or Feat{N}Route.
- Update header, GitHub link, and description
- Add component imports and sample test cases
See apps/prs/react/src/routes/README.md for the canonical steps.
Angular (folder + route.json + generated manifest)
Angular does NOT hand-wire routes in a main file. Each page is a folder with its own .route.json, and a build step regenerates the manifest.
- Create the folder
apps/prs/angular/src/routes/bugs/bug{N}/ or apps/prs/angular/src/routes/features/feat{N}/ with:
bug{N}.component.tsbug{N}.component.htmlbug{N}.route.json with { "title": "...", "path": "bugs/bug{N}", "id": "{N}", "type": "bug" }
- Copy an existing recent bug folder (for example
apps/prs/angular/src/routes/bugs/2547/) as the pattern.
- Copy the same examples from the React steps.
Verify before committing
Run each playground and confirm the page loads and the side-menu link navigates:
npm run serve:prs:react
npm run serve:prs:angular
