agentleFS
Sign inStart free
MindrallyMindrally/skills/html/SKILL.md

html

Skill275 starsChanged 34 days agoApache-2.0View on GitHub

Guidelines for semantic HTML markup, document structure, forms, accessibility attributes, and modern HTML best practices

18 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use thermo-nuclear-code-quality-review, prototype and 4 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • jaydubya818Skill

    thermo-nuclear-code-quality-review

    Use when the user requests an intentionally strict maintainability review.

    Also in 3 projects that use this

  • GoogleSkill

    prototype

    Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

    Also in 4 projects that use this

  • GoogleSkill

    to-spec

    Turn the current conversation into a spec and publish it to the project issue tracker — no interview, just synthesis of what you've already discussed.

    Also in 3 projects that use this

  • MicrosoftSkill

    handoff

    Compact the current conversation into a handoff document for another agent to pick up.

    Also in 4 projects that use this

  • +2 more from google

The file

Show its rules and text

We split this skill into the rules it gives an agent

46 rules. 0 are common, 16 are distinctive, and 30 are very specific to this project.

  • 0

    Common

    Most of the 17 edited versions we read keep these.

  • 16

    Distinctive

    This author's own choices. Worth a look.

  • 30

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Write semantic HTML to improve accessibility and SEO

    line 13
  2. Distinctive:

    Use appropriate elements for their intended purpose

    line 14
  3. Distinctive:

    Ensure proper document structure and hierarchy

    line 15
  4. Very specific:

    Use <header> for introductory content and navigation

    line 21
  5. Very specific:

    Use <main> for the primary content (one per page)

    line 22
  6. Very specific:

    Use <footer> for footer content

    line 23
  7. Very specific:

    Use <nav> for navigation sections

    line 24
  8. Very specific:

    Use <aside> for tangentially related content

    line 25
  9. Very specific:

    Use <article> for self-contained, distributable content

    line 28
  10. Very specific:

    Use <section> for thematic grouping of content

    line 29
  11. Very specific:

    Use appropriate heading hierarchy (<h1> through <h6>)

    line 30
  12. Very specific:

    Only one <h1> per page, representing the main topic

    line 31
  13. Very specific:

    Use <p> for paragraphs

    line 34
  14. Very specific:

    Use <ul>, <ol>, <dl> for lists appropriately

    line 35
  15. Very specific:

    Use <blockquote> for quotations

    line 36
  16. Very specific:

    Use <figure> and <figcaption> for illustrations

    line 37
  17. Very specific:

    Use <button> for clickable actions that don't navigate

    line 42
  18. Very specific:

    Use <a> for links that navigate to URLs

    line 43
  19. Very specific:

    Always include href attribute on links

    line 44
  20. Very specific:

    Never use <div> or <span> for clickable elements

    line 45
  21. Very specific:

    Use <form> with proper action and method attributes

    line 48
  22. Very specific:

    Use appropriate input types (email, tel, number, etc.)

    line 50
  23. Very specific:

    Always include alt attribute for images

    line 57
  24. Distinctive:

    Use descriptive alt text for informational images

    line 58
  25. Very specific:

    Use empty alt="" for decorative images

    line 59
  26. Very specific:

    Use srcset and sizes for responsive images

    line 60
  27. Very specific:

    Use poster attribute for video thumbnails

    line 66
  28. Distinctive:

    Consider autoplay impact on user experience

    line 67
  29. Distinctive:

    Use ARIA when native HTML semantics are insufficient

    line 72
  30. Distinctive:

    Prefer native HTML elements over ARIA when possible

    line 73
  31. Distinctive:

    Ensure ARIA attributes match actual element behavior

    line 74
  32. Distinctive:

    Use landmark roles to define page regions

    line 84
  33. Distinctive:

    Ensure all content is within a landmark

    line 85
  34. Very specific:

    Use role="main", role="navigation", etc., only when semantic elements aren't available

    line 86
  35. Distinctive:

    Use appropriate meta tags for SEO

    line 94
  36. Distinctive:

    Use lowercase for element names and attributes

    line 100
  37. Very specific:

    Avoid <font>, <center>, <b>, <i> for styling

    line 103
  38. Distinctive:

    Use CSS for visual presentation

    line 104
  39. Very specific:

    Use <strong> and <em> for semantic emphasis

    line 105
  40. Distinctive:

    When using HTMX for interactivity:

    line 109
  41. Very specific:

    Use hx-get, hx-post attributes for server requests

    line 110
  42. Very specific:

    Use hx-swap to control how content is inserted

    line 112
  43. Very specific:

    Use hx-push-url for URL updates without full refresh

    line 114
  44. Distinctive:

    Use Bootstrap components with proper markup structure

    line 120
  45. Distinctive:

    Use Bootstrap's utility classes for spacing and typography

    line 122
  46. Very specific:

    Use loading="lazy" for below-fold images

    line 129

