back
loading skill details...
Universal web design implementation methodology — BEM, responsive, accessibility, CSS architecture, spacing systems, dark mode. The HOW of building…
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 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
don't have the plugin yet? install it then click "run inline in claude" again.