ianho7/ai-friendly-web-design-skill

60 stars · Last commit 2026-03-23

A Claude Code Skill that helps you build web interfaces friendly to both AI agents and human users — covering semantic HTML, ARIA attributes, stable locators, form best practices, and more.

README preview

# AI-Friendly Web Design — Claude Code Skill


A Claude Code Skill that helps you build web interfaces friendly to both AI agents and human users — covering semantic HTML, ARIA attributes, stable locators, form best practices, and more.

> Original post: [@karminski-牙医](https://weibo.com/2169039837/QxmP8bEIS) · Compiled by: [@ianho7](https://github.com/ianho7)

---

## What It Does

When active in Claude Code, this skill automatically applies whenever you:

- Build or review a UI component, form, or frontend feature
- Ask how to make your UI "agent-friendly" or "AI-accessible"
- Review existing code for accessibility or automation compatibility
- Mention AI agents, Playwright, automation, a11y, aria, or semantic HTML

Claude will follow the 14-principle checklist and flag issues during code review with severity levels (🔴 High / 🟡 Medium / 🟢 Low).

View full repository on GitHub →