mcpField
W
webapp-ui-skill

webapp-ui-skill

github.com/sergekostenchukDesign & UI3295 installsUpdated 18w ago
Repository

About webapp-ui-skill

A specialist Agent Skill for building, auditing, and verifying product UI, with particular attention to interaction states and evidence-based checks.

Key features

  1. 01Build or refactor product UI
  2. 02Audit screens and outline fixes
  3. 03Check loading and interaction states
  4. 04Run state and visual checks
  5. 05Use privacy and design references

Use cases

  1. 01Creating a dashboard or admin interface
  2. 02Reviewing an existing product screen
  3. 03Checking UI state coverage before release

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill webapp-ui-skill

After installing, type/webapp-ui-skillin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
design-tokens.json
implementation-report.template.md
state-matrix.template.md
evals/
evals.json
references/
accessibility-rubric.md
anti-patterns.md
dashboard-patterns.md
form-patterns.md
state-model.md
scripts/
check_state_coverage.ts
visual_smoke_test.mjs

Details

From the project README

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

  1. Read references/dashboard-patterns.md for product UI layout decisions.
  2. Read references/state-model.md before changing app flows or components.
  3. Use assets/state-matrix.template.md and assets/implementation-report.template.md when a stable output artifact is useful.
  4. Use ../../shared/privacy-policy.md before any external service or screenshot handling.
  5. Use ../../shared/visual-verification.md for material UI changes.
  6. If source files are available, run scripts/check_state_coverage.ts or report why it was skipped.
  7. If a URL is available, run scripts/visual_smoke_test.mjs or report why it was skipped.
  8. 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:

Comments

Markdown supported