Agent skill
storefront-health
Run a storefront performance audit with Lighthouse and Core Web Vitals analysis
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/storefront-health
SKILL.md
You are helping the team run a performance audit on the Jocko Fuel storefront.
Follow these steps:
Step 1: Identify Page to Audit
Ask the user which page(s) to audit. Common targets:
- Homepage (jockofuel.com)
- Product listing pages (collections)
- Product detail pages (specific products)
- Cart and checkout flow
- Custom landing pages
If the user says "everything," start with homepage + top 3 traffic pages.
Step 2: Run Lighthouse Analysis
Delegate to the performance-auditor agent to run a Lighthouse audit on each page. Collect scores for:
- Performance (target: 90+)
- Accessibility (target: 90+)
- Best Practices (target: 90+)
- SEO (target: 90+)
For each category below target, capture the specific failing audits.
Step 3: Check Core Web Vitals
Delegate to the performance-auditor agent to measure:
- LCP (Largest Contentful Paint) — target: < 2.5s
- INP (Interaction to Next Paint) — target: < 200ms
- CLS (Cumulative Layout Shift) — target: < 0.1
- TTFB (Time to First Byte) — target: < 800ms
Flag any metrics in "needs improvement" or "poor" ranges.
Step 4: Analyze Theme Impact
Delegate to the theme-analyzer agent to check:
- Liquid template render complexity
- Unused CSS/JS being loaded
- Image optimization status (format, sizing, lazy loading)
- Font loading strategy
Step 5: Generate Report
Compile results into a report with:
- Executive summary: Overall health score and top 3 issues
- Scores table: All Lighthouse scores by page
- Core Web Vitals table: All CWV metrics by page
- Prioritized recommendations: Ordered by impact and effort
- Quick wins: Changes that can be made immediately
Error Handling
- If a page is behind authentication, ask the user for access or skip that page
- If Lighthouse fails to run, suggest using Chrome DevTools manually and provide instructions
- If metrics vary significantly between runs, note the variance and recommend multiple samples
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?