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.
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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/lighthouse-audit/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How lighthouse-audit Compares
| Feature / Agent | lighthouse-audit | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/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
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
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
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
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
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
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
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
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
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
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
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
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.