القائمة
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.