القائمة
Test user-facing UI with TDD, component tests, a11y checks, and critical-path coverage. Use when writing or fixing UI tests, verifying loading/error/empty states, or when the user mentions test/TDD/coverage/regresi — including natural language, not only /test-ui.
التثبيت باستخدام 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 | frontend-testing |
| description | Test user-facing UI with TDD, component tests, a11y checks, and critical-path coverage. Use when writing or fixing UI tests, verifying loading/error/empty states, or when the user mentions test/TDD/coverage/regresi — including natural language, not only /test-ui. |
Prove UI behavior with a lean pyramid: mostly unit/component tests, some integration, few E2E. Prefer Testing Library queries that mirror how users interact. Include accessibility checks for interactive UI.
/test-ui or explicit test requests/ui when the user wants TDD or coverage for a componentChoose level
TDD when changing behavior
Query priority (Testing Library)
Must cover for interactive UI
Accessibility in tests
Visual regression (optional)
test-id queriesFull guide: references/testing.md. Robustness ideas also in references/anti-patterns.md.