メニュー
PageSpeed and Core Web Vitals checklist for web projects. Use when building UI, shipping a page, reviewing front-end code, or running /audit-code or /beautify on a web target.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | web-performance |
| description | PageSpeed and Core Web Vitals checklist for web projects. Use when building UI, shipping a page, reviewing front-end code, or running /audit-code or /beautify on a web target. |
Reference checklist for web performance: PageSpeed Insights score and Google Core Web Vitals. The standard is non-negotiable for production web pages: PageSpeed >= 90/100 on mobile, all Core Web Vitals in the green on real-user data.
/audit-code, /beautify, /feature, or /fix on a web target.Users do not invoke skills directly. Skills are reference knowledge that the AI loads
automatically when it detects a matching task, or when a command explicitly says "use the
web-performance skill."
/audit-code, /beautify -- these commands include a performance
validation step that uses this skill's checklist.| Metric | Target (mobile, p75 field) | Notes |
|---|---|---|
| PageSpeed score | >= 90 / 100 | Lighthouse mobile run |
| LCP | <= 2.5 s | Largest Contentful Paint |
| INP | <= 200 ms | Interaction to Next Paint (replaced FID) |
| CLS | <= 0.1 | Cumulative Layout Shift |
| FCP | <= 1.8 s | First Contentful Paint |
| TTFB | <= 800 ms | Time To First Byte |
| Total Blocking Time | <= 200 ms | Lab metric, proxy for INP |
If a page falls below any target, treat it as a release blocker until justified or fixed.
fetchpriority="high" and is not lazy-loaded.font-display: swap and are preloaded if used in the hero.defer/async) or moved to a worker.load event.width and height (or aspect-ratio).module/nomodule or browserslist).srcset / sizes or framework <Image> component.loading="lazy" and decoding="async".preload="metadata" (not auto) and a poster image.font-display: swap to avoid invisible text (FOIT).requestIdleCallback.prefers-reduced-motion).transform/opacity (composited), not layout properties.Lab (during development):
npx lighthouse <url> --preset=desktop / --preset=perf from CLI.Field (real users, p75):
web-vitals JS library streaming to your analytics.Continuous:
After running the checklist, structure findings as:
| Metric | Lab value | Field value | Target | Status |
|---|---|---|---|---|
| PageSpeed | 78 | n/a | >= 90 | RED |
| LCP | 3.2 s | 2.9 s | 2.5 s | RED |
| INP | 180 ms | 160 ms | 200 ms | GREEN |
| CLS | 0.05 | 0.04 | 0.1 | GREEN |
Then list violations grouped by severity:
For each finding: file path, root cause, suggested fix, expected metric impact.
width/height on images.Expert Magic: The Gathering Commander (EDH) deck analysis, optimization, and building assistant. Use this skill whenever the user asks about Commander decks, EDH optimization, power level assessment, bracket placement, mana base construction, card cuts/additions, deck building, commander selection, synergy analysis, or multiplayer strategy. Also trigger on: 'analyze my deck', 'what should I cut', 'is this deck bracket 2 or 3', 'help me build around X commander', 'what ramp should I run', 'mana curve advice', 'budget upgrades for', 'how to improve my EDH deck', 'pregame conversation', 'power level check', 'Game Changers list', 'staples for', 'wincon', 'too much/not enough removal', or any mention of Commander, EDH, cEDH, multiplayer Magic deck building. Even if the user just pastes a decklist or a link to Moxfield/Archidekt, use this skill.
Clean / Hexagonal Architecture adapted to this Next.js 15 App Router + Prisma + React 19 project. Use when designing a new feature, adding a module, debating where code should live, reviewing a PR that crosses layers, or when the domain logic starts leaking into UI / routes.
Clean Code principles applied to this TypeScript / Next.js / React project, with a strong emphasis on eliminating duplication (DRY). Use before writing new code, during refactors, after Sonar flags duplicated_lines, or when reviewing a PR that adds similar-looking code to existing modules.
Magic: The Gathering learning assistant and gameplay guide. Use this skill whenever someone asks how Magic works, wants to learn the game, needs gameplay concepts explained, or is discovering the Commander format. Trigger on: 'how does Magic work', 'explain MTG to me', 'I'm new to Magic', 'what are the phases', 'how does combat work', 'what is the stack', 'how do I start playing Commander', 'what is color identity', 'teach me MTG', 'explain mana', 'what does flying do', 'keyword abilities explained', 'how do turns work', 'EDH for beginners', 'how to build my first deck', or any question from someone learning Magic. Also trigger when someone understands basics but is transitioning to Commander/EDH and needs format-specific guidance. Even vague questions like 'I want to get into Magic' or 'my friend plays Commander and I want to learn' should trigger this skill.
Magic: The Gathering comprehensive rules reference and rules engine. Use this skill whenever the user asks about MTG rules, card interactions, game mechanics, timing, priority, layers, state-based actions, combat, stack resolution, or any rules question about Magic: The Gathering. Also trigger on: 'how does X work in MTG', 'can I do X in response to Y', 'what happens when', 'is this legal', 'rules question', 'judge call', 'layer system', 'replacement effects', 'triggered abilities', 'state-based actions', 'commander damage', 'color identity', or any dispute about how a card or mechanic works. Even casual questions like 'does this combo work' or 'what happens if I play X' should trigger this skill.
Professional TypeScript + React + Next.js coding standards enforcer. Use this skill whenever writing, reviewing, or refactoring TypeScript code in any project — whether it's a new feature, a bug fix, a refactoring pass, or a code review. Trigger on: any TypeScript or TSX file creation/editing, "clean up this code", "refactor", "optimize", "review my code", "best practice", "design pattern", "architecture", "performance", "type safety", "how should I structure this", "is this the right pattern", or any request involving writing production-quality TypeScript. Also trigger when the user pastes code and asks for improvements, when implementing a feature from scratch, or when discussing how to organize a React/Next.js codebase. Even if the user just says "write this function" — use this skill to ensure the output meets professional standards. Do NOT trigger for non-TypeScript languages (Python, Rust, Solidity have their own skills) unless the user explicitly asks for TS patterns applied elsewhere.