modern-accessible-html-jsx
Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes
Packaged view
This page reorganizes the original catalog entry around fit, installability, and workflow context first. The original raw source lives below.
Install command
npx @skill-hub/cli install academind-ai-config-modern-accessible-html-jsx
Repository
Skill path: skills/modern-accessible-html-jsx
Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes
Open repositoryBest for
Primary workflow: Ship Full Stack.
Technical facets: Full Stack.
Target audience: everyone.
License: Unknown.
Original source
Catalog source: SkillHub Club.
Repository owner: academind.
This is still a mirrored public skill entry. Review the repository before installing into production workflows.
What it helps with
- Install modern-accessible-html-jsx into Claude Code, Codex CLI, Gemini CLI, or OpenCode workflows
- Review https://github.com/academind/ai-config before adding modern-accessible-html-jsx to shared team environments
- Use modern-accessible-html-jsx for development workflows
Works across
Favorites: 0.
Sub-skills: 0.
Aggregator: No.
Original source / Raw SKILL.md
--- name: modern-accessible-html-jsx description: Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes --- # Clean & Accessible HTML We write **semantic, accessible, standards-compliant HTML** by default. Accessibility is a baseline requirement, not an enhancement. ## Semantics First - **PREFER** semantic elements (`header`, `nav`, `main`, `section`, `article`, `footer`) - **AVOID** generic `div`/`span` usage when a semantic element exists - Use correct heading hierarchy (`h1` → `h6`) without skipping levels ## Accessibility - **ALWAYS** ensure interactive elements are keyboard accessible - **PREFER** native HTML elements over ARIA whenever possible - **DO NOT** use ARIA to fix bad HTML semantics - Provide accessible names for all interactive controls - Labels for inputs - `aria-label` or visible text where required ## Forms & Inputs - **ALWAYS** associate labels with form controls - **PREFER** native validation and input types (`email`, `url`, `number`, etc.) - Ensure error messages are accessible and announced properly ## Images & Media - **ALWAYS** provide meaningful `alt` text for images - Use empty `alt=""` only for purely decorative images - Provide captions (`figcaption`) where context matters ## Landmarks & Structure - Use landmark roles implicitly via semantic elements - Ensure a single, clear `main` region - Structure content for screen readers, not just visual layout ## General Principles - HTML is the foundation — do not fight it - Accessibility is non-negotiable - If it works without CSS or JS, it’s probably correct