skills.rest
ar4mirez
ar4mirezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-css-guide

Provide HTML and CSS guardrails, patterns, and best practices for development.

7|1|Updated Nov 3, 2025
Search Tags:#best practices#html#accessibility#web development#responsive design#css
One-click install
npx skills add https://github.com/ar4mirez/samuel --skill html-css-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-css-guide
Source: https://github.com/ar4mirez/samuel/tree/main/template/.claude/skills/html-css-guide
Command: npx skills add https://github.com/ar4mirez/samuel --skill html-css-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides essential HTML and CSS guardrails, patterns, and best practices tailored to the project's coding standards, ensuring consistency and quality in web development.

Core Features & Use Cases

  • Semantic HTML Guidance: Promotes the correct use of HTML elements for meaning and accessibility.
  • Accessibility Standards: Enforces WCAG 2.1 AA compliance for inclusive design.
  • Modern CSS Patterns: Details best practices for CSS architecture, responsive design, and performance.
  • Use Case: When developing a new UI component, consult this Skill for guidance on semantic structure, ARIA attributes, and efficient CSS implementation.

Quick Start

Review the HTML/CSS guardrails and patterns to ensure your new component adheres to project standards.

Frequently Asked Questions about html-css-guide

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

FAQPage Schema
What are the best practices for semantic HTML and accessibility in web development?▼

When developing a new UI component, you should consult HTML and CSS guardrails for guidance on semantic structure, ARIA attributes, and efficient CSS implementation to ensure adherence to project standards.

How do I ensure my HTML and CSS meet project coding standards?▼

To ensure your HTML and CSS meet project standards, apply comprehensive guardrails and patterns covering semantic structure, ARIA attributes, and responsive design conventions during AI-assisted development.

What is the best way to structure modern CSS for responsive design?▼

The best way to structure modern CSS for responsive design is to follow established CSS architecture patterns and performance conventions. This ensures consistent quality and efficient rendering across web projects.

Does this HTML/CSS guidance support WCAG 2.1 AA compliance?▼

Yes, the HTML/CSS guidance fully supports WCAG 2.1 AA compliance by enforcing specific accessibility standards. This inclusive design approach ensures web components are accessible to all users.

When do I need to apply ARIA attributes and semantic HTML guidelines?▼

You need to apply ARIA attributes and semantic HTML guidelines whenever working with HTML/CSS files or developing new UI components. This ensures correct element usage and accessibility.

Related Skills

Explore More Software Engineering Skills→
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
jangtrinhjangtrinh

product-designer

Convert prompts into production-ready HTML/Tailwind UI designs with EaseUI tokens.

Community
Advanced
systempromptiosystempromptio
24

Frontend Standards

Enforce JavaScript, CSS, accessibility, and build pipeline coding standards.

Official
Advanced
ils15ils15
10

web-ui-analysis

Analyze web interfaces for WCAG 2.1 compliance and Core Web Vitals.

Community
Advanced