Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
A skill your agent uses for packages/svg-icon-baker SVG-to-symbol work: public API, synchronous error model, safe SVGO configuration, local ID and reference rewriting, viewBox handling, and output…
Install SVG Icon Baker
$ npx skills add yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install yangxu52/vite-plugin-svg-icons-ng svg-icon-baker --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/yangxu52/vite-plugin-svg-icons-ng.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/svg-icon-baker .claude/skills/svg-icon-baker && 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 "svg-icon-baker" agent skill from https://github.com/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-baker into .claude/skills/svg-icon-baker/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-icon-baker", 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/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-bakerType 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 yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install yangxu52/vite-plugin-svg-icons-ng svg-icon-baker --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangxu52/vite-plugin-svg-icons-ng.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/svg-icon-baker .agents/skills/svg-icon-baker && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "svg-icon-baker" agent skill from https://github.com/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-baker into .agents/skills/svg-icon-baker/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-icon-baker", 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 yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install yangxu52/vite-plugin-svg-icons-ng svg-icon-baker --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangxu52/vite-plugin-svg-icons-ng.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/svg-icon-baker .cursor/skills/svg-icon-baker && 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 "svg-icon-baker" agent skill from https://github.com/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-baker into .cursor/skills/svg-icon-baker/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-icon-baker", 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/yangxu52/vite-plugin-svg-icons-ng.git --path .agents/skills/svg-icon-baker--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 yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install yangxu52/vite-plugin-svg-icons-ng svg-icon-baker --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangxu52/vite-plugin-svg-icons-ng.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/svg-icon-baker .gemini/skills/svg-icon-baker && 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 "svg-icon-baker" agent skill from https://github.com/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-baker into .gemini/skills/svg-icon-baker/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-icon-baker", 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 yangxu52/vite-plugin-svg-icons-ng svg-icon-bakerInstalls 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 yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/yangxu52/vite-plugin-svg-icons-ng.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/svg-icon-baker .github/skills/svg-icon-baker && 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 "svg-icon-baker" agent skill from https://github.com/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-baker into .github/skills/svg-icon-baker/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-icon-baker", 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 yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install yangxu52/vite-plugin-svg-icons-ng svg-icon-baker --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yangxu52/vite-plugin-svg-icons-ng.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/svg-icon-baker .opencode/skills/svg-icon-baker && 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 "svg-icon-baker" agent skill from https://github.com/yangxu52/vite-plugin-svg-icons-ng/tree/main/.agents/skills/svg-icon-baker into .opencode/skills/svg-icon-baker/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-icon-baker", 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
svg-icon-baker- GitHub stars
- 117
- Token cost
- ~901 tokens
- SKILL.md length
- 399 words
- Files
- 2 (incl. references)
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses for packages/svg-icon-baker SVG-to-symbol work: public API, synchronous error model, safe SVGO configuration, local ID and reference rewriting, viewBox handling, and output…
- Packages/svg-icon-baker SVG-to-symbol work: public API
- SKILL.md covers Scope, Workflow, Invariants and Validation, plus 3 more sections
- Calls pnpm and npm
- Synchronous error model
What it does
SVG Icon Baker is an agent skill from yangxu52/vite-plugin-svg-icons-ng. Use for packages/svg-icon-baker SVG-to-symbol work: public API, synchronous error model, safe SVGO configuration, local ID and reference rewriting, viewBox handling, and output invariants. Trigger for baker, options, oven, package tests, or README changes; do not use for Vite scanning, virtual modules, HMR, workspace, or release work.
Its SKILL.md is about 900 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/behavior.md`).
It sits in Frontend & Design, covering Icons and illustration. It works with Vite. The repository describes itself as: A high-performance SVG icon plugin for Vite that automatically generates SVG sprites from files and injects them at runtime, making icon usage simpler and more efficient ✈️. The licence is MIT.
When your agent uses it
- Packages/svg-icon-baker SVG-to-symbol work: public API
- Synchronous error model
- Safe SVGO configuration
- Local ID and reference rewriting
Example prompts
- “/svg-icon-baker”
What it can do on your machine
Read from SKILL.md and the folder at commit ca598a8. 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
Shell commands in SKILL.md call:
pnpmnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm and npm, which can reach the network depending on how they are called.
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
SVG Icon Baker loads about 901 tokens when it runs, and up to ~2.4k if it reads all its reference files. Until then it costs about 88 tokens; SKILL.md has 399 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); files beside SKILL.md are not scanned.
SKILL.md
The full file from yangxu52/vite-plugin-svg-icons-ng at commit ca598a8, republished under its MIT licence (© yangxu52). 399 words, ~901 tokens.
Download SKILL.mdSave it as
.claude/skills/svg-icon-baker/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- svg-icon-baker
- description
- Use for packages/svg-icon-baker SVG-to-symbol work: public API, synchronous error model, safe SVGO configuration, local ID and reference rewriting, viewBox handling, and output invariants. Trigger for baker, options, oven, package tests, or README changes; do not use for Vite scanning, virtual modules, HMR, workspace, or release work.
- metadata
- author: yangxu52 version: '2026.7.22'
svg-icon-baker
Scope
Use this skill only for packages/svg-icon-baker/:
- public API, types, synchronous exceptions, and diagnostic contracts
- SVG-to-
<symbol>conversion order and root-element rules - SVGO configuration, safe plugin filtering, and ID rewrite policy
- definition, reference, and style-carrier rewriting in
oven/ - package tests and README consistency
Use vite-plugin-svg-icons-ng for the Vite caller's scanning, cache, virtual modules, and HMR. Use vite-plugin-svg-icons-ng-workspace for workspace, release, or cross-package work.
Workflow
Inspect src/baker.ts, src/options.ts, src/types.ts, and the target oven/ module, then confirm boundaries in test/unit/. Read Behavior Reference before changing any of these:
- conversion order, SVGO plugin filtering, or
idPolicy id,href,url(#...), SMIL, ARIA, or<style>reference rewritingBakeError,BakeIssue, public exports, or output markupviewBox, root attributes, or dimension handling
README and CHANGELOG files describe consumer expectations and evolution. When they diverge from source or tests, source and tests win.
Invariants
- Keep the public API synchronous. Current exports include
bakeIcon,bakeIcons,createBaker,BakeError, and the public types insrc/types.ts. BakeResultmust retainname,content, and non-fatal diagnosticissues. Fatal validation, optimization, parsing, and viewBox failures must beBakeErrors.- Successful output must be
<symbol>...</symbol>with rootid === source.nameand aviewBox; old rootid,width, andheightmust not remain. - Optimization precedes internal ID rewriting. Do not restore the old rewrite-then-optimize order or make SVGO
prefixIdsorcleanupIdsthe naming authority. - When rewriting is enabled, build one stable map for local definitions before rewriting references. Unresolved references must follow
idPolicy.unresolvedand report an issue. idPolicy.rewrite: falsemust skip the internal rewrite layer.
Show full SKILL.md (153 more words)Show less
Validation
- Unit tests:
pnpm --filter svg-icon-baker run test - Typecheck:
pnpm --filter svg-icon-baker run typecheck - Package build:
pnpm --filter svg-icon-baker run build - Publication entry changes:
npm pack --dry-run --json
Should Trigger
- "Why do optimized SVG references not share one namespace?"
- "Change
idPolicy,BakeIssue, orBakeError." - "Why is my custom SVGO plugin filtered?"
- "Fix local IDs in SMIL, ARIA, or style content."
Should Not Trigger
- "Why does adding an icon not hot-update the browser?"
- "Change the SSR output of
virtual:svg-icons/sprite." - "Change the pnpm workspace or release tag."
Gotchas
- Do not use README prose as the sole conversion source of truth. Dimension stripping is guaranteed by root rewriting, not by an explicit
removeDimensionsplugin in currentoptions.ts. - Do not omit
createBakeror make the synchronous API asynchronous. - Do not preserve or rewrite unresolved local references silently; emit a
BakeIssue. - Do not decide whether a local definition enters the ID map based on whether it is referenced.
© yangxu52, 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 1 other file (references) in .agents/skills/svg-icon-baker of yangxu52/vite-plugin-svg-icons-ng.
- SKILL.md
- references/behavior.md
Open the folder on GitHubat commit ca598a8
Compare with similar skills
SVG Icon Baker 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 |
|---|---|---|---|---|---|---|
| SVG Icon Baker this skillyangxu52/vite-plugin-svg-icons-ng | 117 | — | ~901 | Automated safety check: Pass | MIT | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Kill AI Slopyetone/kill-ai-slop | 1.3k | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Better Iconsdtsola/xiaoyaosearch | 1k | 2 repos | ~895 | Automated safety check: Pass | Custom licence | |
| Design To CodeMigoXLab/coderio | 114 | 2 repos | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| Nuxt UImegaarmos/vue-spring-bottom-sheet | 141 | 1 repos | ~2.5k | Automated safety check: Pass | MIT |
Similar skills
Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
Better Icons
dtsola/xiaoyaosearch
Searches more than 200 Iconify icon libraries and fetches icons as SVG from a command line tool or an MCP server.
Design To Code
MigoXLab/coderio
Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.
Nuxt UI
megaarmos/vue-spring-bottom-sheet
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming.
Cross Platform Tauri UI
ifer47/markeron
Cross-platform UI styling for MarkerOn Tauri app (macOS WKWebView vs Windows WebView2).
More from yangxu52/vite-plugin-svg-icons-ng
Vite Plugin SVG Icons Ng
yangxu52/vite-plugin-svg-icons-ng
A skill your agent uses for packages/vite-plugin-svg-icons-ng implementation work: icon scanning, compilation and caching, symbolId generation, HTML injection, Vite virtual modules, SSR, and HMR.
Vite Plugin SVG Icons Ng Workspace
yangxu52/vite-plugin-svg-icons-ng
A skill your agent uses for repository-level work in the vite-plugin-svg-icons-ng pnpm workspace: package boundaries, root scripts, docs and playground ownership, release tags, CI, and cross-package…
Vite Plugin SVG Icons Ng
yangxu52/vite-plugin-svg-icons-ng
Consumer setup and integration for vite-plugin-svg-icons-ng: installation, createSvgIconsPlugin configuration, direct SVG usage, Vue 3 and React components, htmlMode, virtual modules, TypeScript…
Related
Works with
Categories
Questions about SVG Icon Baker
What does SVG Icon Baker do?
A skill your agent uses for packages/svg-icon-baker SVG-to-symbol work: public API, synchronous error model, safe SVGO configuration, local ID and reference rewriting, viewBox handling, and output…. SVG Icon Baker is an agent skill from yangxu52/vite-plugin-svg-icons-ng. Use for packages/svg-icon-baker SVG-to-symbol work: public API, synchronous error model, safe SVGO configuration, local ID and reference rewriting, viewBox handling, and output invariants.
When should I use SVG Icon Baker?
SVG Icon Baker fits situations like: packages/svg-icon-baker SVG-to-symbol work: public API; synchronous error model; safe SVGO configuration; local ID and reference rewriting.
How do I install SVG Icon Baker in Claude Code?
Run `npx skills add yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a claude-code`. Or copy the skill folder (.agents/skills/svg-icon-baker in yangxu52/vite-plugin-svg-icons-ng) into .claude/skills/svg-icon-baker in your project. Claude Code loads it when a task matches its description.
How do I install SVG Icon Baker in Codex?
Run `npx skills add yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a codex`. Or copy the skill folder (.agents/skills/svg-icon-baker in yangxu52/vite-plugin-svg-icons-ng) into .agents/skills/svg-icon-baker in your project. Codex loads it when a task matches its description.
Can I use SVG Icon Baker 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 yangxu52/vite-plugin-svg-icons-ng --skill svg-icon-baker -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/svg-icon-baker, .gemini/skills/svg-icon-baker, .github/skills/svg-icon-baker and .opencode/skills/svg-icon-baker in your project.
What does SVG Icon Baker need to run?
Going by SKILL.md and its folder, SVG Icon Baker needs the command-line tools its instructions call (pnpm and npm).
Does SVG Icon Baker access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is SVG Icon Baker 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. Review the folder before installing.
What licence does SVG Icon Baker use?
SVG Icon Baker 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 SVG Icon Baker use?
About 901 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.5k tokens, read only when the agent opens those files.
What are the alternatives to SVG Icon Baker?
Skills that share tags, products or a category with SVG Icon Baker: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Better Icons (dtsola/xiaoyaosearch, 1k stars) and Design To Code (MigoXLab/coderio, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains SVG Icon Baker?
yangxu52 (a GitHub user) maintains it in yangxu52/vite-plugin-svg-icons-ng, which has 117 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on September 28, 2026.
Source: yangxu52/vite-plugin-svg-icons-ng on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.