“Common” is measured: kept by at least 6 in 10 of the 17 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

HTML Development Guidelines

Core Principles

  • Write semantic HTML to improve accessibility and SEO
  • Use appropriate elements for their intended purpose
  • Ensure proper document structure and hierarchy
  • Prioritize accessibility by using ARIA roles and attributes when needed

Semantic Elements

Document Structure

  • Use <header> for introductory content and navigation
  • Use <main> for the primary content (one per page)
  • Use <footer> for footer content
  • Use <nav> for navigation sections
  • Use <aside> for tangentially related content

Content Sections

  • Use <article> for self-contained, distributable content
  • Use <section> for thematic grouping of content
  • Use appropriate heading hierarchy (<h1> through <h6>)
  • Only one <h1> per page, representing the main topic

Text Content

  • Use <p> for paragraphs
  • Use <ul>, <ol>, <dl> for lists appropriately
  • Use <blockquote> for quotations
  • Use <figure> and <figcaption> for illustrations

Interactive Elements

Buttons and Links

  • Use <button> for clickable actions that don't navigate
  • Use <a> for links that navigate to URLs
  • Always include href attribute on links
  • Never use <div> or <span> for clickable elements

Forms

  • Use <form> with proper action and method attributes
  • Associate labels with inputs using for attribute
  • Use appropriate input types (email, tel, number, etc.)
  • Group related inputs with <fieldset> and <legend>
  • Include validation attributes (required, pattern, min, max)

Media Elements

Images

  • Always include alt attribute for images
  • Use descriptive alt text for informational images
  • Use empty alt="" for decorative images
  • Use srcset and sizes for responsive images
  • Include width and height to prevent layout shift

Video and Audio

  • Provide captions and transcripts
  • Include multiple source formats for compatibility
  • Use poster attribute for video thumbnails
  • Consider autoplay impact on user experience

Accessibility (ARIA)

When to Use ARIA

  • Use ARIA when native HTML semantics are insufficient
  • Prefer native HTML elements over ARIA when possible
  • Ensure ARIA attributes match actual element behavior

Common ARIA Attributes

  • aria-label for accessible names
  • aria-describedby for additional descriptions
  • aria-hidden for decorative elements
  • aria-expanded for expandable sections
  • aria-live for dynamic content updates

Landmarks

  • Use landmark roles to define page regions
  • Ensure all content is within a landmark
  • Use role="main", role="navigation", etc., only when semantic elements aren't available

Best Practices

Document Meta

  • Include proper <!DOCTYPE html> declaration
  • Set language attribute on <html> element
  • Include viewport meta tag for responsive design
  • Use appropriate meta tags for SEO

Code Quality

  • Validate HTML using W3C validator
  • Maintain consistent indentation
  • Close all tags properly (including self-closing)
  • Use lowercase for element names and attributes

Deprecated Elements

  • Avoid <font>, <center>, <b>, <i> for styling
  • Use CSS for visual presentation
  • Use <strong> and <em> for semantic emphasis

HTMX Integration

When using HTMX for interactivity:

  • Use hx-get, hx-post attributes for server requests
  • Leverage hx-target to specify update targets
  • Use hx-swap to control how content is inserted
  • Implement hx-confirm for critical actions
  • Use hx-push-url for URL updates without full refresh

Bootstrap Integration

When using Bootstrap:

  • Leverage Bootstrap's grid system for layouts
  • Use Bootstrap components with proper markup structure
  • Include necessary ARIA attributes with components
  • Use Bootstrap's utility classes for spacing and typography
  • Minimize custom CSS by using Bootstrap classes

Performance

  • Minimize DOM depth and complexity
  • Load scripts with defer or async when appropriate
  • Use loading="lazy" for below-fold images
  • Preload critical resources with <link rel="preload">

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free