agentsclimarketplace

Performance

Skill plugin87/ux-ui-agent-skills/.claude/skills/performance

Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.

Install
npx -y skills add plugin87/ux-ui-agent-skills --skill performance

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

SKILL.md

1.6 KB, as published. Nobody here has run it

Skill: Performance

Make the UI fast and stable. Treat performance as an accessibility concern — slow/janky UIs fail low-end devices first.

Steps

  1. Read workflows/performance.md (Core Web Vitals targets, loading strategy, layout-shift, animation perf, design-system runtime cost).
  2. Diagnose against budgets: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Measure on a mid-tier mobile profile (throttle slow 4G + 4× CPU).
  3. Loading: render above-fold first (SSR/Server Components), code-split by route + heavy widget, lazy-load below-fold/behind-interaction (Astro islands / Qwik), preload one critical font weight, modern responsive images.
  4. Kill layout shift: size skeletons to final dimensions, reserve media space via aspect-ratio (tokens/sizing.json), never inject content above existing.
  5. Animation: only transform/opacity, will-change sparingly, 100–300ms (tokens/motion.json), honor prefers-reduced-motion. Prefer CSS state styling over JS for low INP; tree-shake/per-component imports.

Verification (definition of done)

  • Lighthouse / field data meets LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 on mid-tier mobile.
  • First interaction stays responsive under slow-4G + 4× CPU throttle.
  • Skeletons + media reserve space (zero CLS on load); no non-compositor animation in loops.

Gives 0 of the 12 instructions most performance cost skills give

Counted across 803 of the 1,058 authors here whose files we hold, read 2026-08-06

  • keep skill files under 500 linesin 82 of 803, across 17 files
  • use imperative form in instructionsin 81 of 803, across 10 files
  • draft assertions while test runs are in progressin 75 of 803, across 9 files
  • create two to three realistic test promptsin 74 of 803, across 8 files
  • write skill descriptions to be pushyin 72 of 803, across 7 files
  • save test cases to evals jsonin 72 of 803, across 6 files
  • ask questions about edge cases and input formatsin 71 of 803, across 6 files
  • save timing data immediately when runs completein 70 of 803, across 5 files
  • include all trigger conditions in the skill descriptionin 69 of 803, across 3 files
  • launch all test runs in a single turnin 69 of 803, across 3 files
  • capture intent before writing a skillin 67 of 803, across 1 file
  • import directly instead of barrel filesin 52 of 803, across 15 files

Said here and by no other author read

  • read the performance workflow
  • diagnose against Core Web Vitals budgets
  • measure on a mid-tier mobile profile
  • render above-fold first
  • lazy-load below-fold or behind-interaction content
  • size skeletons to final dimensions

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.