How do I install the Structure skill?

Run npx skillmds@latest add wanghaisheng/structure in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Structure safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Structure?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Structure free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Structure?

wanghaisheng (@wanghaisheng) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Structure by wanghaisheng — Agent Skill

Name: Structure
Author: wanghaisheng

Structure

Structure content for screen reader and assistive technology use. Chains: heading-structure, alt-text-design, table-accessibility, form-labelling. Use when building a new page, document, or content template and you want to get the structural accessibility right from the start.

wanghaisheng ea1d0df 2.4 KB Updated Sep 17, 2026

File contents

Structure for Assistive Technology

Build content structure that assistive technology can parse, navigate, and present meaningfully — so the structure you designed is the structure every user experiences.

Process

Step 1: Define the Document Outline

Using heading-structure, design the heading hierarchy:

One H1 describing the page purpose
H2s for major sections
H3s for subsections within those
Verify: does reading only the headings tell the full story?

Step 2: Identify Landmarks

Map the page regions that assistive technology uses for navigation:

banner — site header and branding
navigation — primary and secondary nav
main — the primary content area
complementary — sidebars and related content
contentinfo — footer
search — search functionality
form — significant forms (use aria-label to distinguish multiples)

Every page should have at minimum: banner, navigation, main, contentinfo.

Step 3: Structure Images and Media

Using alt-text-design, assign alt text strategy for every image:

Decorative: empty alt
Functional: alt describes the action
Informative: alt describes the information
Complex: short alt plus extended description

Step 4: Structure Data

Using table-accessibility, for every table:

Assign headers with proper scope
Add caption describing the table's content
Plan responsive behaviour for small screens

Step 5: Structure Forms

Using form-labelling, for every form:

Associate every input with a visible label
Group related fields with fieldset/legend
Plan error message association
Define required field indication strategy

Step 6: Define Reading Order

Verify that the DOM order matches the visual order
Content should make sense when read linearly top to bottom
Avoid CSS that visually rearranges content away from DOM order
Tab order should follow reading order

Output

Deliver a structural specification that includes:

Document outline (heading hierarchy)
Landmark map
Image alt text strategy per image type
Table structure specification
Form labelling specification
Reading order confirmation

---name: structuredescription: Structure content for screen reader and assistive technology use. Chains: heading-structure, alt-text-design, table-accessibility, form-labelling. Use when building a new page, document, or content template and you want to get the structural accessibility right from the start.---# Structure for Assistive TechnologyBuild content structure that assistive technology can parse, navigate,and present meaningfully — so the structure you designed is thestructure every user experiences.## Process### Step 1: Define the Document OutlineUsing **heading-structure**, design the heading hierarchy:- One H1 describing the page purpose- H2s for major sections- H3s for subsections within those- Verify: does reading only the headings tell the full story?### Step 2: Identify LandmarksMap the page regions that assistive technology uses for navigation:- banner — site header and branding- navigation — primary and secondary nav- main — the primary content area- complementary — sidebars and related content- contentinfo — footer- search — search functionality- form — significant forms (use aria-label to distinguish multiples)Every page should have at minimum: banner, navigation, main, contentinfo.### Step 3: Structure Images and MediaUsing **alt-text-design**, assign alt text strategy for every image:- Decorative: empty alt- Functional: alt describes the action- Informative: alt describes the information- Complex: short alt plus extended description### Step 4: Structure DataUsing **table-accessibility**, for every table:- Assign headers with proper scope- Add caption describing the table's content- Plan responsive behaviour for small screens### Step 5: Structure FormsUsing **form-labelling**, for every form:- Associate every input with a visible label- Group related fields with fieldset/legend- Plan error message association- Define required field indication strategy### Step 6: Define Reading Order- Verify that the DOM order matches the visual order- Content should make sense when read linearly top to bottom- Avoid CSS that visually rearranges content away from DOM order- Tab order should follow reading order## OutputDeliver a structural specification that includes:- Document outline (heading hierarchy)- Landmark map- Image alt text strategy per image type- Table structure specification- Form labelling specification- Reading order confirmation

Frequently asked questions