/ Diretório / Playground / ai-friendly-web-design-skill
← Todos os servidores ↗ GitHub
● Comunidade ianho7 ⚡ Instantâneo

ai-friendly-web-design-skill

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

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

ai-friendly-web-design-skill.replay ▶ pronto
0/0

Instalar

Escolha seu cliente

~/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
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.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"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um 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"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: 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

Quando usar: Your support chatbot or QA agent keeps missing the right button.

Pré-requisitos
  • Skill installed — git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill
Fluxo
  1. Feed Claude the component
    Review this Checkout.tsx against ai-friendly-web-design principles. Flag severity.✓ Copiado
    → Ranked list: critical (hover-only submit) -> minor (missing aria-live)
  2. Apply the fixes
    Apply all critical + major fixes, keep visuals identical.✓ Copiado
    → Patched component + a diff summary

Resultado: A component that's still pretty for humans and reachable for agents.

Armadilhas
  • Adding data-testid everywhere without convention — Follow the skill's naming convention (data-testid='<area>-<action>') or they drift
Combine com: chrome-devtools

Build a new form with native controls and proper ARIA

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

Quando usar: A new form where you can't afford to block screen readers or agents.

Fluxo
  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.✓ Copiado
    → 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.✓ Copiado
    → step param in URL, state restored on load

Resultado: 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

Quando usar: Your list page uses infinite scroll and agents never reach items below the fold.

Fluxo
  1. Refactor to paginated route
    Replace the infinite-scroll list with URL-based pagination (?page=N). Keep scroll behavior feel.✓ Copiado
    → Addressable pages, prev/next with ARIA

Resultado: A list an agent can walk deterministically.

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

Combinações

Combine com outros MCPs para 10× de alavancagem

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.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
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

Custo e limites

O que custa rodar

Cota de API
None
Tokens por chamada
Moderate — component + review
Monetário
Free
Dica
Run review at PR time, not every keystroke

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: None
Saída de dados: None

Solução de problemas

Erros comuns e correções

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

Alternativas

ai-friendly-web-design-skill vs. outros

AlternativaQuando usarTroca
Manual a11y review + LighthouseYou only care about accessibility, not agent navigationMisses agent-specific concerns like stable locators

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills