Menu
Use this to imrpove the frontend of our webapp based on the user input.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Break a plan, spec, or PRD into independently-grabbable issues on the project issue tracker using tracer-bullet vertical slices. Use when user wants to convert a plan into issues, create implementation tickets, or break down work into issues.
Turn the current conversation context into a PRD and publish it to the project issue tracker. Use when user wants to create a PRD from the current context.
Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.
Sets up an `## Agent skills` block in AGENTS.md/CLAUDE.md and `docs/agents/` so the engineering skills know this repo's issue tracker (GitHub or local markdown), triage label vocabulary, and domain doc layout. Run before first use of `to-issues`, `to-prd`, `triage`, `diagnose`, `tdd`, `improve-codebase-architecture`, or `zoom-out` — or if those skills appear to be missing context about the issue tracker, triage labels, or domain docs.
| name | improve-frontend |
| description | Use this to imrpove the frontend of our webapp based on the user input. |
| disable-model-invocation | true |
Start the API server with
uv run uvicorn src.api.app:app --host 127.0.0.1 --port 6789 --reload
If the port is in use, backend might already be running. See if you can already access the frontend.
http://127.0.0.1:6789 will serve the frontend with no caching. Just rebuild the webapp after you made changes to see the changes in the frontend.
Open the app using playwright skill to inspect. Always run playwright with --headed so that the user can follow your actions.
When saving files using playwright, for example when you take screenshots, put them into the .playwright-cli/ folder in the root of the project.
For all changes, consider whether they can be made globally in the app in components or global stylesheet. Try to keep individual changes on views minimal if possible. Don't be afraid to refactor the frontend.
See if you can identify components that can be reused across the app. Extract these to reusable components. DRY.
Same with TypeScript types and code. Try to keep the code DRY and reusable.
Use global styles and variables as much as possible. Keep the styling consistent across the app.
Have a look at the examples mentioned in ./docs/spec/webapp.md for styling and design guidelines.
Improve the frontend. Don't touch the backend.
