addyosmani/agent-skills: Production-Grade Engineering Skills

Overview

addyosmani/agent-skills (76,505 stars) is a comprehensive library of production-grade engineering skills for AI coding agents, created by Addy Osmani — Engineering Manager at Google Chrome and one of the web platform's most respected voices. The repository encodes decades of web engineering experience into reusable skill files that teach AI agents best practices across performance, security, accessibility, and architecture.

This collection represents institutional web engineering knowledge encoded for AI consumption. When an AI agent loads these skills, it gains access to engineering practices refined across millions of web applications.

Features

• Core Web Vitals optimization: LCP, FID, CLS improvement strategies, loading performance, and bundle analysis skills
• Web security best practices: Content Security Policy headers, XSS prevention, secure authentication patterns, and security header configuration
• Accessibility patterns: ARIA attributes, semantic HTML, keyboard navigation, screen reader optimization, and WCAG compliance
• Architecture patterns: Micro-frontends, module federation, design system architecture, and scalable component design
• Build tooling configuration: Vite, Webpack, Turbopack optimization, code splitting, and tree-shaking strategies

Installation

git clone https://github.com/addyosmani/agent-skills
cp -r agent-skills/* ~/.claude/skills/

Or add individual skills via the Claude Code skill marketplace.

Skill Categories

Performance

• Core Web Vitals optimization strategies
• Bundle analysis and code splitting
• Loading performance (lazy loading, preloading, prefetching)
• Rendering optimization (virtual scrolling, virtualization)

Security

• Content Security Policy configuration
• XSS and CSRF prevention patterns
• Secure authentication flows
• Security audit automation

Accessibility

• WCAG 2.1/2.2 compliance checking
• ARIA attribute best practices
• Keyboard navigation patterns
• Screen reader testing strategies

Architecture

• Micro-frontend implementation patterns
• Module federation configuration
• Design system architecture
• Progressive enhancement strategies

Why It Matters

addyosmani/agent-skills is significant because it represents a new distribution model for engineering expertise. Instead of writing blog posts or giving talks, Addy Osmani has encoded his knowledge in a form that AI agents can directly consume and apply. This is more scalable than traditional knowledge sharing — one skill file can guide thousands of AI-assisted development sessions.

The project's rapid growth to 76.5K stars demonstrates that the developer community sees immense value in expert-curated, production-tested agent skills.

Pros

• ✅ Engineering expertise from a leading Chrome team manager
• ✅ Covers both frontend and architecture patterns
• ✅ Active development with regular updates
• ✅ Complements other skill collections well

Cons

• ❌ Heavy focus on web engineering, less useful for backend/system work
• ❌ Requires understanding of the skill ecosystem to compose effectively

When to Use

Use addyosmani/agent-skills when:

• You're building web applications and need performance optimization guidance
• Your team needs to enforce security best practices across projects
• You want accessibility compliance baked into your development workflow
• You're designing frontend architecture and need battle-tested patterns

Resources

• GitHub Repository