@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.

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.

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.

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.

Establishes a project's quality bar as a written contract and stops agents quietly lowering it. Interviews the user on which dimensions matter, supplies sane…

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

Subjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when you want every assumption cross-examined before…

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, or when asking what needs to be in place before shipping. Use when you need a…

Grounds every implementation decision in official documentation. Use when you want to verify an approach against the official docs before implementing it, or…

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…

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

Structures git workflow practices. Use when making any code change. Use when committing, branching, resolving conflicts, splitting uncommitted work in a messy…

Delivers changes incrementally in thin, verifiable slices. Use when implementing any feature or change that touches more than one file, or when picking up the…

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…

Guides systematic root-cause debugging. Use when tests fail, builds break, something that worked yesterday broke, behavior doesn't match expectations, or you…

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…

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

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