@addyosmani

test-driven-development establishes a red-green-refactor cycle for all behavioral changes, bug fixes, and logic implementation. covers test pyramid strategy, test sizing, anti-patterns, and browser runtime verification via devtools.

performance-optimization provides a measurement-first workflow for identifying and fixing bottlenecks across frontend, backend, queries, and databases. covers core web vitals, common anti-patterns with code examples, and verification gates to prevent neutral complexity.

core-web-vitals provides concrete optimization patterns for LCP, INP, and CLS metrics. covers identification, root causes, code examples across frameworks, and measurement tools for lab and field testing.

security-and-hardening maps threat models to code, covering input validation, authentication, database queries, headers, and ai output handling. threat-model-first philosophy with stride, three-tier boundaries, and owasp patterns with runnable examples.

code-review-and-quality provides a five-axis review framework (correctness, readability, architecture, security, performance) with concrete checklists, severity labels, and multi-model patterns. covers change sizing, dead code hygiene, dispute resolution, and review speed targets.

context-engineering covers structured information curation for agent output quality, spanning rules files, specs, source code, error output, and conversation management. provides concrete hierarchy and packing strategies to prevent hallucination and focus loss.

accessibility covers wcag 2.2 compliance auditing with concrete html/css patterns for perceivable, operable, understandable, and robust content. includes conformance levels, testing checklists, and prioritized issue categories.

meta-skill for discovering and sequencing the right engineering workflow based on development phase. provides a decision tree from task arrival through deployment, with core behaviors enforcing assumption surfacing, confusion management, and scope discipline.

observability-and-instrumentation covers adding logging, metrics, tracing, and alerting to production code. it positions instrumentation as a first-class concern written alongside features, not retrofitted after launch.

seo covers technical optimization and on-page hygiene through robots.txt, canonical tags, sitemaps, url structure, and meta tag guidelines. lacks actionable procedure for diagnosis and recovery.

documentation-and-adrs covers when and why to document architectural decisions, trade-offs, and api changes rather than merely restating code. incomplete implementation guidance limits practical utility.

browser-testing-with-devtools enables agent inspection of live browser state via chrome devtools mcp, covering dom inspection, console analysis, network monitoring, and performance profiling for ui verification and debugging.

api-and-interface-design covers principles for creating stable, well-documented interfaces across rest apis, graphql schemas, and module boundaries. it establishes when to apply the skill but lacks concrete design procedures.

web-quality-audit wraps google lighthouse to evaluate performance, accessibility, seo, and best practices across 150+ checks. lacks concrete procedure steps and real-world failure mode handling.

best-practices catalogs lighthouse audit patterns for security and compatibility, but lacks actionable procedure and recovery logic. incomplete as a skill.

Subjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when correctness matters more than speed, when working in…

Extracts what the user actually wants instead of what they think they should want. Achieves this through one-question-at-a-time interview until ~95% confidence…

Manages deprecation and migration. Use when removing old systems, APIs, or features. Use when migrating users from one implementation to another. Use when…

Prepares production launches. Use when preparing to deploy to production. Use when you need a pre-launch checklist, when setting up monitoring, when planning a…

Grounds every implementation decision in official documentation. Use when you want authoritative, source-cited code free from outdated patterns. Use when…

Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test…

Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, or when you need to organize work…

Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to…

Delivers changes incrementally. Use when implementing any feature or change that touches more than one file. Use when you're about to write a large amount of…

Guides systematic root-cause debugging. Use when tests fail, builds break, behavior doesn't match expectations, or you encounter any unexpected error. Use when…

Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend…

Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet. Use when requirements are…

Breaks work into ordered tasks. Use when you have a spec or clear requirements and need to break work into implementable tasks. Use when a task feels too large…

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing…

Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix…