How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill webapp-ui-skillBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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.mdbefore any external service or screenshot handling. - Use
../../shared/visual-verification.mdfor 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, andManual.
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
bash
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-skillOutput Shape
text
Surface:
Primary workflow:
State coverage:
Ran:
Skipped:
Manual findings:
Files changed or proposed:
Verification required:
Risks:
