html-design-prototypes SKILL.md skillC

html-design-prototypes from sutchan/agent-skills-hub is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add sutchan/agent-skills-hub/html-design-prototypes@git:20261007.ab00264

Pins git:20261007.ab00264 in mdr.lock. Pin the fingerprint instead.

Audit grade
C, 15 of 17 checks passed
Kind
SKILL.md skill
Repository
sutchan/agent-skills-hub
Path
skills/html-design-prototypes/SKILL.md
Versions recorded
7
Latest version
git:20261007.ab00264, committed Oct 7, 2026
First version recorded
Aug 23, 2026
Size
11,750 bytes
Repository stars
2
License
MIT

触发条件:在向 AskUserQuestion 选项填充前,构建 HTML 设计原型。.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# HTML Design & Prototypes

HTML is the fastest design surface available — instant feedback loop, real layout engine, real typography, real interaction. Use it to sketch designs even when the production target is React Native, Swift, or anything else. The translation from HTML+CSS to the final framework is mechanical; the design exploration is what's hard.

<!-- block:preflight -->
## Pre-flight — run BEFORE writing the artifact

Invoke `html-skills:html-skills-listen` (Skill tool) first; it is idempotent. If it returns a URL, inject it verbatim as `window.__CLAUDE_SUBMIT_URL__` in the HTML you are about to write, `?t=` query string included (a local, single-session loopback handshake — not a credential). If it reported web/sandbox mode, leave that line out; `submitToClaude` then falls back to clipboard mode.
<!-- /block:preflight -->

## When to use this skill

- "Design / mock / prototype a [component, screen, animation, transition]"
- "Help me visualize how X should look"
- "Try a few directions for the [hero, card, modal, button]"
- "Tune this animation / interaction"
- "Build a quick playground for the [tooltip, dropdown, picker]"
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add sutchan/agent-skills-hub/html-design-prototypes@sha256:7c77dca50e70df52

The line at the top of this page pins the label git:20261007.ab00264, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_swslwguf6gthx6fo.svg)](https://markdownregistry.com/a/art_swslwguf6gthx6fo)

6 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 7 versions of this file, between Aug 23, 2026 and Oct 7, 2026, about one every 8 days.

versioncommittedcommitsizeaudit
git:20261007.ab00264 latest2026-10-07 ab00264 11,750 BC view · diff
v1.4.02026-10-07 3e74f1b 11,921 BC view · diff
git:20261001.6c38d682026-10-01 6c38d68 11,332 BC view · diff
v1.3.02026-09-09 998370c 11,510 BC view · diff
git:20260825.5a9f8fd2026-08-25 5a9f8fd 19,783 BC view · diff
git:20260823.639511e2026-08-23 639511e 20,682 BC view · diff
v1.2.12026-08-23 0e2bdb6 20,425 BC view

Audit of the latest version

C  15 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • fail: No link to a raw IP address (matched: http://127.0.0.1)
  • fail: No script tag (matched: <script)
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (11750 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters

Starting a new one? Use a template for SKILL.md on mdpantry, which passes every one of these checks and says what to change in it.

Source

GitHub

sutchan/agent-skills-hub · 2 stars · license MIT · pushed 2026-11-06 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_swslwguf6gthx6fo
GET https://markdownregistry.com/api/v1/resolve?ref=sutchan/agent-skills-hub/html-design-prototypes
GET https://markdownregistry.com/api/v1/blob/7c77dca50e70df5289ce6952db5bfae90ccf1c5b2dead5b55b337864fbf3d8d1

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from sutchan/agent-skills-hub

AGENTS.md@docs AGENTS.md file
sutchan/agent-skills-hub · docs/AGENTS.md
git:20261103.bc94795 · audit A · 2 stars
DESIGN.md@prototype DESIGN.md file
sutchan/agent-skills-hub · prototype/DESIGN.md
git:20261105.5aba97e · audit A · 2 stars
ad-creative SKILL.md skill
sutchan/agent-skills-hub · skills/ad-creative/SKILL.md · 规模化生成与迭代广告创意文案、标题与变体
v2.12.2 · audit A · 2 stars
ads-creative SKILL.md skill
sutchan/agent-skills-hub · skills/ads-creative/SKILL.md · 审计付费广告的文案、图片、视频、钩子、概念、格式覆盖、平台原生契合度、信息匹配、创意疲劳、可访问性与政策合规。适用于创意审计、广告文案评审、视频评审、图片评审或生产优先级排定。
git:20261017.b913806 · audit A · 2 stars
agent-browser SKILL.md skill
sutchan/agent-skills-hub · skills/agent-browser/SKILL.md · 为 AI 智能体提供浏览器自动化操作能力
git:20261103.e8273b5 · audit A · 2 stars
agent-development SKILL.md skill
sutchan/agent-skills-hub · skills/agent-development/SKILL.md · 构建与开发 AI 智能体的方法与最佳实践
v0.1.0 · audit A · 2 stars
ai-avatar-video SKILL.md skill
sutchan/agent-skills-hub · skills/ai-avatar-video/SKILL.md · 通过 inference.sh CLI 创建 AI 数字人与口播视频。推荐 P-Video-Avatar(最快最便宜、内置 TTS),另支持 OmniHuman、Fabric、PixVerse;音频可用 Inworld…
git:20261007.ab00264 · audit A · 2 stars
ai-image-generation SKILL.md skill
sutchan/agent-skills-hub · skills/ai-image-generation/SKILL.md · 通过 RunComfy CLI 使用 FLUX 2、GPT Image 2、Seedream、Nano Banana 等 11+ 模型生成和编辑 AI 图像。支持文生图、图生图、局部重绘、LoRA、文字渲染。
git:20261007.ab00264 · audit A · 2 stars
ai-music SKILL.md skill
sutchan/agent-skills-hub · skills/ai-music/SKILL.md · 通过 runcomfy CLI 在 RunComfy 上生成 AI 音乐——智能路由到合适的音乐模型目录。覆盖 ElevenLabs AI 音乐生成( premium 人声轨)与 ACE Step…
git:20261007.ab00264 · audit A · 2 stars
ai-research-reproduction SKILL.md skill
sutchan/agent-skills-hub · skills/ai-research-reproduction/SKILL.md · Rigor Reproduce 兼容技能,面向 README 优先的深度学习仓库复现。当用户想按 README 复现实验结果、核对环境/依赖/随机种子、定位复现差异时使用。
git:20261007.ab00264 · audit A · 2 stars
ai-video-generation-runcomfy SKILL.md skill
sutchan/agent-skills-hub · skills/ai-video-generation-runcomfy/SKILL.md · 通过本地 RunComfy CLI 在 RunComfy 目录中智能路由生成 AI 视频,覆盖文生视频、图生视频、参考视频转视频以及 Veo 视频扩展。作为智能路由器,根据用户真实意图匹配最合适的视频生成模型,并附上对应模型的提示词写法。
git:20261007.ab00264 · audit A · 2 stars
ai-video-generation SKILL.md skill
sutchan/agent-skills-hub · skills/ai-video-generation/SKILL.md · 通过 inference.sh CLI 使用 Google Veo、Seedance、Wan、Grok 等 40+ 模型生成 AI 视频。支持文生视频、图生视频、参考生视频、视频编辑、唇形同步、数字人动画、视频放大、拟音。适用于社媒视频、营…
git:20261007.ab00264 · audit A · 2 stars

Every file in sutchan/agent-skills-hub

Browse by kind, by grade C, or by owner.