html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

9|1|Updated Feb 1, 2026

Search Tags:#html #accessibility #frontend #css #responsive-design #semantics

Ready to run

npx skills add https://github.com/calcosmic/Aether --skill html-css-calcosmic

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: html-css
Source: https://github.com/calcosmic/Aether/tree/main/.aether/skills-codex/domain/html-css
Command: npx skills add https://github.com/calcosmic/Aether --skill html-css-calcosmic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to maintain accessible, semantic HTML and scalable CSS, leading to accessibility gaps and brittle styling.

Core Features & Use Cases

Semantic HTML guidance: encourage using appropriate elements like nav, main, article, section, and aside, with proper heading structure.
Accessibility foundations: ensure every image has alt text, form controls are labeled, and color contrast is maintained.
CSS architecture guidance: promote flat selectors, BEM naming, and avoiding !important for maintainability.
Use cases include: upgrading existing pages for accessibility, building new sites with accessibility in mind, and auditing components for semantic correctness.

Quick Start

Review your project's HTML for semantic tags, add meaningful alt text, and structure CSS with flat selectors and consistent naming.

Frequently Asked Questions about html-css

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

FAQPage Schema

How do I improve accessibility and semantic structure in my HTML/CSS project?▼

To improve accessibility and semantic structure, use semantic HTML elements like nav, main, and article, ensure all images have alt text, label form controls, and maintain proper color contrast compliance for screen readers.

What is the best way to organize CSS architecture for maintainable responsive design?▼

The best way to organize CSS architecture for maintainable responsive design is to use flat selectors, adopt BEM naming conventions, and avoid using !important, ensuring scalable styling and responsive layout consistency across components.

When do I need ARIA considerations for static site accessibility?▼

You need ARIA considerations for static site accessibility when standard semantic HTML does not sufficiently convey dynamic behaviors or relationships to assistive technologies, ensuring accessible markup on marketing pages and component libraries.

How do I audit existing components for semantic HTML correctness?▼

To audit existing components for semantic HTML correctness, review the markup for appropriate elements like section and aside, verify proper heading structure, and check that form controls are properly labeled for accessibility.

Can I use this approach to upgrade marketing pages for accessibility?▼

Yes, you can apply these accessibility and semantic HTML best practices to upgrade existing marketing pages, ensuring they feature accessible markup, scalable flat CSS architecture, and responsive design consistency.

Why avoid !important when building a scalable CSS architecture?▼

Avoid using !important when building a scalable CSS architecture because it overrides cascade rules and creates brittle styling, making flat selectors and BEM naming difficult to maintain across large frontend projects.