메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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).
Detect and fix AI aesthetic anti-patterns (purple/indigo defaults, gradients, rounded-2xl everywhere, generic heroes, Lorem ipsum, shadow-heavy cards). Use whenever building, restyling, or reviewing visual UI quality — including "terlalu generik", "AI slop", "rapihin UI", or design audit requests — without requiring /design.
| name | frontend-expert |
| description | 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. |
Chat-first frontend UI quality suite for shipping polished, responsive, accessible web interfaces.
This is not a single skill — it's a suite of 22 skills organized into pillars that auto-load based on what you ask. You never need to type a slash command; just describe what you want to build or fix.
| Pillar | Skills | When it loads |
|---|---|---|
| UI Quality | judgment, tokens, components, anti-slop, ui-feel, a11y, testing, quality-loop, motion, webgl, monitoring, marketing-landing, design-fidelity, fe-devtools | Any UI build, audit, or polish |
| Responsive (MUST) | responsive-ui | Every layout — 320/768/1024/1440 verified |
| Ship FE | app-shell-routing, data-fetching, forms-validation | Shell/nav, API data, forms |
| Depth | fe-architecture, fe-seo | Folder structure, meta/OG/SEO |
Full pillar map: docs/pillars.md.
See AGENTS.md for the full intent map.
Colors, spacing, and radius come from a decision tree — not vibes. Custom project system → explicit preset → Plasma hard-gate → scored preset (max 24 points). 9 pre-built CSS token files in tokens/.
Detail: references/token-preset-scoring.md.
Detects and fixes recognizable AI aesthetic patterns: purple/indigo defaults, Lorem ipsum, gradient spam, rounded-everything, shadow-heavy cards, hero-only landings.
Detail: references/anti-patterns.md.
12 families, 144 named patterns. Choose by name, hand-roll implementation. No third-party registry installs by default. Shell gets light defaults; marketing picks ≤2 families.
Detail: references/motion-families.md.
Ship checklist covering 12+ dimensions. Every UI build reports a conventions check before DONE.
Detail: references/compliance-gates.md.
BUILD → TEST → AUDIT → FIX cycle with max 3 iterations. Runs when you say "sampai bagus" or /polish.
Skill: skills/ui-quality-loop.
Reverse-lookup for UI/design terms — describe something loosely and get the proper name. "Floating card over blur" → Glassmorphism. "Menu from the side" → Drawer/Sheet.
Skill: skills/design-vocabulary.
Reverse-lookup for frontend engineering patterns — "cache so it doesn't re-fetch" → SWR/stale-while-revalidate. "Render only visible list items" → Virtualization.
Skill: skills/engineering-vocabulary.
AGENTS.mddocs/pillars.mddocs/pack-layers.mdreferences/README.mdtokens/README.mdexample/index.html| Command | Purpose |
|---|---|
/ui | Build UI (auto-loads build chain) |
/design or /audit | Audit existing UI |
/test-ui | Test with a11y + devtools |
/polish | Quality loop until gates pass |