القائمة
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".
التثبيت باستخدام 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 | data-fetching |
| description | 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". |
Separate server state from UI chrome. Every remote surface needs loading / error / empty / success — with retry where useful. Parity with Conventions States line.
useEffect fetch| State | Required UX |
|---|---|
| Loading | Skeleton/placeholder — not a blank hole (prefer local to the widget) |
| Error | User-safe message + Retry (or clear next step) |
| Empty | Real empty copy + optional action (not Lorem) |
| Success | Render data; don’t leave stale error UI |
Also: abort/cancel on unmount when using raw fetch; don’t block the whole app shell for one panel.
ui-components; tokens + responsive-ui still applyStates: loading / empty / error covered? yesuseEffect machine; skeleton vs spinner; toast vs inline errorconsole.log only; ship success-only UI; invent off-token loading colorsPatterns: references/data-fetching.md.
State org: references/architecture.md.
Ship gate: references/compliance-gates.md (States).