/ Annuaire / Playground / ai-friendly-web-design-skill
← Tous les serveurs ↗ GitHub
● Communauté ianho7 ⚡ Instantané

ai-friendly-web-design-skill

par ianho7 · ianho7/ai-friendly-web-design-skill

14 design principles plus auto-review for building web UIs that AI agents can navigate reliably — semantic HTML, stable test IDs, no hidden interactions.

A Claude Code skill enforcing 14 design principles that make UIs usable by both humans and automation/agents: semantic HTML, ARIA, stable data-testid / data-ai-action locators, native form controls, pagination over infinite scroll, explicit loading states, URL deep links, clear errors, dual UI+API entry points. Auto-applies whenever Claude builds or reviews a UI component.

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

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

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

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

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.

Déroulement
  1. 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)
  2. 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
  1. 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
  2. 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
  1. 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

OutilEntréesQuand appelerCoût
review_component component path/source Any UI PR or audit 0
apply_principles component + findings After review 0
scaffold_agent_friendly UI spec Greenfield UI 0

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

AlternativeQuand l'utiliserCompromis
Manual a11y review + LighthouseYou only care about accessibility, not agent navigationMisses 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