ai-friendly-web-design-skill MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

14 design principles optimized for agent navigation + accessibility
Stable data-testid / data-ai-action locator conventions
No hover-only interactions, no iframes/Shadow DOM barriers
Explicit loading states to avoid race conditions
Auto-activated during UI build / review — flags issues with severity

Démo en direct

Aperçu en pratique

ai-friendly-web-design-skill.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_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": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "ai-friendly-web-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "ai-friendly-web-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/ianho7/ai-friendly-web-design-skill",
          "~/.claude/skills/ai-friendly-web-design-skill"
        ]
      }
    }
  }
}

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

claude mcp add ai-friendly-web-design-skill -- git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

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

Cas d'usage

Usages concrets : ai-friendly-web-design-skill

Audit an existing component for agent-readiness

👤 Web devs shipping to customers who'll hit the page with agents ⏱ ~30 min beginner

Quand l'utiliser : Your support chatbot or QA agent keeps missing the right button.

Prérequis

Skill installed — git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

Déroulement

Feed Claude the component

Review this Checkout.tsx against ai-friendly-web-design principles. Flag severity.✓ Copié

→ Ranked list: critical (hover-only submit) -> minor (missing aria-live)
Apply the fixes

Apply all critical + major fixes, keep visuals identical.✓ Copié

→ Patched component + a diff summary

Résultat : A component that's still pretty for humans and reachable for agents.

Pièges

Adding data-testid everywhere without convention — Follow the skill's naming convention (data-testid='<area>-<action>') or they drift

Combiner avec : chrome-devtools

Build a new form with native controls and proper ARIA

👤 Frontend devs building high-stakes forms (checkout, onboarding) ⏱ ~45 min intermediate

Quand l'utiliser : A new form where you can't afford to block screen readers or agents.

Déroulement

Scaffold from principles

Build a billing address form using ai-friendly-web-design. Native input types, labels, aria-describedby for errors, explicit loading on submit.✓ Copié

→ Form with HTML native types (email, tel), no custom combobox hacks
Add deep-linking + URL state

Make the form step reflect in the URL so agents can open step 2 directly.✓ Copié

→ step param in URL, state restored on load

Résultat : A form both assistive tech and agents navigate cleanly.

Replace infinite scroll with predictable pagination

👤 Product engineers where agents fail to get past page 1 ⏱ ~30 min intermediate

Quand l'utiliser : Your list page uses infinite scroll and agents never reach items below the fold.

Déroulement

Refactor to paginated route

Replace the infinite-scroll list with URL-based pagination (?page=N). Keep scroll behavior feel.✓ Copié

→ Addressable pages, prev/next with ARIA

Résultat : A list an agent can walk deterministically.

Pièges

Breaking SEO by removing the old scroll entirely — Keep scroll load within each page — just make the page boundary explicit

Combinaisons

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

ai-friendly-web-design-skill + chrome-devtools

Test the component live and confirm agent locators work

Load the patched component in devtools, verify data-testid values and aria attributes render.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler
review_component	component path/source	Any UI PR or audit
apply_principles	component + findings	After review
scaffold_agent_friendly	UI spec	Greenfield UI

Coût et limites

Coût d'exécution

Quota d'API: None
Tokens par appel: Moderate — component + review
Monétaire: Free
Astuce: Run review at PR time, not every keystroke

Sécurité

Permissions, secrets, portée

Stockage des identifiants : None

Sortie de données : None

Dépannage

Erreurs courantes et correctifs

Review says no issues but agents still miss buttons

Run with Chrome DevTools snapshot; shadow DOM may hide from the static review

data-testid names clash with existing tests

Provide your naming convention to the skill before it auto-names

Alternatives

ai-friendly-web-design-skill vs autres

Alternative	Quand l'utiliser	Compromis
Manual a11y review + Lighthouse	You only care about accessibility, not agent navigation	Misses agent-specific concerns like stable locators

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills