Menu
Frontend structure — feature folders, state ownership, server/client boundary, when not to add a global store. Use for "arsitektur FE", folder structure, refactor large UI, state management choice, or modularizing an app.
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 | fe-architecture |
| description | Frontend structure — feature folders, state ownership, server/client boundary, when not to add a global store. Use for "arsitektur FE", folder structure, refactor large UI, state management choice, or modularizing an app. |
Keep UI modular and owned. Prefer local state and server cache over inventing a global store.
| Decision | Default |
|---|---|
| Folders | Feature cohesion (features/x/) over dumping everything in components/ |
| Remote data | Query/loader (data-fetching) — not a global store of server entities |
| URL state | Shareable filters/tabs in the URL |
| Global store | Last resort — only after local → lift → URL → server cache → context |
| File size | Split presentational files >~200 lines; colocated tests when testing |
references/fe-architecture.md + existing references/architecture.md.
