skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

frontend-craft

Enforces WCAG AA accessibility and BEM naming in frontend UI markup and stylesheets.

15|2|Updated May 23, 2026
Search Tags:#accessibility#frontend#responsive design#design tokens#semantic html#wcag aa#bem naming
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill frontend-craft-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-craft
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/frontend-craft
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill frontend-craft-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents inconsistent, inaccessible, and hard-to-maintain UI by enforcing practical rules for semantic HTML, design tokens, responsive layouts, and BEM/ naming discipline.

Core Features & Use Cases

  • Semantic HTML & Accessibility (WCAG AA): choose correct elements, add ARIA only when needed, ensure keyboard focus, and meet contrast and alt-text requirements.
  • Responsive, mobile-first UI: apply mobile-first breakpoints, container queries, and fluid typography/spacing to avoid layout regressions.
  • Design tokens & theming: use CSS custom properties for colors, spacing, radii, and shadows to support consistent light/dark themes.
  • BEM and naming conventions: keep class structures predictable with .block__element--modifier and avoid deep or leaky naming.
  • Use Case: when implementing a new settings panel or component library card, follow this discipline to ship markup and styles that are accessible, themable, and responsive across common UI frameworks and templating setups.

Quick Start

Use frontend-craft while generating or updating any HTML/CSS/JSX/Vue/Svelte/Astro UI so that markup, styling, tokens, responsiveness, and accessibility meet the skill’s checklist.

Frequently Asked Questions about frontend-craft

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

FAQPage Schema
How do I build accessible UI components that meet WCAG AA standards?▼

To build accessible UI components meeting WCAG AA standards, use correct semantic HTML elements, apply ARIA only when necessary, ensure keyboard focus behavior, and verify contrast and alt-text requirements are satisfied.

What is the best way to manage responsive design and theming using CSS custom properties?▼

Managing responsive design and theming with CSS custom properties involves defining design tokens for colors, spacing, and radii, applying mobile-first breakpoints, and using container queries to ensure consistent light and dark themes across layouts.

Does this frontend workflow support JSX, Vue, Svelte, and Astro templates?▼

Yes, this frontend workflow supports JSX, Vue, Svelte, and Astro templates by applying consistent semantic markup, BEM-style naming discipline, and accessibility checks across various UI-focused component frameworks.

How do I apply BEM naming conventions to utility-first CSS frameworks?▼

Applying BEM naming conventions to utility-first CSS frameworks requires structuring classes predictably using block__element--modifier patterns to prevent deep or leaky naming while maintaining consistent UI markup.

When should I avoid adding ARIA attributes to semantic HTML?▼

You should avoid adding ARIA attributes to semantic HTML when the native elements already provide the necessary accessibility semantics, applying ARIA only when needed to fill specific interaction gaps.

Related Skills

Explore More Design & Creative Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
aquariuscookaquariuscook

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 AA compliance.

Community
Advanced
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate
lushly-devlushly-dev
4

enforce-standards

Enforce coding conventions for Python, TypeScript, HTML, and CSS.

Official
Intermediate