메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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).
SOC 직업 분류 기준
| name | anti-ai-slop |
| description | 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. |
AI-generated UI has recognizable tells. Scan for them before shipping; fix with tokens and purpose-driven layout.
/ui build/design auditsreferences/anti-patterns.md)| Pattern | Detection | Fix |
|---|---|---|
| Purple/indigo defaults | #7c3aed, bg-purple-*, text-indigo-* | Token colors only (via decision tree — never invent purple token file) |
| Excessive gradients | bg-gradient-to-*, linear-gradient | Flat token colors |
| Rounded everything | rounded-2xl / rounded-3xl everywhere | Token --radius |
| Generic hero | Template layout, no content connection | Content-first layout |
| Hero-only landing | Plasma/hero + thin footer, no section stack | marketing-landing recipe (logo cloud → features → … → CTA) |
| Block-registry default | “Install @tailark / shadcn blocks” as first answer | Hand-roll from landing-sections.md (same as motion vocabulary) |
| Lorem ipsum | Placeholder copy | Realistic content |
| Oversized padding | p-8/p-12 on everything | Spacing hierarchy |
| Stock card grids | Uniform grids, no priority | Purpose-driven layout |
| Shadow-heavy | Layered competing shadows | Subtle or no shadow |
| Loud nav “active bar” | Thick left/right accent stripe on selected items | Quiet fill + weight/contrast only |
| Theme under sidebar | Labeled Dark mode in sidebar footer | Topbar moon/sun icon |
| Header account meta | Always-on name + email in topbar | Avatar → account menu |
Native filter <select> | OS chrome / cramped caret on dashboards | Custom select / combobox |
| Decorative motion spam | Hero+3D+Text+Spotlight+Carousel stacked; typewriter on forms | ≤2 families / ≤2–3 motions; see motion-families.md |
Full catalog and fixes: references/anti-patterns.md.
Token source: references/token-preset-scoring.md (Plasma/neutral-purple only with brand cue).
Motion vocabulary: references/motion-families.md.