Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

create-playground-page

Estrellas26

Forks36

Actualizado15 de julio de 2026 a las 23:11

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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

GovAlta

GovAlta/ui-components

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Analistas de garantía de calidad de software y probadoresOcupaciones informáticas y matemáticas·SOC 15-1253

SKILL.md

readonly

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.ts
- bug{N}.component.html
- bug{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

Más de este repositorio

mismo repositorio

using-goa-design-system

GovAlta/ui-components

Use when building or scoping a screen, page, or feature with the Government of Alberta Design System starting from a user-facing intent ("worker tool for case management", "public form for licence renewal", "error page for payment failure") rather than from a specific component or token.

2026-07-2026

create-component

GovAlta/ui-components

Create a new design system component

2026-07-1526

ds-evolution-reference

GovAlta/ui-components

Use to answer questions about the Government of Alberta Design system evolution, including approved terminology, the migration timeline and support windows, version changes for Web components, Angular, and React, and what the change means for product teams. Source of truth for evolution terms, FAQs, and glossary definitions.

2026-07-1526

open-pr

GovAlta/ui-components

Use when opening a pull request for a fix or feature in GovAlta/ui-components. Covers rebasing onto latest dev (to avoid stale-branch CI failures), filling the PR template, the draft-and-do-not-mark-ready convention, and commit and PR message style.

2026-07-1526

write-design-system-content

GovAlta/ui-components

Use when writing or revising longer-form content for the Design system website, including component and pattern documentation, usage guidance, how-to steps, release notes, and FAQ-style explanations. Enforces plain-language voice, mechanics, inclusive language, and approved terminology. Do not use for in-component microcopy or code.

2026-07-1526

write-issue

GovAlta/ui-components

Use when filing a new GitHub issue for the Design system (bug, feature, or task). Covers the title and body template, the required priority and component labels, and setting the issue Type via GraphQL rather than a label. Do not use for writing PR descriptions.

2026-07-1526

Skill: Create a PR playground page

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.ts
bug{N}.component.html
bug{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