web-design-standards

yennanliu's avatarfrom yennanliu

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.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill serves as a comprehensive technical guide for modern web design standards, focusing on HTML5/CSS3 best practices, Bootstrap 4.5.2 integration, and mobile-first responsiveness. It ensures high-quality frontend development by providing actionable rules for accessibility (WCAG AA), performance optimization, and scalable CSS architecture.

Use Cases

  • Responsive Layout Implementation: Utilizing Bootstrap's grid system and Flexbox to create adaptive designs that provide a consistent user experience across mobile, tablet, and desktop devices.
  • Accessibility & Semantic Markup: Applying semantic HTML5 elements and ARIA roles to ensure web content is fully accessible to screen readers and meets international accessibility standards.
  • Performance & Asset Optimization: Improving site speed and SEO by implementing lazy loading, minifying CSS/JS, and optimizing images using modern formats like WebP.
  • Scalable CSS Architecture: Organizing styles with CSS variables and BEM naming conventions to create a modular, reusable, and easy-to-maintain codebase.
nameweb-design-standards
descriptionProvides 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.
allowed-toolsRead, Grep, Glob

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)