القائمة
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.
التثبيت باستخدام 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.
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 | web-performance |
| description | 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. |
Measure-first performance for user-facing UI. Hit Core Web Vitals targets; prefer compositor-friendly work and sensible loading.
/design audits| Metric | Target | Measures |
|---|---|---|
| LCP | ≤ 2.5s | Largest visible content element render time |
| INP | ≤ 200ms | Interaction to visual response time |
| CLS | ≤ 0.1 | Unexpected layout shift score |
Is it a photo or complex image?
YES → Is AVIF supported by your target browsers?
YES → AVIF (smallest, best quality)
NO → WebP (wide support, good compression)
NO → Is it an icon or simple graphic?
YES → SVG (scalable, tiny) or Reicon
NO → Is transparency needed?
YES → WebP or PNG (WebP preferred)
NO → WebP or JPEG (WebP preferred)
Is the font critical for LCP text?
YES → Preload + font-display: swap
<link rel="preload" as="font" href="/font.woff2" type="font/woff2" crossorigin>
NO → Is it a secondary/accent font?
YES → font-display: swap (load async)
NO → Is it used only on specific pages?
YES → Lazy load via JS / @font-face on that page only
NO → font-display: optional (may skip if slow)
What is the LCP element?
IMAGE → fetchpriority="high" + preload + NO lazy-load + width/height set
TEXT → Preload the font + inline critical CSS for that heading
VIDEO → Preload poster image + fetchpriority="high" on poster
Is there a render-blocking script above LCP?
YES → Move to bottom / add defer / async
NO → Good
<link rel="preload">)fetchpriority="high" on LCP image — never lazy-load itfont-display: swap and woff2 format<picture> fallbacklazy() + Suspense)Recipe — optimal LCP image:
<!-- Preload in <head> -->
<link rel="preload" as="image" href="/hero.webp" type="image/webp">
<!-- In body — no lazy, explicit dimensions -->
<img
src="/hero.webp"
alt="Hero description"
width="1200" height="600"
fetchpriority="high"
>
@tanstack/react-virtual or equivalenttransform / opacity / filter for compositor-friendly motioncontent-visibility: auto for off-screen sectionsRecipe — avoid layout thrashing:
// BAD: interleaved read-write
elements.forEach(el => {
const h = el.offsetHeight; // read → forces layout
el.style.height = `${h}px`; // write → invalidates layout
});
// GOOD: batch reads, then writes
const heights = elements.map(el => el.offsetHeight); // all reads
elements.forEach((el, i) => {
el.style.height = `${heights[i]}px`; // all writes
});
| Cause | Fix |
|---|---|
| Images without dimensions | Always set width + height or aspect-ratio |
| Dynamic content above fold | Reserve space with min-height or skeleton |
| Web fonts FOUT | font-display: optional for non-critical fonts |
| Late-loading ads/embeds | Fixed-size container placeholder |
| Injected banners/bars | Reserve space or use transform animation |
| Symptom | Fix |
|---|---|
| Click feels slow (>200ms) | Break long tasks — scheduler.yield() or requestIdleCallback |
| Typing lag in inputs | Debounce heavy handlers (300ms); keep onChange lightweight |
| Scroll jank | Use passive event listeners; avoid heavy scroll handlers |
| Heavy computation on interaction | Move to Web Worker or defer with requestIdleCallback |
Recipe — break long task:
async function processItems(items) {
for (const item of items) {
processItem(item);
// Yield to let browser handle pending interactions
if (navigator.scheduling?.isInputPending?.()) {
await scheduler.yield();
}
}
}
max-age=31536000, immutable)no-cache (always revalidate)no-store for private data| Resource | Budget |
|---|---|
| Total JavaScript | < 200KB gzipped |
| Total CSS | < 50KB gzipped |
| Total Images (above fold) | < 500KB |
| Total Fonts | < 100KB |
| First Contentful Paint | < 1.8s |
| Largest Contentful Paint | < 2.5s |
| Total Blocking Time | < 200ms |
| Cumulative Layout Shift | < 0.1 |
fetchpriority="high", preload)transform/opacity)Full guide: references/performance.md.