From typescript-ui
Use this skill when the user asks to optimize UI performance — Core Web Vitals (LCP, INP, CLS), bundle size, rendering performance, font loading, image optimization, or React-specific patterns (compiler, RSC, Suspense, hydration). Triggers: "optimize my UI", "make it faster", "fix LCP", "reduce bundle size", "optimize for Core Web Vitals", "performance audit", "speed up the page", "reduce CLS", "fix INP". Dispatches the typescript-ui:ui-perf-engineer Opus agent which measures first (Lighthouse / tsc / bundle analysis if available), then produces severity-tagged findings with estimated metric impact and concrete code fixes.
npx claudepluginhub themizeguy/typescript-ui-publicThis skill is limited to using the following tools:
You are coordinating a performance review and optimization of UI code. Your job is to gather context, dispatch the perf engineer, and present actionable results.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Builds 3-5 year financial models for startups with cohort revenue projections, cost structures, cash flow, headcount plans, burn rate, runway, and scenario analysis.
You are coordinating a performance review and optimization of UI code. Your job is to gather context, dispatch the perf engineer, and present actionable results.
Same resolution rules as typescript-review-ui:
| Argument | Meaning |
|---|---|
(empty) or diff | Uncommitted + staged, filtered to UI files |
<file> / <directory> | Specific target |
all | Entire project |
Include: components, pages, layouts, styles, configs (next.config, tailwind.config, package.json). Exclude: node_modules, dist, build, .next.
lighthouserc.*, .lighthouseci/, web-vitals, @vercel/analytics.@next/bundle-analyzer or rollup-plugin-visualizer is installed.SCOPE — review these files for performance:
<absolute path list>
PROJECT CONTEXT:
- Root: <absolute path>
- Framework: <react/next/vite/remix/astro>
- React version: <version>
- Bundler: <webpack/vite/turbopack>
- Tailwind: <v3/v4/none>
- Image optimization: <next/image / manual / none>
- Font loading: <next/font / manual preload / Google Fonts CDN / none>
- Perf tooling installed: <web-vitals / vercel-analytics / lighthouse-ci / none>
- Bundle analyzer: <available / not installed>
PLUGIN REFERENCES: ${CLAUDE_PLUGIN_ROOT}/references/performance/ (5 files). Read them BEFORE reviewing.
Also read: ${CLAUDE_PLUGIN_ROOT}/references/design/05-tailwind-v4.md for Tailwind v4 perf.
TASK:
1. Read all files in scope.
2. Read the 5 performance reference files.
3. If available: run `tsc --noEmit`, build command, and Lighthouse.
4. Identify the likely LCP element per page.
5. Review all 12 perf angles per your system prompt.
6. Quantify estimated impact for each finding ("+800ms LCP", "+0.15 CLS", "+120KB JS").
7. Output in strict finding format with impact line.
8. Severity: CRITICAL (CWV threshold breach), HIGH (significant cost), MEDIUM (material), LOW (minor), NIT (micro).
9. End with perf budget check table + raw tooling output.
HARD RULES:
- Measure first. Run tooling if available.
- Quantify impact. "This is slow" → "This adds ~Xms to Y."
- Show the fix. Current → reworked code.
- Cite references.
- No AI slop.
subagent_type: "typescript-ui:ui-perf-engineer"description: "Perf review of N files"Apply any of these optimizations? Tell me which:
- "all CRITICAL" / "all CRITICAL and HIGH"
- "finding 3 and 7"
- "everything in <filename>"
- "skip"
tsc --noEmit to verify fixes compiletypescript-review-ui if design quality wasn't checked yet