Skill
article-icons
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons. Fetches icons as clean inline SVG and places them at section…
@smallnestView SkillDevelopment
Skill
/design-it
Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents, architecture/sequence SVG diagrams, code/SQL/YAML blocks, callout boxes, an aligned-decisions (已对齐结论)
Install
$ npx -y skills add smallnest/goal-workflow --skill design-it --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/design-it
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents, architecture/sequence SVG diagrams, code/SQL/YAML blocks, callout boxes, an aligned-decisions (已对齐结论)
SKILL.md
design-it.SKILL.mdname: design-it
description: Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents, architecture/sequence SVG diagrams, code/SQL/YAML blocks, callout boxes, an aligned-decisions (已对齐结论) panel, test cases, and a code index. Reuse for any new 需求/设计文档 that should look identical every time.
design-it
Overview
Generate a technical design document as **one self-contained HTML file** in a fixed house style, so every new 需求 produces a visually identical page. The look is not improvised each time — it comes from a fixed `<style>` block and a fixed section skeleton. Your job is to fill content into that skeleton, never to redesign it.
**Core principle:** Copy `template.html` verbatim, then replace only the content. Keep the `<style>` block byte-for-byte. Consistency comes from *not* touching the design system.
When to Use
- The user gives a new requirement / spec / feature and wants a design doc.
- Converting a `.md` technical spec into the shareable HTML form.
- Any request like "生成同样的 html / 用这套模板 / 出一份设计文档".
**When NOT to use:** quick throwaway notes, a real Markdown deliverable the user wants to stay Markdown, or slide decks.
Workflow
1. **Copy the template.** Start from `template.html` in this skill's directory. Do not hand-roll the `<head>`/`<style>` — copy it whole. 2. **Gather real content first.** Section titles, field names, SQL, `file:line` code positions, protoIds — all must come from the actual requirement doc and codebase. Read the code; do not invent identifiers. If a fact is unknown, mark it `<span class="pill todo">待确认</span>`, never guess. 3. **Fill the skeleton.** Rename/reorder `<section>`s to fit the feature. Keep the section *kinds*: 已对齐结论 → 业务规则 → 架构图 → 时序 → 数据模型 → 契约 → 清单 → 幂等降级 → 测试用例 → 代码索引 → 变更记录. Drop what doesn't apply; add feature-specific ones in the same style. 4. **Keep TOC and sections in sync.** Every `<a href="#x">` needs a matching `<section id="x">`, and vice versa. This is the #1 breakage — verify at the end (see Quick Reference). 5. **Save** as `docs/<需求名>.html`. Don't commit unless asked.
House-Style Rules (non-negotiable)
| Element | Rule | |---|---| | `<style>` block | Copy verbatim. Never restyle. Colors come from `:root` CSS variables only. | | Code / SQL / YAML | Always the template's `<pre style="background:#f8fafc;...">`. **Inside `<pre>`, escape `<`→`<`, `>`→`>`, `&`→`&`.** Unescaped `<` silently eats content. | | Callout boxes | `.note` (橙, 提醒/易错), `.tip` (蓝, 正向补充), `.warn` (红, 风险). Use the right color for the meaning. | | Diagrams | Hand-authored inline `<svg>` inside `<figure>`; text uses `.svg-t`/`.svg-s`/`.svg-title`; node fills use `:root` vars (`var(--new-bg)` etc.), matching the `.legend`. | | Intro | Each section opens with one `<p class="lead">` stating what it answers. | | Pills | `.pill.new/.old/.infra/.mq/.prod/.tech/.done/.todo` for status tags — reuse, don't invent classes. | | Tables | Plain `<table>` — the CSS handles zebra striping and header shading. | | Lang | `<html lang="zh">`; body copy in the doc's language (usually 中文). |
Common Mistakes
- **Redesigning the CSS.** The whole point is identical output — don't "improve" colors, spacing, or fonts. Copy `<style>` untouched.
- **Unescaped angle brackets in `<pre>`.** `List<String>` renders as a broken tag. Escape to `List<String>`.
- **Dead TOC links.** Adding a section without its TOC entry (or renaming an `id` and forgetting the `href`). Always cross-check.
- **Inventing code positions.** `file:line`, table names, protoIds must be read from the repo. Unknown → `待确认` pill, not a plausible-looking guess.
- **Making it a proposal.** Keep it a *design doc* (what/how, locked decisions), not a persuasive pitch.
Quick Reference — final self-check
f="docs/<需求名>.html"
# TOC hrefs vs section ids must match exactly (no output = perfect):
diff <(grep -oE 'href="#[a-z0-9-]+"' "$f" | sed 's/.*#//;s/"//' | sort -u) \
<(grep -oE '<section id="[a-z0-9-]+"' "$f" | sed 's/.*"//' | sort -u)
# open in browser to eyeball diagrams + code blocks render cleanlyRead more
name: design-it description: Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents, architecture/sequence SVG diagrams, code/SQL/YAML blocks, callout boxes, an aligned-decisions (已对齐结论) panel, test cases, and a code index. Reuse for any new 需求/设计文档 that should look identical every time.
design-it
Overview
Generate a technical design document as **one self-contained HTML file** in a fixed house style, so every new 需求 produces a visually identical page. The look is not improvised each time — it comes from a fixed `<style>` block and a fixed section skeleton. Your job is to fill content into that skeleton, never to redesign it.
**Core principle:** Copy `template.html` verbatim, then replace only the content. Keep the `<style>` block byte-for-byte. Consistency comes from *not* touching the design system.
When to Use
- The user gives a new requirement / spec / feature and wants a design doc.
- Converting a `.md` technical spec into the shareable HTML form.
- Any request like "生成同样的 html / 用这套模板 / 出一份设计文档".
**When NOT to use:** quick throwaway notes, a real Markdown deliverable the user wants to stay Markdown, or slide decks.
Workflow
1. **Copy the template.** Start from `template.html` in this skill's directory. Do not hand-roll the `<head>`/`<style>` — copy it whole. 2. **Gather real content first.** Section titles, field names, SQL, `file:line` code positions, protoIds — all must come from the actual requirement doc and codebase. Read the code; do not invent identifiers. If a fact is unknown, mark it `<span class="pill todo">待确认</span>`, never guess. 3. **Fill the skeleton.** Rename/reorder `<section>`s to fit the feature. Keep the section *kinds*: 已对齐结论 → 业务规则 → 架构图 → 时序 → 数据模型 → 契约 → 清单 → 幂等降级 → 测试用例 → 代码索引 → 变更记录. Drop what doesn't apply; add feature-specific ones in the same style. 4. **Keep TOC and sections in sync.** Every `<a href="#x">` needs a matching `<section id="x">`, and vice versa. This is the #1 breakage — verify at the end (see Quick Reference). 5. **Save** as `docs/<需求名>.html`. Don't commit unless asked.
House-Style Rules (non-negotiable)
| Element | Rule | |---|---| | `<style>` block | Copy verbatim. Never restyle. Colors come from `:root` CSS variables only. | | Code / SQL / YAML | Always the template's `<pre style="background:#f8fafc;...">`. **Inside `<pre>`, escape `<`→`<`, `>`→`>`, `&`→`&`.** Unescaped `<` silently eats content. | | Callout boxes | `.note` (橙, 提醒/易错), `.tip` (蓝, 正向补充), `.warn` (红, 风险). Use the right color for the meaning. | | Diagrams | Hand-authored inline `<svg>` inside `<figure>`; text uses `.svg-t`/`.svg-s`/`.svg-title`; node fills use `:root` vars (`var(--new-bg)` etc.), matching the `.legend`. | | Intro | Each section opens with one `<p class="lead">` stating what it answers. | | Pills | `.pill.new/.old/.infra/.mq/.prod/.tech/.done/.todo` for status tags — reuse, don't invent classes. | | Tables | Plain `<table>` — the CSS handles zebra striping and header shading. | | Lang | `<html lang="zh">`; body copy in the doc's language (usually 中文). |
Common Mistakes
- **Redesigning the CSS.** The whole point is identical output — don't "improve" colors, spacing, or fonts. Copy `<style>` untouched.
- **Unescaped angle brackets in `<pre>`.** `List<String>` renders as a broken tag. Escape to `List<String>`.
- **Dead TOC links.** Adding a section without its TOC entry (or renaming an `id` and forgetting the `href`). Always cross-check.
- **Inventing code positions.** `file:line`, table names, protoIds must be read from the repo. Unknown → `待确认` pill, not a plausible-looking guess.
- **Making it a proposal.** Keep it a *design doc* (what/how, locked decisions), not a persuasive pitch.
Quick Reference — final self-check
f="docs/<需求名>.html"
# TOC hrefs vs section ids must match exactly (no output = perfect):
diff <(grep -oE 'href="#[a-z0-9-]+"' "$f" | sed 's/.*#//;s/"//' | sort -u) \
<(grep -oE '<section id="[a-z0-9-]+"' "$f" | sed 's/.*"//' | sort -u)
# open in browser to eyeball diagrams + code blocks render cleanly Ships withgoal-workflow-skills
An AI-driven development workflow — from PRD to shipped code, all within Claude Code.
Get the whole plugin
Other skills on goal-workflow-skills.
@smallnestView SkillSkill
code-to-spec
Reverse-engineer a SPEC document from an existing project. Analyzes code, config, tests, and structure to produce a comprehensive specification. Triggers on:…
@smallnestView SkillSkill
graph
Graph engineering for parallel task execution: convert a task, PRD, SPEC, or issue set into a dependency graph (DAG), layer it into supersteps, then implement…
@smallnestView SkillSkill
humanize-it
对指定文档进行去 AI 味的改写。自动选择最合适的人性化策略（humanizer-zh / humanize-chinese / technical-writing）， 迭代改写直到效果达标或迭代 42 次为止。适用于中文文本的去 AI 化处理，包括通用文章、技术文档、学术论文等。 Use when user…
@smallnestView SkillSkill
insight-diagram
为任意项目生成 UML 图、架构图和流程图。分析代码库后让用户选择要生成的图表类型，使用 architecture-diagram skill 渲染为 HTML+SVG，保存到 docs/ 目录。适用于任何软件项目的文档可视化。
@smallnestView SkillSkill
listenhub-tts
使用 ListenHub API 将文本转换为语音（TTS）。支持三种模式：快速合成（/v1/tts）、 多角色脚本（/v1/speech）、长文本流式合成（/v1/flow-speech/episodes）。 音色未指定时自动获取音色列表供用户选择，默认使用 chat-girl-105-cn（晓曼）。 Use…
@smallnestView Skill