菜单
Before adding new UI elements to an existing site, read the stylesheet to extract design tokens (colors, radii, font, button classes) so new elements look native.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | match-existing-design-system-before-editing |
| description | Before adding new UI elements to an existing site, read the stylesheet to extract design tokens (colors, radii, font, button classes) so new elements look native. |
When to use: When modifying an existing website or UI to add new components (modals, forms, sections).
--accent, --bg, --text), border-radius, font family, spacing scale, existing component classes (.btn, .btn-primary, .btn-ghost).<a class="btn ...">, decide whether new interactive elements should be <button> (semantic) but keep the same class names.This avoids the common mistake of adding components that look foreign to the existing design.
Mined by skill-extractor from a local repo (confidence 0.88, utility 0.652, trace outcome success). Review & edit as needed.
When files are accidentally created in the wrong directory, remove them immediately before proceeding to the correct location.
Before implementing new features, run existing tests to confirm green baseline: this ensures any failures after changes are attributable to new code, not pre-existing issues.
Review skills that the skill-extractor mined from your Claude Code traces — inspect each candidate's definition and confidence/utility scores, edit it, then install it as a real skill or reject it with a comment. Use when the user runs /review-skills, asks to "review discovered/mined skills", or a session-start banner reports pending skills.