/ Annuaire / Playground / Addy Osmani Agent Skills
← Tous les serveurs ↗ GitHub
● Communauté addyosmani ⚡ Instantané

Addy Osmani Agent Skills

par addyosmani · addyosmani/agent-skills

Skills d'ingénierie de qualité production pour agents de code — performance, accessibilité, sécurité, débogage — curatés par Addy Osmani (équipe Google Chrome, auteur de Learning JavaScript Design Patterns).

Un bundle de skills opinâtres et éprouvés pour les agents de code AI. Chaque skill encode une pratique d'ingénierie spécifique (ex. optimisation des Core Web Vitals, audit a11y axe-core, revue sécurisée par défaut OWASP, débogage de performance). Les skills sont du Markdown plus des scripts exécutables agnostiques aux agents et fonctionnent avec Claude Code, Cursor, Codex, Gemini CLI. Mis à jour fréquemment avec des notes du terrain frontend.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json
{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Addy Osmani Agent Skills

Comment corriger les échecs des Core Web Vitals avec Claude pour le travail lourd

👤 Ingénieurs frontend, équipes soucieuses de la performance ⏱ ~90 min intermediate

Quand l'utiliser : PageSpeed a chuté, LCP régressé au-delà de 2.5s, et le business demande pourquoi.

Prérequis
  • Skill installé — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
  • URL ou dépôt à auditer — URL publique ou serveur de dev local
Déroulement
  1. Diagnostiquer
    Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ Copié
    → Liste classée de coupables avec références fichiers, pas des conseils génériques « optimisez les images »
  2. Corriger
    For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ Copié
    → Modification de code + impact métrique avant/après attendu
  3. Vérifier
    Re-run Lighthouse locally. Compare to previous run.✓ Copié
    → Chiffres améliorés ; sinon l'hypothèse était fausse — retour à l'étape 1

Résultat : Améliorations LCP/INP mesurables avec une piste documentée.

Pièges
  • Claude propose trop rapidement une réécriture lourde de framework — Le skill inclut une règle « changement minimal viable » — collez-la si l'agent dérive
Combiner avec : filesystem

Auditer une page pour des problèmes d'accessibilité au niveau Claude Code

👤 Devs frontend qui livrent des sites B2C ⏱ ~60 min intermediate

Quand l'utiliser : Vous avez hérité d'une interface avec un statut a11y inconnu et avez besoin d'un vrai audit, pas d'une case à cocher.

Déroulement
  1. Exécuter la suite
    Use the a11y skill on /app/components/. Run axe rules + heuristic checks for focus management and keyboard traps.✓ Copié
    → Problèmes groupés par sévérité ; ID de règles inclus
  2. Trier
    Group issues by component. Rank by user impact, not raw count.✓ Copié
    → Top 10 composants à corriger
  3. Corriger un
    Pick the highest-impact item. Apply the fix; don't break existing tests.✓ Copié
    → Correction livrée ; tests au vert

Résultat : De vraies améliorations a11y, pas « nous avons lancé axe et c'est tout ».

Pièges
  • La correction automatique casse l'intention de design (ex. force un label sur un bouton icône uniquement) — Le skill préfère les approches équivalentes visuelles comme aria-label au lieu d'un label visible

Lancer une revue sécurisée par défaut sur une base de code TypeScript

👤 Devs sans équipe sécurité dédiée ⏱ ~75 min advanced

Quand l'utiliser : Avant le lancement, vous voulez un balayage sain — pas un pen-test, mais mieux que rien.

Déroulement
  1. Scanner
    Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ Copié
    → Tableau de résultats avec file:line et sévérité
  2. Corriger les 5 premiers
    Fix the highest-severity items. Add tests where feasible.✓ Copié
    → 5 corrections appliquées

Résultat : Une base de code qui ne ratera pas une revue de sécurité basique.

Pièges
  • Faux positifs sur les fixtures de tests — Le skill respecte /tests/ et /__fixtures__/ par défaut — passez --include-tests pour surcharger
Combiner avec : github

Utiliser le skill de débogage structuré sur une régression

👤 Tout dev avec un bug « ça marchait hier » ⏱ ~60 min intermediate

Quand l'utiliser : Vous en êtes à 30 minutes de devinettes — passez à un workflow de cause racine structuré.

Déroulement
  1. Reproduire
    Use the debug skill. First step: get a minimal reproduction.✓ Copié
    → Étapes de repro + un seul test qui échoue
  2. Bisect
    Bisect git history with the failing test as oracle.✓ Copié
    → Commit fautif identifié
  3. Corriger
    Surgical fix — preserve the intended behavior of the offending commit.✓ Copié
    → Correction commitée avec explication

Résultat : Une correction reproductible soutenue par un test, pas une supposition.

Pièges
  • Le skill sur-applique bisect quand le bug n'est pas dans le code (env/données) — Le skill vérifie env/données en premier selon sa checklist — suivez l'ordre
Combiner avec : github

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

addyosmani-agent-skills + github

Ouvrir des PRs depuis la sortie des skills

addyosmani-agent-skills + filesystem

Persister les rapports d'audit des skills

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
perf.audit url_or_path Régression de performance 0
a11y.audit path Vérification a11y avant livraison 0
security.scan path Balayage sécurité avant lancement 0
debug.bisect failing_test, search_window Régression avec une baseline connue bonne 0

Coût et limites

Coût d'exécution

Quota d'API
N/A — skill local
Tokens par appel
Les revues lourdes peuvent être élevées ; les grandes bases de code utilisent 50k+ tokens
Monétaire
Gratuit (MIT)
Astuce
Exécutez perf/a11y par route, pas sur tout le site à la fois, pour garder les coûts bornés

Sécurité

Permissions, secrets, portée

Portées minimales : filesystem-read
Stockage des identifiants : Aucun
Sortie de données : Lighthouse s'exécute localement ; seules les URLs auditées sont récupérées

Dépannage

Erreurs courantes et correctifs

Lighthouse échoue à s'exécuter

Installez Node 18+ et Chrome ; le skill attend les deux dans PATH

Vérifier : `npx lighthouse https://example.com` fonctionne seul
Règles axe obsolètes

Le skill livre avec une version axe fixée ; mettez à jour avec git pull régulièrement

Bisect tourne indéfiniment sur un test non déterministe

Passez --repeat 3 pour que chaque commit soit testé 3x — les tests flaky sont filtrés

Alternatives

Addy Osmani Agent Skills vs autres

AlternativeQuand l'utiliserCompromis
wshobson/agentsVous voulez une couverture de rôles large (backend / data / DevOps)wshobson est plus large ; le bundle d'Addy est plus profond sur web-perf/a11y
Skills officiels AnthropicBriques de base génériques et approuvées officiellementMoins opinâtres ; moins façonnés par le praticien

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills