القائمة
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.
التثبيت باستخدام 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 | design-fidelity |
| description | 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. |
When a design source exists (Figma, screenshot, Spec), compare build to source and close gaps — without inventing a parallel visual system. Prefer project tokens over copying raw hex from the file.
/design audit when a reference image or file is availablefrontend-judgment only)responsive-ui) before pixel nits| Property | Usually OK | Fix |
|---|---|---|
| Spacing | ±4px on dense chrome | >8px section rhythm drift |
| Type size | Nearest token step | Wrong weight / wrong role (title vs body) |
| Radius | Nearest token | Mixing 3+ one-off radii |
| Color | Token semantic match | Off-token brand / purple slop |
| Alignment | Optical nudge | Broken grid / uneven columns |
Never claim “100% pixel perfect” without side-by-side evidence.
Full compare workflow: references/design-fidelity.md.
Layout map: references/responsive.md (Auto Layout ↔ CSS).
Audit persona: design-reviewer.