HTML向けの Agent Skills

WCAG 2.2ガイドラインに沿ってウェブアクセシビリティを監査・改善します。「アクセシビリティを改善」「a11y監査」「WCAG準拠」「スクリーンリーダー対応」「キーボードナビゲーション」「アクセシブルにする」といった依頼で使用します。

提供元：addyosmani/web-quality-skills

• Forms
• Media
• Accessibility

Web Interface Guidelines への準拠について UI コードをレビューします。「review my UI」「check accessibility」「audit design」「review UX」「check my site against best practices」と依頼されたときに使用します。

提供元：vercel-labs/agent-skills

• Semantics

モダンなフロントエンドWeb技術（React、Tailwind CSS、shadcn/ui）を用いて、精巧で多コンポーネントのclaude.ai HTMLアーティファクトを作成するためのツール群。状態管理、ルーティング、shadcn/uiコンポーネントを必要とする複雑なアーティファクト向け — 単純な単一ファイルのHTML/JSXアーティファクトには向かない。

提供元：anthropics/skills

フロントエンドインターフェース設計のskill。ウェブUIのUX、視覚的階層、アクセシビリティ、レスポンシブ挙動、テーマ設定、デザインシステムを網羅。

提供元：pbakaus/impeccable

前提条件（自己申告）: Node.js

MarkdownをWeChat互換テーマ付きのスタイル済みHTMLに変換。コードハイライト、数式、Mermaid（ヘッドレスChromeでPNGにレンダリング）、PlantUML、脚注、アラート、インフォグラフィック、外部リンク向けの任意の末尾引用をサポート。ユーザーが「markdown to html」「convert md to…」を求めたときに使用。

提供元：jimliu/baoyu-skills

• Semantics
• Forms

洗練されたアーキテクチャ、ワークフロー、シーケンス、データフロー図を、インラインSVGとテーマを備えたスタンドアロンのインタラクティブHTMLとして作成します。

提供元：tt-a1i/archify

• Semantics
• Forms
• Media

回答を1ページのビジュアルHTML解説に変換します。モデルが短いMarkdownの下書きを書き、同梱のCLIが1ページを構築します。読者にとってプレーンテキストよりページの方が役立つときは、頼まれなくても積極的かつ気軽に使ってください。プレーンテキストでも十分な場合でも使います。仕組みや各部分の関係の説明（フロー、リクエスト経路、アーキテクチャ、コードやフォルダ構成、状態機械、ライフサイクル、履歴）、長所と短所を伴う比較・トレードオフ・意思決定、診断・レビュー・調査（特に原因や所見が複数あり順位付けが必要な場合）、表・番号付きや順位付きリスト・手順・分岐・複数セクションを含む回答、またはユーザーが「I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图」と言ったときに使います。迷ったら使ってください。ページは素早く安価に作れます。解説動画（「make a video」「做个视频」）や設定変更にも使います。雑談、取るに足らない一行の回答、ユーザーがプレーンテキストを求めた場合のみ省略してください。

提供元：QingYunA/answer-me-with-html

• Media

HyperFramesコンポジション契約。data-*タイミング属性、トラック、サブコンポジション、検証を備えたレンダリング可能なHTMLプロジェクトを構築。

提供元：heygen-com/hyperframes

• Forms

レジストリのブロックとコンポーネントを検索・インストールし、HyperFramesコンポジションに組み込む。インストール済みアイテムをindex.htmlに配線する作業も含む。

提供元：heygen-com/hyperframes

• Semantics

体系的なデザインシステムのためのデザイントークンアーキテクチャ、コンポーネント仕様、CSS 変数、スライド生成。

提供元：nextlevelbuilder/ui-ux-pro-max-skill

妙搭（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）。

提供元：larksuite/cli

AIエージェント向けのブラウザ自動化CLI：CDP経由でページのナビゲート、フォーム入力、クリック、スクリーンショット、データ抽出、ウェブアプリのテストを行います。

提供元：vercel-labs/agent-browser

AIエージェント向けブラウザ自動化CLI：レンダリング済みコンテンツの取得、フォーム入力、クリック、スクリーンショット、ネットワーク応答のキャプチャ。

提供元：browser-act/skills

• Semantics

前提条件（自己申告）: Python

PenpotデザインをWCAG 2.1/2.2 AA（任意でAAA）に照らして監査し、構造化された重大度レポートを作成します。対象は色のコントラスト、タッチ/ターゲットサイズ、テキスト代替、見出し階層、キーボード/フォーカス順序です。修正案を提示しますが自動適用はしません。brief-to-screenループではEvaluatorとしても機能します。トリガー: 'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。

提供元：penpot/penpot-ai-kit

既存のアプリケーションページ、ビュー、またはコンポーネントのコードを、既存のデザインシステムにバインドされたPenpotスクリーンに変換します。コードのスタイルをセマンティックトークンにマッピングし、生のシェイプではなくライブラリコンポーネントを再利用します。ユーザーが実際のコード/マークアップを持ち、それをPenpotでセクションごとにオンステムで再構築したい場合に使用します。トリガー：「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」。

提供元：penpot/penpot-ai-kit

• Forms

Penpotデザインを実装コード（ソースコンポーネントまたはStorybookストーリー）と照合してレビューし、構造化されたDRIFTレポートを出力します。エンジニアがビルドがデザインと一致するか確認する必要があるときに使用します。選択範囲からHTML/CSSを抽出し、そのトークン/構造/状態をコードコンポーネントにマッピングし、差分を取り、各側に欠けているものを重大度と調整案とともに列挙します。コードソースが提供されない場合は、デザインシステムトークンのチェックに優雅にフォールバックします。トリガー: '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'。

提供元：penpot/penpot-ai-kit

PenpotのレイヤーをHTML要素名（nav、header、main、section、article、button、input、label、h1-h6、p、ul、li、img）またはケバブケースのロール名に意味的にリネームし、「Rectangle 12」のような自動生成名を置き換えます。レイヤー命名の整理、引き継ぎ用ファイルの準備、またはアクセシビリティ監査（見出し階層）やデザインtoコードレビュー（セマンティックマッピング）の前提条件として使用します。トリガー: 「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」。

提供元：penpot/penpot-ai-kit

• Document structure
• Semantics
• Forms