lighthouse-audit

Run Lighthouse audits on a project's built site, create a GitHub issue with findings, then optionally fix via /x-wt-teams. Use when: (1) User says 'lighthouse audit', 'lighthouse', 'performance audit', or 'audit website', (2) User wants to improve performance, accessibility, SEO, or best practices. Optional URL argument; default flow builds project and serves locally.

6 stars

Best use case

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

Run Lighthouse audits on a project's built site, create a GitHub issue with findings, then optionally fix via /x-wt-teams. Use when: (1) User says 'lighthouse audit', 'lighthouse', 'performance audit', or 'audit website', (2) User wants to improve performance, accessibility, SEO, or best practices. Optional URL argument; default flow builds project and serves locally.

Teams using lighthouse-audit 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/lighthouse-audit/SKILL.md --create-dirs "https://raw.githubusercontent.com/Takazudo/claude-resources/main/skills/lighthouse-audit/SKILL.md"

Manual Installation

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

How lighthouse-audit Compares

Feature / Agentlighthouse-auditStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Run Lighthouse audits on a project's built site, create a GitHub issue with findings, then optionally fix via /x-wt-teams. Use when: (1) User says 'lighthouse audit', 'lighthouse', 'performance audit', or 'audit website', (2) User wants to improve performance, accessibility, SEO, or best practices. Optional URL argument; default flow builds project and serves locally.

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

# Lighthouse Audit

Run Lighthouse audits, report findings as a GitHub issue, then improve the site via agent teams.

```
Phase 1: Audit  -->  Phase 2: Report  -->  Phase 3: Improve  -->  Phase 4: Verify
(build+serve,       (GitHub issue,         (/x-wt-teams on       (re-audit,
 run lighthouse)     summary to user)       the issue)             compare scores)
```

## Phase 1: Audit

### Step 1: Detect project type

Read `package.json` to determine build and serve commands:

| Project Type | Build Command | Serve Command |
| --- | --- | --- |
| Next.js (static) | `next build` | `npx serve out` |
| Next.js (server) | `next build` | `next start -p 3456` |
| Docusaurus | `docusaurus build` | `npx serve build -l 3456` |
| Vite | `vite build` | `vite preview --port 3456` |
| Gatsby | `gatsby build` | `npx serve public -l 3456` |
| Generic | `npm run build` | `npx serve <output-dir> -l 3456` |

Use the project's package manager. Prefer `preview`/`serve` scripts from package.json over `npx serve`.

### Step 2: Build and serve

```bash
pnpm run build
npx serve <build-dir> -l 3456 &
SERVER_PID=$!
sleep 3
```

Use port `3456` to avoid conflicts. Remember `$SERVER_PID` to kill later.

### Step 3: Discover pages

Pick 3-5 representative pages from:

1. `<build-dir>/sitemap.xml`
2. `src/pages/` or `app/` directory structure
3. Common pages: `/`, `/about`, `/docs`, first blog post
4. User-provided URLs (if argument given)

Always include homepage.

### Step 4: Run Lighthouse

Determine preset from argument: `--desktop`, `--mobile`, or `--both` (default: `--both`).

```bash
REPORT_DIR=$HOME/cclogs/<repo-name>/lighthouse-$(date +%Y%m%d_%H%M%S)
mkdir -p "$REPORT_DIR"

bash $HOME/.claude/skills/lighthouse-audit/scripts/run-lighthouse.sh \
  "$REPORT_DIR/mobile" mobile \
  http://localhost:3456/ http://localhost:3456/page2

bash $HOME/.claude/skills/lighthouse-audit/scripts/run-lighthouse.sh \
  "$REPORT_DIR/desktop" desktop \
  http://localhost:3456/ http://localhost:3456/page2
```

### Step 5: Kill server and parse

```bash
kill $SERVER_PID 2>/dev/null
```

Read `summary.json` files from each report directory.

## Phase 2: Report

### Create GitHub issue

Create an issue with structured audit results:

```bash
gh issue create --title "Lighthouse Audit Report - $(date +%Y-%m-%d)" --body "..."
```

Issue body should include:

- **Scores table**: Page x Preset x Category matrix
- **Top opportunities**: Grouped by category with potential savings
- **Recommendations**: Grouped into logical topics suitable for parallel worktree tasks (e.g., "image optimization", "render-blocking resources", "accessibility fixes", "meta tags")

### Report to user

Present concise summary: score table, top 3-5 actionable items. Ask if user wants to proceed with improvements.

## Phase 3: Improve

If user proceeds:

1. Invoke `/x-wt-teams --stay <issue-url>` with improvement instructions from the audit
2. Each recommendation topic becomes a worktree with a child agent

Example:

```
/x-wt-teams --stay <issue-url>
Implement Lighthouse improvements from the issue:
1. Image optimization: compress, add dimensions, next-gen formats
2. Render-blocking: defer non-critical CSS/JS, inline critical CSS
3. Accessibility: alt attributes, color contrast, ARIA labels
4. SEO: meta descriptions, heading hierarchy
```

## Phase 4: Verify

After agent teams complete:

1. Rebuild and re-serve the project
2. Re-run Lighthouse on same pages with same presets
3. Compare with bundled script:

```bash
bash $HOME/.claude/skills/lighthouse-audit/scripts/compare-reports.sh \
  "$REPORT_DIR/mobile/summary.json" \
  "$NEW_REPORT_DIR/mobile/summary.json"
```

4. Report before/after comparison to user
5. Comment on the GitHub issue with results

## Notes

