From bee-dev-team
Gate 6 of the Vue.js frontend development cycle - ensures Core Web Vitals compliance, Lighthouse performance score > 90, and bundle size within budget. Covers Nuxt 3-specific optimizations including useAsyncData, useLazyFetch, and NuxtImg.
npx claudepluginhub luanrodrigues/ia-frmwrk --plugin bee-dev-teamThis skill uses the workspace's default tool permissions.
Ensure all Vue.js / Nuxt 3 frontend pages meet **Core Web Vitals** thresholds, achieve **Lighthouse Performance > 90**, maintain **bundle size within budget**, and use Nuxt 3 data-fetching composables correctly for optimal performance.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Ensure all Vue.js / Nuxt 3 frontend pages meet Core Web Vitals thresholds, achieve Lighthouse Performance > 90, maintain bundle size within budget, and use Nuxt 3 data-fetching composables correctly for optimal performance.
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. Vue.js Frontend QA Analyst Agent (performance mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Vue.js Agent | Run Lighthouse, measure CWV, analyze bundles, audit components |
MANDATORY: Load testing-performance.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/luanrodrigues/ia-frmwrk/master/dev-team/docs/standards/frontend-vuejs/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: "bee:qa-analyst-frontend-vuejs"
model: "opus"
prompt: |
**MODE:** PERFORMANCE TESTING (Gate 6)
**Standards:** Load testing-performance.md (frontend-vuejs)
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- Baseline: {performance_baseline or "N/A"}
- Framework: Vue 3 / Nuxt 3
**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 client-side only code (components with <ClientOnly> or .client.vue) - should be < 40% of components
5. Detect performance anti-patterns (bare <img>, synchronous data fetching on client, blocking watch())
6. Verify sindarian-vue imports are tree-shakeable
**Nuxt 3 / Vue-Specific Performance Checks:**
- useAsyncData() used for server-side data fetching on page components (not client fetch())
- useLazyFetch() or useLazyAsyncData() used for non-critical data (deferred loading)
- <NuxtImg> or <NuxtPicture> used for ALL images (never bare <img>)
- <NuxtImg> has correct sizes, format, and loading="lazy" for below-fold images
- defineAsyncComponent() used for heavy components not needed on initial render
- Pinia stores use lazy initialization where appropriate (avoid loading all store data upfront)
- v-once directive applied to static subtrees that never change
- v-memo applied to list items with expensive rendering and stable key conditions
- No synchronous heavy computation in computed() - offload to Web Workers if needed
- No unnecessary watchers (watch with { immediate: true } on large reactive objects)
- Nuxt route-level code splitting is active (automatic with pages/ directory)
- Nuxt payload de-duplication active (useState() for shared SSR state, not duplicated fetch calls)
- <TransitionGroup> used with key for list animations instead of forcing DOM re-renders
**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 (bee:frontend-engineer-vuejs)
→ 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} |
## Client Component Audit
| Metric | Value |
|--------|-------|
| Total .vue files | {count} |
| Client-only components (<ClientOnly> or .client.vue) | {count} |
| Client ratio | {percent}% (< 40%) |
## Anti-Pattern Detection
| Pattern | Occurrences | Status |
|---------|-------------|--------|
| Bare <img> (not NuxtImg) | {count} | {PASS|FAIL} |
| Client fetch() for server data | {count} | {PASS|FAIL} |
| Wildcard sindarian-vue imports | {count} | {PASS|FAIL} |
| Blocking watch() on large objects | {count} | {PASS|FAIL} |
| Missing useLazyFetch for non-critical data | {count} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 7 (Code Review): {YES|NO}
- Iterations: {count}
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 ClientOnly" | Server-rendered components reduce JS. Audit first. | Minimize client-only components |
| "NuxtImg is too complex" | NuxtImg gives free optimization. Always use it. | Use NuxtImg |
| "Lighthouse 85 is close enough" | 90 is the threshold. 85 = FAIL. | Optimize to 90+ |
| "useAsyncData is the same as fetch()" | useAsyncData runs on server, reducing client JS + waterfall. | Use useAsyncData for page data |
| "useLazyFetch complicates the code" | Deferred loading prevents blocking the initial render. | Use useLazyFetch for non-critical data |
| "v-memo is premature optimization" | v-memo prevents unnecessary re-renders in lists. Apply it. | Apply v-memo to expensive list items |