메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.