skills.rest
angelriera-dev
angelriera-devCOMMUNITY
Explore all skills by this author →
Website𝕏@angelriera_devGitHub

web-design-methodology

Standardize production-grade HTML/CSS with BEM naming, semantic tokens, and responsive breakpoints.

Updated Jan 7, 2024
Search Tags:#design#html#accessibility#css#responsive-design#dark-mode#bem
One-click install
npx skills add https://github.com/angelriera-dev/angelriera-dev.github.io --skill web-design-methodology-angelriera-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-methodology
Source: https://github.com/angelriera-dev/angelriera-dev.github.io/tree/main/.agents/skills/web-design-methodology
Command: npx skills add https://github.com/angelriera-dev/angelriera-dev.github.io --skill web-design-methodology-angelriera-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Standardizes the approach to building production-grade HTML/CSS by providing a reusable methodology that ensures consistency, accessibility, and scalable design systems across teams.

Core Features & Use Cases

  • Semantic CSS tokens and a token-driven design system to ensure consistent theming and spacing.
  • BEM-based component naming, mobile-first responsive layout, and accessible markup.
  • Optional dark mode with a three-state toggle and clear guidance for 375px mobile prioritization.
  • Concrete file structure guidance (prototype/, css/, js/, media/) to accelerate delivery of production-ready websites. Use cases include brand websites, dashboards, and marketing sites that require repeatable, maintainable front-end architectures.

Quick Start

Build a production-ready HTML/CSS prototype by applying the BEM naming, token system, and responsive guidelines described above.

Frequently Asked Questions about web-design-methodology

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure HTML/CSS for scalable web design?▼

To structure scalable web design, use a concrete file structure with prototype/, css/, js/, and media/ directories. This approach standardizes production-grade HTML/CSS, ensuring consistent, accessible, and maintainable front-end architectures across teams building brand or marketing sites.

What is the best way to implement responsive design with a 375px mobile breakpoint?▼

Implement responsive design using a mobile-first approach with 375px mobile prioritization. This methodology provides clear guidance for responsive breakpoints, ensuring layouts adapt correctly across devices while maintaining accessible markup and BEM-based component architecture.

How does BEM naming work with semantic CSS tokens?▼

BEM naming integrates with semantic CSS tokens by applying a token-driven design system to BEM-based components. This combination ensures consistent theming and spacing across user interfaces, providing a reusable methodology for building accessible, production-ready websites.

Can I add dark mode to a CSS design system using JavaScript?▼

Yes, you can add dark mode to a CSS design system using JavaScript utilities. This methodology provides optional dark mode integration featuring a three-state toggle, working alongside semantic CSS tokens and accessible markup to deliver consistent user interface theming.

Does this web design methodology require any external CSS frameworks?▼

No, this web design methodology does not require external CSS frameworks. It relies on universal HTML/CSS patterns, providing semantic tokens, BEM naming, and accessibility practices natively to build production-grade websites without external dependencies.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced
code-yeongyucode-yeongyu
67.6k

frontend-ui-ux

Convert visual design ideas into responsive HTML/CSS/JS components.

Community
Intermediate
mpazarynampazaryna
1

web-design

Implement CSS patterns for variables, tokens, dark mode, and responsive design.

Community
Basic
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced