skillpicker.
Back to all topics
English
← Browse all topicsTools

Agent Skills for HTML

HTML skills cover the document layer of a web page: the landmark and heading skeleton, semantic elements that describe what a region is, forms that collect input, embedded media, accessibility markup, and the head metadata that browsers, crawlers, and social unfurls read. These are tool-category skills, so they tend to operate on files and markup rather than on a running application. Use the ranked list by scanning the sub-topics first and opening the skills whose scope matches the markup you are actually writing. If your page is mostly structure and semantics, start there; if you are wiring up a form or fixing assistive-technology behavior, jump to those entries. Compare two or three candidates on the same piece of markup before committing to one.

1 to start with18 top options

Start with these.

HTML is the document: structure and meaning first, then forms, media, and the metadata that browsers and crawlers need.

These are the closest matches for this work. Start with the first one and open it to install.

The skeleton of a page: landmarks, headings, and sections.Elements that say what a region is, not just how it looks.How a page collects data from a person.Images, video, and other embedded content.Markup that assistive technology can actually use.What browsers, crawlers, and social unfurls read in the head. A sub-problem of this domain with no skills yet.

18 top options

  1. Rank 01
    Direct

    daisyui

    Official daisyUI component-library skill for Tailwind CSS, providing class names for common UI components, semantic colors, and themes in HTML/JSX.

    by saadeghi/daisyui

    • Forms
    10,751 · popularity
    View Agent Skill
Explore 17 more Agent Skills
  1. Rank 09
    Possible

    accessibility

    Notable

    Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

    by addyosmani/web-quality-skills

    • Forms
    • Media
    • Accessibility
    53,493 · popularity
    View Agent Skill
  2. Rank 10
    Possible

    web-design-guidelines

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

    by vercel-labs/agent-skills

    • Semantics
    View Agent Skill
  3. Rank 11
    Possible

    web-artifacts-builder

    Official

    Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

    by anthropics/skills

    View Agent Skill
  4. Rank 12
    Possible

    impeccable

    Frontend interface design skill covering UX, visual hierarchy, accessibility, responsive behavior, theming, and design systems for web UI.

    by pbakaus/impeccable

    Needs (stated): Node.js

    319,215 · popularity
    View Agent Skill
  5. Rank 13
    Possible

    baoyu-markdown-to-html

    Converts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, Mermaid (rendered to PNG via headless Chrome), PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to…

    by jimliu/baoyu-skills

    • Semantics
    • Forms
    31,784 · popularity
    View Agent Skill
  6. Rank 14
    Possible

    archify

    Creates polished architecture, workflow, sequence, and data-flow diagrams as standalone interactive HTML with inline SVG and themes.

    by tt-a1i/archify

    • Semantics
    • Forms
    • Media
    140,157 · popularity
    View Agent Skill
  7. Rank 15
    Possible

    answer-me-with-html

    Notable

    Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally, without being asked, whenever a page would help the reader more than plain text, even if plain text would also work: any explanation of how something works or how parts relate (flow, request path, architecture, code or folder structure, state machine, lifecycle, history); any comparison, trade-off or decision with pros and cons; any diagnosis, review or investigation, especially with several causes or findings to rank; any answer with a table, a numbered or ranked list, steps, branches or several sections; or when the user says "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". When in doubt, use it: a page is quick and cheap to make. Also for explainer videos ("make a video", "做个视频") and for changing its settings. Skip only for small talk, a trivial one-line answer, or when the user asks for plain text.

    by QingYunA/answer-me-with-html

    • Media
    View Agent Skill
  8. Rank 16
    Possible

    hyperframes-core

    The HyperFrames composition contract: build renderable HTML projects with data-* timing attributes, tracks, sub-compositions, and validation.

    by heygen-com/hyperframes

    • Forms
    713,954 · popularity
    View Agent Skill
  9. Rank 17
    Possible

    hyperframes-registry

    Search, install, and wire registry blocks and components into HyperFrames compositions, including wiring installed items into index.html.

    by heygen-com/hyperframes

    • Semantics
    751,896 · popularity
    View Agent Skill
  10. Rank 18
    Possible

    design-system

    Design token architecture, component specifications, CSS variables, and slide generation for systematic design systems.

    by nextlevelbuilder/ui-ux-pro-max-skill

    35,435 · popularity
    View Agent Skill
  11. Rank 19
    Possible

    lark-apps

    Notable

    妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

    by larksuite/cli

    659,164 · popularity
    View Agent Skill
  12. Rank 20
    Possible

    agent-browser

    Browser automation CLI for AI agents: navigate pages, fill forms, click, screenshot, extract data, and test web apps via CDP.

    by vercel-labs/agent-browser

    985,975 · popularity
    View Agent Skill
  13. Rank 21
    Possible

    browser-act

    Browser automation CLI for AI agents: fetch rendered content, fill forms, click, screenshot, and capture network responses.

    by browser-act/skills

    • Semantics

    Needs (stated): Python

    108,177 · popularity
    View Agent Skill
  14. Rank 22
    Possible

    penpot-audit-accessibility

    Official

    Audit a Penpot design against WCAG 2.1/2.2 AA (optionally AAA) and produce a structured severity report: color contrast, touch/target sizes, text alternatives, heading hierarchy, and keyboard/focus order. Proposes fixes — does not auto-apply. Also serves as the Evaluator in the brief-to-screen loop. Triggers: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

    by penpot/penpot-ai-kit

    View Agent Skill
  15. Rank 23
    Possible

    penpot-build-from-code

    Official

    Translate an existing application page, view, or component code into a Penpot screen that is bound to the existing design system — mapping code styles onto semantic tokens and reusing library components instead of raw shapes. Use when the user has real code/markup and wants it reconstructed in Penpot, section by section, on-system. Triggers: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

    by penpot/penpot-ai-kit

    • Forms
    View Agent Skill
  16. Rank 24
    Possible

    penpot-design-to-code-review

    Official

    Review a Penpot design against its implemented code (a source component or Storybook story) and emit a structured DRIFT report. Use when an engineer needs to confirm the build matches the design: extract HTML/CSS from a selection, map its tokens/structure/states to the code component, diff them, and list what each side is missing with severity and a reconciliation. Degrades gracefully to a design-system-token check when no code source is supplied. Triggers: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

    by penpot/penpot-ai-kit

    View Agent Skill
  17. Rank 25
    Possible

    penpot-rename-layers

    Official

    Semantically rename Penpot layers to HTML element names (nav, header, main, section, article, button, input, label, h1-h6, p, ul, li, img) or kebab-case role names, replacing auto-generated names like 'Rectangle 12'. Use to clean up layer naming, prepare a file for handoff, or as a precondition for accessibility audits (heading hierarchy) and design-to-code review (semantic mapping). Triggers: 'rename layers', 'semantic layer names', 'rename to HTML elements', 'clean up layer names', 'fix layer naming', 'add semantic names to layers', 'prepare layers for handoff'.

    by penpot/penpot-ai-kit

    • Document structure
    • Semantics
    • Forms
    View Agent Skill
What this topic covers

What this topic covers

Each sub-topic groups Agent Skills for a specific situation.

Document structure
The skeleton of a page: landmarks, headings, and sections.
Semantics
Elements that say what a region is, not just how it looks.
Forms
How a page collects data from a person.
Media
Images, video, and other embedded content.
Accessibility
Markup that assistive technology can actually use.
Metadata
What browsers, crawlers, and social unfurls read in the head.
Frequently asked questions

Frequently asked questions

What kinds of skills are listed under HTML?
They cover document structure such as landmarks, headings, and sections; semantics; forms; media; accessibility; and metadata. Each is a tool-category skill, meaning it works on markup and files rather than on a deployed service.
How is the list ordered?
The list is ranked by observed search demand, with direct matches to the topic placed first and a cap on how many skills any single publisher can occupy. That keeps the top of the page from being dominated by one source.
Should I start with structure or accessibility?
HTML is the document, so structure and meaning come first, followed by forms, media, and the metadata browsers and crawlers need. Pick the sub-topic that matches the markup in front of you, then compare candidates on that same markup.

How to install an Agent Skill

Start with the first skill on this page. Claude Code reads a SKILL.md once it is in the skills directory:

  • Claude Code — copy the SKILL.md for daisyui into ~/.claude/skills/daisyui/ for yourself, or .claude/skills/daisyui/ to share it with a project.
  • From the registry — run npx skills add saadeghi/daisyui@daisyui.
  • Or download daisyui from its source and place that SKILL.md in the directory above.

How to choose Check the source and the skill’s own instructions before you install. Official and Notable describe where a skill comes from.