Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Onevium/awesome-claude-skills --skill component-extractgit clone --depth 1 https://github.com/Onevium/awesome-claude-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/onevium/awesome-claude-skills/component-extract)<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/component-extract"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/component-extract/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/component-extract"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/component-extract.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00089 | $0.00817 |
| Opus 5 | $0.00044 | $0.00409 |
| Sonnet 5 | $0.00018 | $0.00163 |
| Haiku 4.5 | $0.00009 | $0.00082 |
Grade A, and why
component-extract scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
提取可复用组件
把现有设计中的重复模式整理成可交接的组件清单。组件化的目标是统一不变量和减少重复，而不是给每个 DOM 片段起名字。
1. 确认提取范围
确定对象是单页、多页流程还是完整项目，读取相关实现、样式和 token，建立视觉词汇与交互模式的全貌。
2. 识别候选组件
逐区块判断：
- 相同或近似模式是否重复出现？
- 即使只出现一次，它是否可能在其他位置复用？
- 是否存在有意义的变体、尺寸或状态？
- 是否拥有可独立描述的职责和边界？
满足任一条件即可列为候选，但要合并仅有微小差异的重复实现。
按层次归类：
- 基础：颜色、间距、排版、圆角、阴影和动效 token。
- 原子：按钮、输入框、选择控件、徽标、头像、图标、链接。
- 组合：表单字段、卡片、提示、弹窗、菜单、Tooltip、分页。
- 区块：导航、侧栏、表格、表单、Hero、功能网格、空状态。
- 模板：落地页、详情页、列表页、空状态页等页面骨架。
3. 记录组件契约
每个组件至少包含：名称、用途、变体与尺寸、适用状态、依赖 token、组合关系、键盘与无障碍要求，以及一条“推荐”和“避免”用法。
4. 标出系统缺口
- 多个近似实现没有权威版本。
- 缺少 hover、focus、disabled、loading 等必要状态。
- 存在业务需要但没有对应变体。
- 间距、尺寸或颜色偏离既有 token。
- 组件边界过细或过粗，仍迫使调用方理解内部细节。
不要静默修正来源；把不一致记录为需要用户确认的发现。
5. 交付
默认生成 component-inventory.md，每个组件一节。只有用户要求可视化时才额外制作组件总览页。总结组件数量、重复与缺口、输出路径和下一步建议。
示例
输入：“把这个完成的仪表盘整理成组件库交接清单。”
**输出：**生成按原子、组合和区块分组的 component-inventory.md，记录 Button、FormField、StatCard、Sidebar 和 DataTable 的变体、状态、token 与无障碍契约，并指出三套近似按钮需要收敛。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 64 lines · 89 tokens per session scan A f810ab99761c
component-extract is a skill published in the GitHub repository Onevium/awesome-claude-skills (1 stars, last pushed 13d ago), licensed MIT. It adds 89 tokens to every session and 817 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
accesslint-scan
Audit a live page for accessibility issues, locate each WCAG violation precisely, and return a selector-grounded fix worklist without editing.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.