Frontend Code Review
ProgrammerAnthony/Anything-Extract
指导在项目中对前端代码（Next.js/React/TypeScript/Tailwind 等）进行结构、可维护性、性能与一致性审查，基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码（如 .py）。
Guide for updating Iconify icons and IconNames conventions in BMM.
Install Bmm Iconify Icons
$ npx skills add Y80/bmm --skill bmm-iconify-icons -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Y80/bmm bmm-iconify-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/Y80/bmm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/bmm-iconify-icons .claude/skills/bmm-iconify-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 "bmm-iconify-icons" agent skill from https://github.com/Y80/bmm/tree/main/.agents/skills/bmm-iconify-icons into .claude/skills/bmm-iconify-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "bmm-iconify-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/Y80/bmm/tree/main/.agents/skills/bmm-iconify-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 Y80/bmm --skill bmm-iconify-icons -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Y80/bmm bmm-iconify-icons --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Y80/bmm.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/bmm-iconify-icons .agents/skills/bmm-iconify-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 "bmm-iconify-icons" agent skill from https://github.com/Y80/bmm/tree/main/.agents/skills/bmm-iconify-icons into .agents/skills/bmm-iconify-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "bmm-iconify-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 Y80/bmm --skill bmm-iconify-icons -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Y80/bmm bmm-iconify-icons --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Y80/bmm.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/bmm-iconify-icons .cursor/skills/bmm-iconify-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 "bmm-iconify-icons" agent skill from https://github.com/Y80/bmm/tree/main/.agents/skills/bmm-iconify-icons into .cursor/skills/bmm-iconify-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "bmm-iconify-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/Y80/bmm.git --path .agents/skills/bmm-iconify-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 Y80/bmm --skill bmm-iconify-icons -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Y80/bmm bmm-iconify-icons --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Y80/bmm.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/bmm-iconify-icons .gemini/skills/bmm-iconify-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 "bmm-iconify-icons" agent skill from https://github.com/Y80/bmm/tree/main/.agents/skills/bmm-iconify-icons into .gemini/skills/bmm-iconify-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "bmm-iconify-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 Y80/bmm bmm-iconify-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 Y80/bmm --skill bmm-iconify-icons -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Y80/bmm.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/bmm-iconify-icons .github/skills/bmm-iconify-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 "bmm-iconify-icons" agent skill from https://github.com/Y80/bmm/tree/main/.agents/skills/bmm-iconify-icons into .github/skills/bmm-iconify-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "bmm-iconify-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 Y80/bmm --skill bmm-iconify-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 Y80/bmm bmm-iconify-icons --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Y80/bmm.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/bmm-iconify-icons .opencode/skills/bmm-iconify-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 "bmm-iconify-icons" agent skill from https://github.com/Y80/bmm/tree/main/.agents/skills/bmm-iconify-icons into .opencode/skills/bmm-iconify-icons/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "bmm-iconify-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
bmm-iconify-icons- GitHub stars
- 344
- Token cost
- ~810 tokens
- SKILL.md length
- 351 words
- Files
- 2
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- MIT
At a glance
Guide for updating Iconify icons and IconNames conventions in BMM.
- Works in 5 steps: Add or rename the icon entry in… → Update component call sites to use the… → Replace any nearby hardcoded static… → …
- Codex needs to add
- SKILL.md covers Quick Start, Core Rules, When to Use Which Pattern and Repository Hotspots, plus 4 more sections
- Calls rg and pnpm; reaches iconify.design
What it does
Bmm Iconify Icons is an agent skill from Y80/bmm. Guide for updating Iconify icons and IconNames conventions in BMM. Use when Codex needs to add or rename static icon classes, refactor IconNames, replace hardcoded icon-[...] Tailwind classes, adjust Iconify-powered UI components, or keep icon usage consistent with this repository's Tailwind and React patterns.
Its SKILL.md is about 810 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Frontend & Design, covering CSS and styling, React components and Icons and illustration. It works with Tailwind CSS, React and Next.js. The repository describes itself as: 🤵 BMM - Your Personal Bookmark Manager | 你的专属书签管家. The licence is MIT.
When your agent uses it
- Codex needs to add
- Rename static icon classes
- Refactor IconNames
- Replace hardcoded icon-[...] Tailwind classes
Example prompts
- “/bmm-iconify-icons”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Add or rename the icon entry in app.config.ts.
- Update component call sites to use the new IconNames.. path.
- Replace any nearby hardcoded static icon-[...] classes when they are simple constants.
- Leave dynamic or persisted icon IDs untouched.
- Run targeted search to confirm there are no stale root-level IconNames.* references.
What it can do on your machine
Read from SKILL.md and the folder at commit f8d4bbe. 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:
rgpnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
iconify.design
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
Bmm Iconify Icons loads about 810 tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 351 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 Y80/bmm at commit f8d4bbe, republished under its MIT licence (© Y80). 351 words, ~810 tokens.
Download SKILL.mdSave it as
.claude/skills/bmm-iconify-icons/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- bmm-iconify-icons
- description
- Guide for updating Iconify icons and IconNames conventions in BMM. Use when Codex needs to add or rename static icon classes, refactor IconNames, replace hardcoded icon-[...] Tailwind classes, adjust Iconify-powered UI components, or keep icon usage consistent with this repository's Tailwind and React patterns.
BMM Iconify Icons
Apply Iconify changes in this repository by separating static CSS icons from dynamic icon data, then update the shared IconNames registry before touching individual components.
Quick Start
- Read
tailwind.config.tsfirst. This project uses@iconify/tailwindwithaddDynamicIconSelectors(). - Read
app.config.tsnext. Static icon class names belong inIconNames. - Use
ClientIconor@iconify/reactwhen the icon value comes from data such astabler:search.
Core Rules
- Follow Iconify's Tailwind dynamic selector format:
icon-[prefix--name]. - Keep
IconNamesgrouped by icon set. In this repository, use second-level objects such asIconNames.Tabler,IconNames.Huge, andIconNames.Mdi. - Prefer
IconNames.<Collection>.<NAME>for static UI icons instead of repeating rawicon-[...]strings in components. - Preserve
prefix:namestrings for persisted or user-selected icons. Do not convert those data values into Tailwind class names.
When to Use Which Pattern
Static UI Icon
- Use a Tailwind class from
IconNames. - Example:
<span className={cn(IconNames.Tabler.SEARCH, 'text-xl')} />
Data-Driven Icon
- Use
ClientIconorIconfrom@iconify/react. - Keep the stored value in Iconify ID format such as
tabler:search. - Example areas: tag icons, icon picker output, any icon chosen by the user.
Repository Hotspots
app.config.ts: source of truth for static icon class names.tailwind.config.ts: Iconify Tailwind plugin setup.src/components/ClientIcon.tsx: bridge for stored icon IDs and Tailwind class icons.src/components/IconPicker.tsx: remote Iconify search and icon selection flow.src/components/Favicon.tsx: example of static icon fallback states.
Show full SKILL.md (138 more words)Show less
Editing Workflow
- Add or rename the icon entry in
app.config.ts. - Update component call sites to use the new
IconNames.<Collection>.<NAME>path. - Replace any nearby hardcoded static
icon-[...]classes when they are simple constants. - Leave dynamic or persisted icon IDs untouched.
- Run targeted search to confirm there are no stale root-level
IconNames.*references.
Verification
- Use
rg -n 'IconNames\\.' src app.config.tsto inspect call sites after refactors. - Use
rg -n 'icon-\\[[^\\]]+\\]' srcto find remaining hardcoded static icon classes. - Run
pnpm exec tsc --noEmit --pretty falseand call out any unrelated.next/typesissues separately.
Docs Reference
- Iconify Tailwind dynamic selectors:
https://iconify.design/docs/usage/css/tailwind/dynamic/ - Iconify general docs:
https://iconify.design/docs/
Example Requests
- "Use $bmm-iconify-icons to add a new Tabler icon to the bookmark page."
- "Use $bmm-iconify-icons to replace hardcoded icon-[...] classes with IconNames."
- "Use $bmm-iconify-icons to refactor IconNames into icon-set groups."
© Y80, 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 in .agents/skills/bmm-iconify-icons of Y80/bmm.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit f8d4bbe
Compare with similar skills
Bmm Iconify 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 |
|---|---|---|---|---|---|---|
| Bmm Iconify Icons this skillY80/bmm | 344 | — | ~810 | Automated safety check: Pass | MIT | |
| Frontend Code ReviewProgrammerAnthony/Anything-Extract | 139 | — | ~957 | Automated safety check: Pass | MIT | |
| Shadcn Tailwind UILiarMTTT/TavernWeave | 154 | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| 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 | |
| Cosscrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT |
Similar skills
Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
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.
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.
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
More from Y80/bmm
Readme I18n
Y80/bmm
A skill your agent uses when the user wants to translate a repository README, make a repo multilingual, localize docs, add a language switcher, internationalize the README, or update localized…
Bmm Bookmark Form
Y80/bmm
Guide for modifying BMM bookmark create/edit pages and related icon workflows.
Related
Works with
Categories
Questions about Bmm Iconify Icons
What does Bmm Iconify Icons do?
Guide for updating Iconify icons and IconNames conventions in BMM. Bmm Iconify Icons is an agent skill from Y80/bmm. Guide for updating Iconify icons and IconNames conventions in BMM.
When should I use Bmm Iconify Icons?
Bmm Iconify Icons fits situations like: Codex needs to add; rename static icon classes; refactor IconNames; replace hardcoded icon-[...] Tailwind classes.
How do I install Bmm Iconify Icons in Claude Code?
Run `npx skills add Y80/bmm --skill bmm-iconify-icons -a claude-code`. Or copy the skill folder (.agents/skills/bmm-iconify-icons in Y80/bmm) into .claude/skills/bmm-iconify-icons in your project. Claude Code loads it when a task matches its description.
How do I install Bmm Iconify Icons in Codex?
Run `npx skills add Y80/bmm --skill bmm-iconify-icons -a codex`. Or copy the skill folder (.agents/skills/bmm-iconify-icons in Y80/bmm) into .agents/skills/bmm-iconify-icons in your project. Codex loads it when a task matches its description.
Can I use Bmm Iconify 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 Y80/bmm --skill bmm-iconify-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/bmm-iconify-icons, .gemini/skills/bmm-iconify-icons, .github/skills/bmm-iconify-icons and .opencode/skills/bmm-iconify-icons in your project.
What does Bmm Iconify Icons need to run?
Going by SKILL.md and its folder, Bmm Iconify Icons needs the command-line tools its instructions call (rg and pnpm).
Does Bmm Iconify Icons access the network?
SKILL.md names 1 domain. In commands or code: iconify.design; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Bmm Iconify 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. Review the folder before installing.
What licence does Bmm Iconify Icons use?
Bmm Iconify 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 Bmm Iconify Icons use?
About 810 tokens (SKILL.md is roughly 3.2k 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 Bmm Iconify Icons?
Skills that share tags, products or a category with Bmm Iconify Icons: Frontend Code Review (ProgrammerAnthony/Anything-Extract, 139 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 154 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Kill AI Slop (yetone/kill-ai-slop, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Bmm Iconify Icons?
Y80 (a GitHub user) maintains it in Y80/bmm, which has 344 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on June 8, 2026.
Source: Y80/bmm on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.