Web App UI Skill
Use this specialist for product UI surfaces: dashboards, admin tools, internal workflows, CRM screens, settings, data tables, and state-heavy app screens.
Operating Modes
build: create or refactor app UI.audit: review an existing app screen and produce a fix brief.state-coverage: inspect loading, empty, error, disabled, focus, selected, submitting, and success states.verify: run available local evidence checks and report gaps.
Required Workflow
- Read references/dashboard-patterns.md for product UI layout decisions.
- Read references/state-model.md before changing app flows or components.
- Use assets/state-matrix.template.md and assets/implementation-report.template.md when a stable output artifact is useful.
- Use
../../shared/privacy-policy.md before any external service or screenshot handling.
- Use
../../shared/visual-verification.md for material UI changes.
- If source files are available, run scripts/check_state_coverage.ts or report why it was skipped.
- If a URL is available, run scripts/visual_smoke_test.mjs or report why it was skipped.
- Return concise implementation notes with
Ran, Skipped, Planned, and Manual.
Design Doctrine
- Prioritize scanning, comparison, and repeated action over marketing composition.
- Use compact headings, stable grids, predictable navigation, and explicit state handling.
- Keep cards for repeated items, modals, and genuinely framed tools.
- Do not add decorative hero sections, nested cards, one-note palettes, or viewport-scaled typography.
- Buttons, controls, and tables must have stable dimensions and readable labels.
Tool Contracts
- State coverage:
node scripts/check_state_coverage.ts --root "$PROJECT_ROOT" --out reports/state-coverage.json.
- Visual smoke:
node scripts/visual_smoke_test.mjs --url "$URL" --out reports/visual-smoke.
- Optional cloud generation is never default. It requires explicit approval and a data-transfer note.
Validation
python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/webapp-ui-skill
python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/webapp-ui-skill
Output Shape
Surface:
Primary workflow:
State coverage:
Ran:
Skipped:
Manual findings:
Files changed or proposed:
Verification required:
Risks:
1---2name: webapp-ui-skill3description: Build, refactor, audit, and validate dense web application UI. Use this skill whenever the user asks for SaaS dashboards, admin panels, CRM screens, internal tools, tables, filters, settings flows, data-heavy workflows, empty/loading/error states, responsive app screens, accessibility fixes, or product UI implementation where hierarchy, state coverage, keyboard behavior, and visual verification matter. Do not use for landing pages unless the task is actually an app surface.4---56# Web App UI Skill78Use this specialist for product UI surfaces: dashboards, admin tools, internal workflows, CRM screens, settings, data tables, and state-heavy app screens.910## Operating Modes1112- `build`: create or refactor app UI.13- `audit`: review an existing app screen and produce a fix brief.14- `state-coverage`: inspect loading, empty, error, disabled, focus, selected, submitting, and success states.15- `verify`: run available local evidence checks and report gaps.1617## Required Workflow18191. Read [references/dashboard-patterns.md](references/dashboard-patterns.md) for product UI layout decisions.202. Read [references/state-model.md](references/state-model.md) before changing app flows or components.213. Use [assets/state-matrix.template.md](assets/state-matrix.template.md) and [assets/implementation-report.template.md](assets/implementation-report.template.md) when a stable output artifact is useful.224. Use `../../shared/privacy-policy.md` before any external service or screenshot handling.235. Use `../../shared/visual-verification.md` for material UI changes.246. If source files are available, run [scripts/check_state_coverage.ts](scripts/check_state_coverage.ts) or report why it was skipped.257. If a URL is available, run [scripts/visual_smoke_test.mjs](scripts/visual_smoke_test.mjs) or report why it was skipped.268. Return concise implementation notes with `Ran`, `Skipped`, `Planned`, and `Manual`.2728## Design Doctrine2930- Prioritize scanning, comparison, and repeated action over marketing composition.31- Use compact headings, stable grids, predictable navigation, and explicit state handling.32- Keep cards for repeated items, modals, and genuinely framed tools.33- Do not add decorative hero sections, nested cards, one-note palettes, or viewport-scaled typography.34- Buttons, controls, and tables must have stable dimensions and readable labels.3536## Tool Contracts3738- State coverage: `node scripts/check_state_coverage.ts --root "$PROJECT_ROOT" --out reports/state-coverage.json`.39- Visual smoke: `node scripts/visual_smoke_test.mjs --url "$URL" --out reports/visual-smoke`.40- Optional cloud generation is never default. It requires explicit approval and a data-transfer note.4142## Validation4344```bash45python3 $CODEX_SKILLS_DIR/.system/skill-creator/scripts/quick_validate.py $CODEX_SKILLS_DIR/webapp-ui-skill46python3 $CODEX_SKILLS_DIR/senior-skill-architect/scripts/lint_production_skill.py $CODEX_SKILLS_DIR/webapp-ui-skill47```4849## Output Shape5051```text52Surface:53Primary workflow:54State coverage:55Ran:56Skipped:57Manual findings:58Files changed or proposed:59Verification required:60Risks:61```
sergekostenchuk