Gate 6 of frontend development cycle - ensures Core Web Vitals compliance, Lighthouse performance score > 90, and bundle size within budget.
npx claudepluginhub lerianstudio/ringThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Ensure all frontend pages meet Core Web Vitals thresholds, achieve Lighthouse Performance > 90, maintain bundle size within budget, and minimize client component usage.
Core principle: Performance is a feature. Users on slow devices and connections deserve a fast experience. Performance budgets are enforced, not suggested.
<block_condition>
This skill ORCHESTRATES. Frontend QA Analyst Agent (performance mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Agent | Run Lighthouse, measure CWV, analyze bundles, audit components |
MANDATORY: Load testing-performance.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/frontend/testing-performance.md </fetch_required>
REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
OPTIONAL INPUT:
- performance_baseline: [previous metrics for comparison]
- gate5_handoff: [full Gate 5 output]
if any REQUIRED input is missing:
→ STOP and report: "Missing required input: [field]"
Task tool:
subagent_type: "ring:qa-analyst-frontend"
prompt: |
**MODE:** PERFORMANCE TESTING (Gate 6)
**Standards:** Load testing-performance.md
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- Baseline: {performance_baseline or "N/A"}
**Requirements:**
1. Measure Core Web Vitals (LCP, CLS, INP) on all affected pages
2. Run Lighthouse audit (Performance score > 90)
3. Analyze bundle size change vs baseline
4. Audit 'use client' usage (should be < 40% of components)
5. Detect performance anti-patterns (bare <img>, useEffect for fetching, etc.)
6. Verify sindarian-ui imports are tree-shakeable
**Output Sections Required:**
- ## Performance Testing Summary
- ## Core Web Vitals Report
- ## Handoff to Next Gate
Parse agent output:
if "Status: PASS" in output:
→ Gate 6 PASSED
→ Return success with metrics
if "Status: FAIL" in output:
→ Dispatch fix to implementation agent (ring:frontend-engineer)
→ Re-run performance tests (max 3 iterations)
→ If still failing: ESCALATE to user
## Performance Testing Summary
**Status:** {PASS|FAIL}
**LCP:** {value}s (< 2.5s)
**CLS:** {value} (< 0.1)
**INP:** {value}ms (< 200ms)
**Lighthouse:** {score} (> 90)
**Bundle Change:** {+X%} (< 10%)
## Core Web Vitals Report
| Page | LCP | CLS | INP | Status |
|------|-----|-----|-----|--------|
| {page} | {value} | {value} | {value} | {PASS|FAIL} |
## Bundle Analysis
| Metric | Current | Baseline | Change | Status |
|--------|---------|----------|--------|--------|
| Total JS (gzipped) | {size} | {size} | {change}% | {PASS|FAIL} |
## Server Component Audit
| Metric | Value |
|--------|-------|
| Total .tsx files | {count} |
| Client components | {count} |
| Client ratio | {percent}% (< 40%) |
## Anti-Pattern Detection
| Pattern | Occurrences | Status |
|---------|-------------|--------|
| Bare <img> | {count} | {PASS|FAIL} |
| useEffect for fetching | {count} | {PASS|FAIL} |
| Wildcard sindarian imports | {count} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 7 (Code Review): {YES|NO}
- Iterations: {count}
| Severity | Criteria | Examples |
|---|---|---|
| CRITICAL | Core Web Vitals fail, page unusable | LCP > 4s, CLS > 0.25, INP > 500ms |
| HIGH | Threshold violations, major regressions | Lighthouse < 90, bundle +20%, LCP > 2.5s |
| MEDIUM | Minor threshold concerns, optimization opportunities | Client ratio > 40%, bare img tags |
| LOW | Best practices, minor optimizations | Code splitting suggestions, cache improvements |
Report all severities. CRITICAL = immediate fix (UX broken). HIGH = fix before gate pass. MEDIUM = fix in iteration. LOW = document.
See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "Works fine on my machine" | Your machine ≠ user's device. Measure objectively. | Run Lighthouse |
| "We'll optimize later" | Performance debt compounds. Fix during development. | Meet thresholds now |
| "Bundle size doesn't matter" | Mobile 3G users exist. Every KB matters. | Stay within budget |
| "Everything needs use client" | Server components reduce JS. Audit first. | Minimize client components |
| "next/image is too complex" | next/image gives free optimization. Always use it. | Use next/image |
| "Lighthouse 85 is close enough" | 90 is the threshold. 85 = FAIL. | Optimize to 90+ |
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.