Can this skill help improve my site's SEO?

Yes. By enforcing correct heading hierarchies, landmark roles, and semantic tags, it creates a structured document that is significantly easier for search engines to index.

Does this skill work with React components?

Yes, it is specifically designed to handle both standard HTML and JSX/TSX environments, making it ideal for React, Next.js, and other modern frontend frameworks.

What happens if I have decorative images?

The skill intelligently distinguishes between meaningful media and decorative assets, ensuring decorative images receive empty alt tags to be ignored by screen readers.

How does it handle ARIA roles?

The skill follows the 'first rule of ARIA' by preferring native semantic HTML elements first and only applying ARIA attributes when necessary to fill accessibility gaps.

Semantic & Accessible HTML/JSX

Name: Semantic & Accessible HTML/JSX
Author: mrpitch

bymrpitch

0•

デザインツール

Generates standards-compliant, highly accessible HTML and JSX code using semantic elements and ARIA best practices.

This skill empowers Claude to prioritize web accessibility (a11y) and semantic structure as a baseline requirement rather than an afterthought. It enforces the use of native HTML elements like header, main, and section over generic divs, ensures keyboard navigability for interactive elements, and mandates correct label association and alt text. It is particularly useful for developers building modern React or Next.js applications who need to meet WCAG standards, improve screen reader compatibility, and enhance SEO through clean, meaningful markup.

主な機能

010 GitHub stars

02Strict adherence to semantic HTML5 elements and hierarchy

03Mandatory accessible names and alt text for media and landmarks

04Enforced keyboard accessibility for all interactive controls

05Automated association of labels and error messages for form controls

06Smart ARIA attribute application only when native elements are insufficient

ユースケース

01Ensuring web forms and interactive UI elements are fully screen-reader compatible

02Building WCAG-compliant frontend components in React or Next.js

03Refactoring legacy 'div-heavy' codebases into semantic, accessible structures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mrpitch/mrp-claude-plugin modern-accessible-html-jsx

For use in Claude.ai and ChatGPT

Download Skill