# Web Design Standards

> Provides guidance on HTML/CSS best practices for responsive web design, Bootstrap integration, accessibility, and performance optimization. Use when building web pages, styling components, or improving web design quality.

- Skill: `yennanliu/web-design-standards` (Agent Skill)
- Install (CLI): `npx skillmds@latest add yennanliu/web-design-standards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yennanliu/web-design-standards/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: yennanliu (https://skillmd.com/u/yennanliu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yennanliu/web-design-standards

---


# Web Design Standards

## Bootstrap 4.5.2 Integration
- Use Bootstrap grid system for responsive layouts
- Leverage Bootstrap components (navbar, cards, buttons) before custom styling
- CSS variables for consistent theming (primary/secondary colors, light/dark modes)

## Responsive Design Principles
1. Mobile-first approach
2. Test at breakpoints: 320px, 768px, 1024px, 1366px
3. Use flexbox for layouts
4. Ensure touch-friendly targets (min 44px)

## Accessibility Standards
- Semantic HTML5 elements (header, nav, main, footer, section, article)
- ARIA labels for screen readers
- Color contrast ratios: WCAG AA (4.5:1 for text)
- Keyboard navigation support

## Performance Optimization
- Lazy load images with loading="lazy"
- Minify CSS and JavaScript
- Use CSS variables to reduce duplication
- Optimize image sizes (WebP format when possible)

## CSS Architecture
- Use CSS variables in :root for theming
- Organize CSS: layout, components, utilities
- Avoid inline styles
- Use meaningful class names (BEM or similar)

## Form Design
- Label all inputs
- Clear error messages
- Success feedback
- Mobile-friendly input types (email, tel, number)