Skills

web-design-methodology

Installation
Summary

Production-grade HTML/CSS built with BEM, semantic tokens, mobile-first responsive design, and optional dark mode.

  • Enforces BEM naming conventions, CSS custom properties for all design values, and semantic HTML structure to ensure maintainability and consistency
  • Mobile-first workflow: design for 375px, enhance upward with four breakpoints (640px, 768px, 1024px, 1440px); includes hamburger navigation and 44x44px touch targets
  • Optional three-state dark mode via JavaScript class toggle on <html> with paired foreground/background tokens; skip for most business sites
  • Covers typography contrast, 80/20 colour distribution, breathing spacing systems, shadow hierarchy, and accessibility requirements (4.5:1 contrast, semantic HTML, skip links, ARIA)
  • Includes anti-AI pattern warnings and quality checklist to avoid generic layouts, uniform padding, and overused component skeletons
SKILL.md

Web Design Methodology

Universal patterns for building production-grade HTML/CSS. This skill covers implementation methodology — pair with web-design-patterns for specific component designs.

What You Produce

Production-ready HTML/CSS prototypes with:

  • Semantic CSS custom properties (tokens)
  • BEM-named components
  • Mobile-first responsive design
  • Accessible markup
  • Optional three-state dark mode

File Structure

prototype/
├── index.html
├── about.html
Related skills

More from jezweb/claude-skills

Installs
313
Repository
jezweb/claude-skills
GitHub Stars
776
First Seen
Feb 18, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass