메뉴
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 직업 분류 기준
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.
| 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.