storefront-health

Run a storefront performance audit with Lighthouse and Core Web Vitals analysis

16 stars

Best use case

storefront-health is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Run a storefront performance audit with Lighthouse and Core Web Vitals analysis

Teams using storefront-health should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/storefront-health/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/development/storefront-health/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/storefront-health/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How storefront-health Compares

Feature / Agentstorefront-healthStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Run a storefront performance audit with Lighthouse and Core Web Vitals analysis

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

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

Related Skills

medusa-astro-storefront

16
from diegosouzapw/awesome-omni-skill

Build blazing fast e-commerce storefronts using MedusaJS as headless backend and Astro for static-first rendering with React islands. Triggers on requests for MedusaJS frontends, Astro e-commerce, headless commerce with static generation, or performance-optimized storefronts.

ln-774-healthcheck-setup

16
from diegosouzapw/awesome-omni-skill

Configures health check endpoints for Kubernetes readiness/liveness/startup

healthcare-ui-design

16
from diegosouzapw/awesome-omni-skill

Clinical-grade UI/UX patterns for healthcare applications across web (Bootstrap 5/Tabler + PHP) and Android (Jetpack Compose + Material 3). Covers patient records, vital signs, medication safety, care plans, scheduling, telemedicine, dashboards, patient portals, and clinical communication. Enforces HIPAA compliance, WCAG 2.2 AA accessibility, medical safety workflows, and role-based interfaces for clinicians, nurses, patients, and administrators. Use when building or reviewing EMR/EHR systems, hospital management, clinic apps, telemedicine platforms, patient portals, health dashboards, or any healthcare-related interface.

health-check

16
from diegosouzapw/awesome-omni-skill

Check health status of all running services and dependencies. Use when verifying services are running, debugging connectivity issues, or monitoring system status.

account-health-framework

16
from diegosouzapw/awesome-omni-skill

Use to score accounts, flag risks, and standardize remediation triggers.

u01482-constraint-compilation-for-healthcare-operations

16
from diegosouzapw/awesome-omni-skill

Operate the "Constraint Compilation for healthcare operations" capability in production for healthcare operations workflows. Use when mission execution explicitly requires this capability and outcomes must be reproducible, policy-gated, and handoff-ready.

health-chat

16
from diegosouzapw/awesome-omni-skill

Unified health conversation entry point - automatically loads all health data for each conversation, supports natural language queries, and intelligently routes to appropriate health data processing

check-ceph-health

16
from diegosouzapw/awesome-omni-skill

Check Ceph storage health on OpenShift OCS/ODF clusters. Use when PVCs are stuck in Pending, storage provisioning fails, Ceph is degraded, OSDs are full, or cluster storage needs diagnosis.

cva-healthcare-pipeline

16
from diegosouzapw/awesome-omni-skill

Complete 5-system healthcare content pipeline for regulated medical content generation. Includes LGPD data extraction (Type B), claims identification (Type A), scientific reference search (Type C), SEO optimization (Type B), and final consolidation (Type D). Validated ROI - 99.4% time reduction, 92.4% cost reduction. Use when implementing healthcare content automation, building regulated medical systems, or optimizing production pipelines.

healthsim

16
from diegosouzapw/awesome-omni-skill

HealthSim generates realistic synthetic healthcare data for testing EMR systems, claims processing, pharmacy benefits, and analytics. Use for ANY request involving: (1) synthetic patients, clinical data, or medical records, (2) healthcare claims, billing, or adjudication, (3) pharmacy prescriptions, formularies, or drug utilization, (4) HL7v2, FHIR, X12, or NCPDP formatted output, (5) healthcare testing scenarios or sample data generation.

healthsync

16
from diegosouzapw/awesome-omni-skill

Queries Apple Health data stored in a local SQLite database. Use this skill to read heart rate, steps, SpO2, VO2 Max, sleep, workouts, resting heart rate, HRV, blood pressure, active/basal energy, body metrics, mobility, running metrics, mindful sessions, wrist temperature, and more. Can query via the healthsync CLI or directly via SQLite. Read-only — never write to the database.

claude-ally-health

16
from diegosouzapw/awesome-omni-skill

A health assistant skill for medical information analysis, symptom tracking, and wellness guidance.