frontend-expert

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).

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.

Loop UI work until quality gates pass — judge/build, test, audit, fix, repeat. Use when the user wants polished UI, "rapihin sampai bagus", polish until audit passes, fix Critical/High design findings, or /polish. Orchestrates frontend-judgment, design-tokens, ui-components, responsive-ui, motion, anti-ai-slop, ui-feel, accessibility, frontend-testing, and design-reviewer scorecard. Do not use for one-shot tiny tweaks unless the user asked to keep iterating.

Marketing / SaaS landing page structure — section stack (hero, logo cloud, features, gallery, testimonials, CTA, footer), not a lone hero. Use when building or auditing landing pages, marketing sites, "landing page", "homepage marketing", or when the page feels incomplete after only a hero. Hand-roll sections with pack tokens/craft — never default to installing a third-party block registry. Pair with motion, fe-seo, anti-ai-slop.

Frontend Expert suite for shipping product web UI — judgment, tokens, responsive, motion vocabulary, anti-AI-slop, shell chrome, forms/data, a11y, testing, and polish loop. Use when building or auditing dashboards, settings, SaaS surfaces, or when the user asks for Frontend Expert / design-system-enforcer quality. Chat-first: map intent to the suite skills; do not wait for slash commands.

Senior frontend judgment before building UI — offer 2–3 approaches on distinct design axes (hierarchy, layout, density, interaction, expression) with tradeoffs; max 1–2 clarifying questions; optional inspiration (Linear/Stripe/…). Use at the start of non-trivial UI work and whenever direction is unclear. Skip for obvious bugfixes, single-token tweaks, or “just implement”. Runs before domain skills. Inspired by design-lab exploration patterns.

App shell, navigation, layouts, breadcrumbs, deep links, 404/empty routes. Use when building dashboard shells, side nav, top nav, multi-page flows, "routing", "layout app", "404", or information architecture for web apps. Requires modern chrome: logo, topbar theme icon, avatar→account menu, custom filter selects — not a bare settings page or native OS selects.

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.

Mobile-first responsive UI for all devices (320–1440+): no horizontal scroll, 44px tap targets, drawer nav, full-width primary buttons on phone, adaptive tables/forms. REQUIRED on every user-facing page/layout build — including "mobile", "responsive", "tablet", burger menu, or /ui /polish. Report Responsive in Conventions check.

Build composable UI with loading/error/empty states, Reicon icons by default, mobile-first layout, and clean composition. Use whenever implementing or modifying pages, screens, components, forms, dialogs, tables, or navigation — including "buat component", "bikin form", "layout dashboard". Must report Conventions check (tokens/icons/states) before done — see compliance-gates.

Purposeful UI motion by family/pattern — shell defaults (fade, drawer, press) plus marketing vocabulary (reveal, scroll, text, carousel, hero, …). Hand-roll CSS/Motion/GSAP from named patterns. Use for animation requests, landings, marquees, parallax, text reveal, and light defaults on /ui shells — not token-only tweaks.

Async UI for remote data — loading, error, retry, empty, stale, cache boundaries. Use when building lists, detail pages, dashboards fed by API, React Query/SWR, fetch/loaders, or "ambil data", "loading state API", "retry".

Spec vs implementation fidelity — Figma/Dev Mode/screenshot compare, spacing tolerance, token remap, close-enough rules. Use when matching a design file, "pixel perfect", "mirip Figma", design QA, or /design with a provided mock.

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.

Frontend DevTools audit workflow — Lighthouse/CWV, a11y (axe), network/layout, when checks are MUST vs optional. Use for /test-ui deep passes, "audit performance", "cek Lighthouse", "axe", or verifying UI before ship with tooling evidence.

Technical SEO for web apps — title/meta, OG, semantics, indexable content, CWV overlap. Use for landing pages, marketing routes, "SEO", "meta tags", "Open Graph", or making app routes discoverable.

Frontend observability — Sentry error tracking, CWV/performance monitoring, analytics, OpenTelemetry, alerting. Use when adding error boundaries, tracking production bugs, measuring LCP/INP, wiring analytics, or ops asks about monitoring/observability for a web UI — not for visual design polish.

Polish micro-details that make UI feel better — concentric radius, optical alignment, tabular nums, text-wrap, interruptible transitions, scale-on-press, hit areas, no transition:all. Use when building/reviewing UI polish, "feels off", "rapihin detail", hover/press feedback, stagger enter/exit, or after anti-ai-slop on /ui and /polish. Adapted from make-interfaces-feel-better.

Choose and apply CSS design tokens via decision tree (project system, explicit preset, Plasma hard-gate, or scored pack preset) — colors, spacing, radius, typography; no raw hex. Use whenever building or styling any user-facing UI, page, layout, component, theme, or brand look — including chats like "bikin halaman", "styling", "warna", or "design system" even if the user never types /ui.

Pure WebGL shader backgrounds via Plasma Studio (Gradient/Dither/Raymarch), Plasma.init drop-in, destroy on unmount. REQUIRED when the user asks for WebGL, shader background, plasma effect, animated canvas bg, or plasma.nusaiba.dev — do not invent Three.js heroes for backgrounds.

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.