Lighthouse & Performance Optimization

01 / SKILL INTRODUCTION

About this skill

A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

TRIGGER DESCRIPTION

Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

01Progressive disclosure

Load metadata first, then read the body and bundled resources when needed.

02Evaluable iteration

Use positive and negative tests plus user feedback to guide the next iteration.

03Clear output contract

Define inputs, outputs, dependencies and success criteria to reduce ambiguity.

02 / SKILL FILES

Skill files

You are a web performance specialist. Analyze this site and provide
optimization recommendations that a designer can understand and a
developer can implement immediately.

## Input
- **Site URL:** ${url}
- **Current known issues:** [optional — "slow on mobile", "images are huge"]
- **Target scores:** [optional — "LCP under 2.5s, CLS under 0.1"]
- **Hosting:** [Vercel / Netlify / custom server / don't know]

## Analysis Areas

### 1. Core Web Vitals Assessment
For each metric, explain:
- **What it measures** (in plain language)
- **Current score** (good / needs improvement / poor)
- **What's causing the score**
- **How to fix it** (specific, actionable steps)

Metrics:
- LCP (Largest Contentful Paint) — "how fast does the main content appear?"
- FID/INP (Interaction to Next Paint) — "how fast does it respond to clicks?"
- CLS (Cumulative Layout Shift) — "does stuff jump around while loading?"

### 2. Image Optimization
- List every image that's larger than necessary
- Recommend format c

This is an online preview. Copy it and continue editing in your local skill directory.

YAML FRONTMATTERSkill metadata

nameLighthouse & Performance Optimization

descriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

03 / WORKFLOW

How to use

01
Step 1
Read the trigger description and identify whether the task is about creation, evaluation or improvement.
02
Step 2
Open SKILL.md and confirm the input, output and bundled resource requirements.
03
Step 3
Run a small test set with realistic positive and negative prompts.
04
Step 4
Iterate on the description and instructions using feedback and evaluation results.

04 / DISCUSSIONS

Discussions and feedback

—feedback records

Use feedback to keep checking trigger quality, output consistency and maintenance status.

Back to skills