A collection of rules (or instructions) for AI assistants to write better, more accessible HTML and CSS for your web projects. Written by designer coder Mike Mai.

Note: this is also available as an agent skill.

• Accessibility First: All code should meet WCAG 2.2 standards
• Semantic HTML: Use meaningful HTML elements that convey structure and purpose
• Lightweight CSS: Modern CSS (e.g. cascade layers, logical properties, prefers-reduced-motion, etc.) and no utility class soup
• Responsive Design: Use relative units and fluid layouts
• Progressive Enhancement: Build with vanilla JavaScript and focus on core functionality

1. Copy the text in the rules.txt
2. Paste the text into the rules (or instructions) input within your AI tool of choice (e.g. Cursor, Windsurf, Claude, etc.)
3. Depending on your needs, you could re-organize the rules into user rules and project specific rules
4. You also don't have to agree with every rule, they are my opinions after all. Treat this like a CSS reset, remove what you don't need.

Ask the agent to conform to the accessibility rules (or whatever you decide to name your rules) along with your prompt.

Build an accordion component by conforming to the accessibility rules.

• Always consult an accessibility expert to review your code because AI will make mistakes
• Whenever you know of a proven accessible example, add it as a context when prompting
• Save WCAG and ARIA docs as PDFs and attach them as the knowledge for the AI
• Add the context7 MCP for more up-to-date docs

I believe OKLCH gives a wider range of colors but it will also depend on whether your monitor supports it. So this is experimental now, feel free to change to your preferred colors.

If you are vibe coding, you don't need to overcomplicate your project with frameworks. These frameworks might come with accessibility and performance issues that will get in your way.

These rules are intended for users who do not know how to code, let alone accessibility. If you are a seasoned dev, you should just pick the ones you agree with.

Submit issues!

See LICENSE for details.