Migrate Content Ia
docker/docs
Handle Hugo docs information-architecture moves: discover old vs new URLs, add front matter aliases (Phase 1), update in-repo links (Phase 2), interactive List 2 resolution and fragment validation…
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons.
Install Article Icons
$ npx skills add smallnest/goal-workflow --skill article-icons -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install smallnest/goal-workflow article-icons --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/article-icons .claude/skills/article-icons && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "article-icons" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/article-icons into .claude/skills/article-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "article-icons", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/smallnest/goal-workflow/tree/master/skills/article-iconsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add smallnest/goal-workflow --skill article-icons -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install smallnest/goal-workflow article-icons --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/article-icons .agents/skills/article-icons && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "article-icons" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/article-icons into .agents/skills/article-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "article-icons", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add smallnest/goal-workflow --skill article-icons -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install smallnest/goal-workflow article-icons --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/article-icons .cursor/skills/article-icons && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "article-icons" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/article-icons into .cursor/skills/article-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "article-icons", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/smallnest/goal-workflow.git --path skills/article-icons--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add smallnest/goal-workflow --skill article-icons -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install smallnest/goal-workflow article-icons --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/article-icons .gemini/skills/article-icons && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "article-icons" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/article-icons into .gemini/skills/article-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "article-icons", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install smallnest/goal-workflow article-iconsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add smallnest/goal-workflow --skill article-icons -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/article-icons .github/skills/article-icons && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "article-icons" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/article-icons into .github/skills/article-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "article-icons", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add smallnest/goal-workflow --skill article-icons -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install smallnest/goal-workflow article-icons --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/article-icons .opencode/skills/article-icons && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "article-icons" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/article-icons into .opencode/skills/article-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "article-icons", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
article-icons- GitHub stars
- 289
- Token cost
- ~1.6k tokens
- SKILL.md length
- 690 words
- Files
- 3 (incl. scripts)
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons.
- Works in 5 steps: Read the article. Identify its… → Plan the icon map. For each placement,… → Confirm the plan with the user before… → …
- : /article-icons
- SKILL.md covers Triggers, Inputs, The Tool and Workflow, plus 4 more sections
- Runs Python scripts from its folder; calls python3
What it does
Article Icons is an agent skill from smallnest/goal-workflow. 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 headings, key concepts, lists, and callouts. Triggers on: /article-icons, 配图, 给文章配图标, add icons to article, illustrate with icons.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `scripts/fetch_icon.py` and `scripts/icon_names.json`).
It sits in Frontend & Design, covering Icons and illustration and Markdown. The repository describes itself as: AI-driven development workflow with /prd, /goal, /review-it and /ship-it skills. The licence is MIT.
When your agent uses it
- : /article-icons
- Add icons to article
- Illustrate with icons
Example prompts
- “/article-icons”
Requirements
- Python 3
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Read the article. Identify its structure: title, section headings (#/##//), key concepts, list groups, callouts/warnings, and any…
- Plan the icon map. For each placement, choose a semantically matching icon. Match meaning, not just keywords — a "performance" section →…
- Confirm the plan with the user before editing — show the heading→icon mapping. This is cheap and avoids reworking a whole document.
- Fetch and embed. Run fetch_icon.py for each chosen icon (parallelize independent fetches) and inline the SVG at its placement. See…
- Verify. Re-read the edited file; for HTML, open it / screenshot to confirm icons render and align. Report the mapping you applied.
What it can do on your machine
Read from SKILL.md and the folder at commit b06ab3c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 2 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
itshover.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Article Icons loads about 1.6k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 690 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from smallnest/goal-workflow at commit b06ab3c, republished under its MIT licence (© smallnest). 690 words, ~1,606 tokens.
Download SKILL.mdSave it as
.claude/skills/article-icons/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- article-icons
- description
- 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 headings, key concepts, lists, and callouts. Triggers on: /article-icons, 配图, 给文章配图标, add icons to article, illustrate with icons.
- user-invocable
- true
Article Icons (itshover)
Add tasteful icons to an article using the itshover icon set. itshover publishes 263 icons as shadcn registry components; this skill downloads them and converts each into a clean, static, inline SVG that drops straight into Markdown or HTML — no React, no motion, no build step.
Triggers
Use when the user wants to illustrate a document with icons:
/article-icons <file>- "给这篇文章配图标", "给文章配图", "add icons to this article", "illustrate with icons"
Inputs
- Target file — the article to illustrate (
.md,.html,.mdx, ...). If not given, ask. - Style preferences (optional) — color, size, where icons go. Otherwise use sensible defaults below.
The Tool
scripts/fetch_icon.py is the only moving part. It fetches an icon and prints static SVG to stdout.
# Get one icon (defaults: size 24, color currentColor, stroke-width 2)
python3 scripts/fetch_icon.py heart-icon
# Customize
python3 scripts/fetch_icon.py rocket-icon --size 32 --color "#d97757" --stroke-width 1.5
# Discover names (do this FIRST — names must match exactly)
python3 scripts/fetch_icon.py --list
python3 scripts/fetch_icon.py --search arrow
python3 scripts/fetch_icon.py --search brandscripts/icon_names.json is a cached list of all 263 names for offline reference.
Most icon names end in -icon (e.g. heart-icon, rocket-icon, database-icon), and brands use brand-<name>-icon (e.g. brand-anthropic-icon). But the convention is not universal — real names include shield-check, credit-card, down-chevron, apple-brand-logo, skull-emoji. Never guess a name. Always resolve it with --search first — a wrong guess just wastes a 404.
Workflow
Read the article. Identify its structure: title, section headings (
#/##/<h1>/<h2>), key concepts, list groups, callouts/warnings, and any tech/brand mentions (React, GitHub, AI tools...).Plan the icon map. For each placement, choose a semantically matching icon. Match meaning, not just keywords — a "performance" section →
rocket-iconorzap-icon; a "security" section →shield-iconorlock-icon; a warning callout →alert-triangle-icon. Prefer one consistent icon family (all outline, one color) so the article looks designed, not decorated. Resolve every name with--search.Confirm the plan with the user before editing — show the heading→icon mapping. This is cheap and avoids reworking a whole document.
Fetch and embed. Run
fetch_icon.pyfor each chosen icon (parallelize independent fetches) and inline the SVG at its placement. See embedding rules below.Verify. Re-read the edited file; for HTML, open it / screenshot to confirm icons render and align. Report the mapping you applied.
Embedding Rules
HTML — inline the SVG directly. Wrap heading icons so they align with text:
<h2 style="display:flex;align-items:center;gap:.5rem;">
<svg ...>...</svg> Performance
</h2>Markdown — GitHub-flavored Markdown renders inline HTML, so embed the raw SVG. Keep it on one line and size it small (16–20px) for inline use, 24–28px beside headings:
## <svg ... width="22" height="22" ...>...</svg> Getting StartedIf the target renderer strips inline SVG (some strict Markdown engines do), fall back to saving each SVG into an assets/icons/ folder next to the article and referencing it: . Ask which the user prefers if unsure.
Show full SKILL.md (286 more words)Show less
Defaults
- Size: 24px beside
h1, 20–22px besideh2/h3, 16px inline in text. - Color:
currentColorso icons inherit text color. Override with--coloronly when the user wants accent colors. - Density: one icon per heading + a few for genuinely key concepts. Do not icon every bullet or sentence — restraint reads as polish.
- Alignment: always
display:flex;align-items:center;gap:.4–.5remfor heading icons in HTML.
Icon Selection Cheatsheet
These names are verified to exist, but the set changes — always reconfirm with --search before fetching.
| Theme | Real icon names |
|---|---|
| intro / overview | book-icon, home-icon, globe-icon, map-pin-icon |
| performance / speed | rocket-icon, gauge-icon, clock-icon |
| security | shield-check, lock-icon |
| data / charts | database-family via --search, chart-bar-icon, chart-line-icon, chart-pie-icon, cloud-1-icon |
| settings / config | gear-icon, sliders-horizontal-icon |
| warning / note | triangle-alert-icon, info-circle-icon, filled-bell-icon |
| success / done | checked-icon, double-check-icon, simple-checked-icon |
| ideas | brain-circuit-icon, sparkles-icon, star-icon, bulb-svg |
| AI / brands | brand-anthropic-icon, brand-gemini-icon, ... (--search brand) |
| navigation | arrow-narrow-*-icon, down-chevron, right-chevron |
Edge Cases
| Scenario | Handling |
|---|---|
| Icon name not found (404) | Run --search <term>; pick the closest real name. Never invent names. |
| Icon won't convert (rare; ~2/263 use a JS map for paths) | Script prints a clear error. Pick an alternative icon with similar meaning. |
| No network access | Cannot fetch SVGs; tell the user the skill needs network access to itshover.com. |
| Markdown renderer strips inline SVG | Fall back to assets/icons/*.svg + image references. |
| Article already has icons | Ask whether to replace, supplement, or skip those sections. |
| Very long article | Confirm the mapping for the first few sections, then apply the same family consistently throughout. |
Checklist
Before finishing:
- Every icon name was resolved with
--search/--list(no guessed names) - One consistent icon family/color across the article
- Icons placed at headings + genuinely key points, not everywhere
- Heading icons vertically aligned with text (flex + gap)
- Edited file re-read; HTML visually verified to render
- Mapping summary reported to the user
© smallnest, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files (scripts) in skills/article-icons of smallnest/goal-workflow.
- SKILL.md
- scripts/fetch_icon.py
- scripts/icon_names.json
Open the folder on GitHubat commit b06ab3c
Compare with similar skills
Article Icons next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Article Icons this skillsmallnest/goal-workflow | 289 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Migrate Content Iadocker/docs | 4.7k | — | ~5.1k | Automated safety check: Pass | Apache-2.0 | |
| Using Docs Kitlobehub/lobe-ui | 2.2k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Here Now Internalahmetb/dotfiles | 139 | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Pretty Pagealexknowshtml/claude-skills | 149 | — | ~2.2k | Automated safety check: Notes | None | |
| Md Reviewborghei/Claude-Skills | 881 | — | ~3.8k | Automated safety check: Pass | MIT |
Similar skills
- Official
Using Docs Kit
lobehub/lobe-ui
Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).
Here Now Internal
ahmetb/dotfiles
Upload and share files on here.now (https://here-now.chimera-logarithm.ts.net), Baseten's internal artifact-sharing service.
Pretty Page
alexknowshtml/claude-skills
Convert markdown to a beautifully styled, shareable HTML page and upload to S3-compatible storage
Md Review
borghei/Claude-Skills
Pre-publication quality gate for authored Markdown — heading structure, on-disk link resolution, readability, accessibility, terminology.
Markdown Scanner
Community-Access/accessibility-agents
Internal helper: scan one markdown file across all nine domains.
More from smallnest/goal-workflow
All 20 skills in this repoGraph
smallnest/goal-workflow
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 each independent node concurrently with…
Walkthrough
smallnest/goal-workflow
Generate a Phase-2 Walkthrough artifact (walkthrough.md) once implementation and verification are complete.
Insight Diagram
smallnest/goal-workflow
为任意项目生成 UML 图、架构图和流程图。分析代码库后让用户选择要生成的图表类型，使用 architecture-diagram skill 渲染为 HTML+SVG，保存到 docs/ 目录。适用于任何软件项目的文档可视化。
Code To Spec
smallnest/goal-workflow
Reverse-engineer a SPEC document from an existing project. An agent skill from smallnest/goal-workflow.
Design It
smallnest/goal-workflow
A skill your agent uses 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…
Humanize It
smallnest/goal-workflow
对指定文档进行去 AI 味的改写。自动选择最合适的人性化策略（humanizer-zh / humanize-chinese / technical-writing）， 迭代改写直到效果达标或迭代 42 次为止。适用于中文文本的去 AI 化处理，包括通用文章、技术文档、学术论文等。
Related
Categories
Questions about Article Icons
What does Article Icons do?
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons. Article Icons is an agent skill from smallnest/goal-workflow.com/icons.
When should I use Article Icons?
Article Icons fits situations like: : /article-icons; add icons to article; illustrate with icons.
How do I install Article Icons in Claude Code?
Run `npx skills add smallnest/goal-workflow --skill article-icons -a claude-code`. Or copy the skill folder (skills/article-icons in smallnest/goal-workflow) into .claude/skills/article-icons in your project. Claude Code loads it when a task matches its description.
How do I install Article Icons in Codex?
Run `npx skills add smallnest/goal-workflow --skill article-icons -a codex`. Or copy the skill folder (skills/article-icons in smallnest/goal-workflow) into .agents/skills/article-icons in your project. Codex loads it when a task matches its description.
Can I use Article Icons in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add smallnest/goal-workflow --skill article-icons -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/article-icons, .gemini/skills/article-icons, .github/skills/article-icons and .opencode/skills/article-icons in your project.
What does Article Icons need to run?
Going by SKILL.md and its folder, Article Icons needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3.
Does Article Icons access the network?
SKILL.md names 1 domain. As links in the text: itshover.com. This is read from the text; nothing was executed.
Is Article Icons safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Article Icons use?
Article Icons is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Article Icons use?
About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Article Icons?
Skills that share tags, products or a category with Article Icons: Migrate Content Ia (docker/docs, 4.7k stars), Using Docs Kit (lobehub/lobe-ui, 2.2k stars), Here Now Internal (ahmetb/dotfiles, 139 stars) and Pretty Page (alexknowshtml/claude-skills, 149 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Article Icons?
smallnest (a GitHub user) maintains it in smallnest/goal-workflow, which has 289 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on September 13, 2026.
Source: smallnest/goal-workflow on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.