Web Design Guidelines

Web Design Guidelines

Comprehensive web design and accessibility guide for modern web applications. Contains 4 rules covering styling, animations, accessibility, and color contrast to ensure high-quality user experiences.

When to Apply

Reference these guidelines when:

• Creating new UI components or pages
• Reviewing code for design and accessibility issues
• Refactoring existing components for better UX
• Implementing animations and transitions
• Ensuring proper color contrast and accessibility
• Choosing between styling approaches

Rule Categories by Priority

Priority	Category	Impact	Prefix
0	Styling	HIGH	styling-
1	Accessibility	CRITICAL	accessibility-
4	Color	MEDIUM-HIGH	color-
8	Animation & Motion	LOW-MEDIUM	animation-

Quick Reference

0. Styling (HIGH)

• styling-prefer-tailwind - Use Tailwind CSS utility classes over custom CSS

1. Accessibility (CRITICAL)

• accessibility-alt-text - Provide descriptive alt text for all images

4. Color (MEDIUM-HIGH)

• color-contrast - Ensure WCAG AA contrast ratios (4.5:1 for text, 3:1 for UI)

8. Animation & Motion (LOW-MEDIUM)

• animation-framer-motion-or-css - Use Framer Motion for complex animations, CSS for simple ones

How to Use

Read individual rule files for detailed explanations and code examples:

rules/accessibility-alt-text.md
rules/animation-framer-motion-or-css.md
rules/color-contrast.md
rules/styling-prefer-tailwind.md

Each rule file contains:

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code examples with framework-specific alternatives
• Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md