- Each audit takes ~30-60s per page per preset
- Limit to 5 pages for large sites
- If user provides a live URL, skip build+serve steps
- Reports saved to `$HOME/cclogs/<repo-name>/`

Related Skills

zudoesa-articlify

6
from Takazudo/claude-resources

Convert conversation context into an esa article via the zudoesa-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write esa article', 'esa記事', 'esaに書いて', 'articlify for esa', or /zudoesa-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.

zudoesa-apply-voice

6
from Takazudo/claude-resources

Apply Takazudo's esa writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's esa style, (2) User says 'apply voice', 'esa voice', 'esa文体で', 'esa風に書いて', '文体を適用', (3) User provides text to transform to esa style. Reads writing-style.md and vocabulary-rule.md from takazudo-esa-writing repo and applies the rules.

zudocg-articlify

6
from Takazudo/claude-resources

Convert conversation context into a CodeGrid article via the zudocg-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write codegrid article', 'CodeGrid記事', 'codegridに書いて', 'articlify for codegrid', or /zudocg-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.

zudocg-apply-voice

6
from Takazudo/claude-resources

Apply Takazudo's CodeGrid writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's CodeGrid style, (2) User says 'apply voice', 'codegrid voice', 'codegrid文体で', 'codegrid風に書いて', '文体を適用', (3) User provides text to transform to CodeGrid style. Reads writing-style.md and vocabulary-rule.md from takazudo-codegrid-writing repo and applies the rules.

zpaper-articlify

6
from Takazudo/claude-resources

Convert conversation context into a zpaper blog article via the zpaper-writer subagent. ONLY invoke when the user explicitly asks — NEVER proactively propose. Triggers: 'write zpaper article', 'zpaper記事', 'zpaperに書いて', 'articlify for zpaper', or /zpaper-articlify. Gathers context, creates a writing brief, delegates to the writer subagent.

zpaper-apply-voice

6
from Takazudo/claude-resources

Apply Takazudo's zpaper blog writing voice and vocabulary rules to text. Use when: (1) User wants to write/rewrite text in Takazudo's zpaper style, (2) User says 'apply voice', 'zpaper voice', 'zpaper文体で', 'zpaper風に書いて', 'ブログ文体を適用', (3) User provides text to transform to zpaper style. Reads writing-style.md and vocabulary-rule.md from the zpaper repo and applies the rules.

xlsx

6
from Takazudo/claude-resources

Spreadsheet creation, editing, and analysis. Use when working with .xlsx, .xlsm, .csv, .tsv files for: (1) Creating spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modifying existing spreadsheets while preserving formulas, (4) Data analysis and visualization, (5) Recalculating formulas.

x

6
from Takazudo/claude-resources

Facade for development workflows. Routes on two axes: plan-first vs implement-now (escalates to /big-plan -a when the request needs research / decomposition / has unclear scope — the appended -a makes the plan chain into implementation in-session), then single vs multi on the ready-to-build fast paths (/x-as-pr single-topic, /x-wt-teams multi-topic parallel). Use when: (1) User says '/x' followed by dev instructions, (2) User wants to start development without choosing the workflow skill, (3) User says 'dev', 'implement', or 'build' with a task. Default option: -v (verify-ui). Review-loop (-l) is opt-in — without -l the downstream skill runs a single /deep-review pass. Forwards -a (autonomy/auto-chain) and -m (merge at the end + cleanup + CI watch) through every route; auto-fix of raised findings (-f) and issue-raising (-ri) are downstream defaults, with -nf/--no-fix and -nori/--no-raise-issues as the forwarded opt-outs. -a and -m are orthogonal — full hands-off end-to-end is -a -m.

x-wt-teams

6
from Takazudo/claude-resources

Parallel multi-topic development using git worktrees, base branches, and Claude Code agent teams. Use when: (1) User wants to work on multiple related features in parallel, (2) User mentions 'worktree', 'base branch', 'parallel development', 'split into topics', or 'multi-topic'. FULLY AUTONOMOUS — creates worktrees, spawns teams, coordinates everything. Also supports Super-Epic child mode for [Epic] issues from /big-plan with '**Super-epic:** #N' markers (targets the super-epic base branch instead of main).

x-as-pr

6
from Takazudo/claude-resources

Start a development workflow as a draft PR. Creates a NEW branch from the current branch, empty start commit, draft PR targeting the current branch, then implements. ALWAYS creates a new branch by default — produces a nested PR-on-PR when the current branch already has one. Use when: (1) User says 'dev as pr', (2) User wants a PR-first workflow before coding, (3) User passes -s/--stay to reuse the current branch instead of nesting, (4) User passes a GitHub issue URL to implement, (5) User passes --make-issue/--issue to create an issue first. Logs progress via issue comments when an issue is linked.

watch-ci

6
from Takazudo/claude-resources

Watch GitHub PR CI checks in the background and notify on completion. Use when: (1) User wants to monitor CI/CD status, (2) User says 'watch CI', 'check CI', 'monitor checks', or 'wait for CI', (3) User wants to know when checks pass or fail. Runs a background gh polling shell loop (NOT a subagent — near-zero token cost), sends macOS notification on completion. Also handles merged PRs by watching the target branch CI.

w-update-wording-rule

6
from Takazudo/claude-resources

Add or update wording rules (表記ルール) in the w repo's vocabulary-rule.md files. Use when: (1) User says 'add wording rule', 'update wording rule', '表記ルール追加', (2) User wants to add a kanji/hiragana usage rule, (3) User provides a rule like 'X should be Y' with examples.