Menu
Accessible forms, field/form errors, submit pending, wizards, progressive disclosure. Use when building or fixing forms, login, settings, checkout, filters, "validasi", "form error", or multi-step flows.
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
Chat-first frontend UI quality suite — 22 skills across UI Quality, Responsive, Ship FE, and Depth pillars. Token decision tree, compliance gates, anti-AI-slop, motion vocabulary (12 families), marketing landing recipes, and quality loop. Auto-loads on any UI/build/audit/polish request — no slash commands needed.
Enforce WCAG 2.1 AA (keyboard, ARIA, focus, contrast, semantic HTML). Use for accessibility work, pre-ship UI checks, and as a light pass on every UI build or design review — including "a11y", "keyboard", "screen reader", or shipping user-facing changes, without requiring a slash command.
Name a design or UI concept from a loose description. Reverse-lookup for design terms — user describes something vaguely ("card floating over blur", "zig-zag layout"), skill returns the proper name + brief definition. Use when the user uses informal language for a UI concept, or when you need the correct term to search references or communicate precisely.
Name a frontend engineering concept from a loose description. Reverse-lookup for FE technical terms — user describes a pattern informally ("supaya gak fetch ulang", "render cuma yang keliatan"), skill returns the proper name + brief definition. Use when the user uses informal language for a technical concept, or when you need the correct term to pick the right implementation.
Optimize frontend Core Web Vitals (LCP, INP, CLS) and loading/rendering/network. Use when the UI feels slow, images/fonts/bundles need work, or during design audits that touch performance — phrases like "lemot", "optimize", "LCP", or "Core Web Vitals" without requiring a slash command.
Write new skill files for the Frontend Expert pack following conventions. Use when the user wants to add a new skill, extend the pack, or says "make this a skill", "buat skill baru", or "tambah skill". Documents the pack's SKILL.md structure, frontmatter format, checklist pattern, and integration points (AGENTS.md, plugin.json, compliance-gates).
| name | forms-validation |
| description | Accessible forms, field/form errors, submit pending, wizards, progressive disclosure. Use when building or fixing forms, login, settings, checkout, filters, "validasi", "form error", or multi-step flows. |
Forms must be keyboard-accessible, show clear errors, and never lose user input on soft failures.
| Rule | Detail |
|---|---|
| Labels | Every control has a visible label or aria-label; htmlFor/id associated |
| Errors | Text + association (aria-describedby / equivalent) — not border-only |
| Submit | Pending/disabled while in flight; values kept on 4xx/5xx |
| Focus | On submit failure, move focus to first invalid field |
| Mobile | Primary submit width: 100% below 768; inputs font-size ≥ 16px |
| No Lorem | Real hint/error copy |
| Selects | Product filters / status pickers: prefer custom select (see ui-components) — not bare native OS chrome |
aria-label); associate with htmlFor / idresponsive-ui)data-fetching for retry/toast; never wipe the form on soft failalert() for validationaria-describedby / equivalent)references/forms-validation.md. A11y: accessibility. Responsive: responsive-ui.