المهارات css-development:refactor
🎨
css-development:refactor
آمن
将 CSS 重构为语义化模式
将内联样式和分散的工具类转换为可维护的语义化 CSS。在保留现有视觉行为的同时添加深色模式支持。创建易于维护和更新的有组织组件样式。
يدعم: Claude Codex Code(CC)
1
تنزيل ZIP المهارة
2
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
3
فعّل وابدأ الاستخدام
اختبرها
استخدام "css-development:refactor". 从我的 React Button 组件中提取内联样式到语义化 CSS
النتيجة المتوقعة:
- 分析了 Button 组件中的内联样式和工具类
- 在 5 个文件中找到 3 种重复模式
- 创建了带有悬停状态和过渡效果的 .button-primary 语义化类
- 添加了深色模式变体 (dark:bg-indigo-600, dark:hover:bg-indigo-800)
- 更新 Button.tsx 使用语义化类
- 为 button-primary 类添加了静态 CSS 测试
- 验证所有测试通过
التدقيق الأمني
آمنv3 • 1/10/2026
Pure prompt-based skill with no executable code. Provides guidance for AI assistants to help refactor CSS. No network calls, file modifications, or external command execution capabilities are built into the skill itself.
1
الملفات التي تم فحصها
416
الأسطر التي تم تحليلها
0
النتائج
3
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude عرض سجل التدقيق →
درجة الجودة
38
الهندسة المعمارية
100
قابلية الصيانة
81
المحتوى
31
المجتمع
100
الأمان
61
الامتثال للمواصفات
ماذا يمكنك بناءه
从工具优先迁移到语义化 CSS
将标记中分散的 Tailwind 工具类转换为集中式的语义化组件样式
添加深色模式支持
系统地为缺乏深色模式的现有组件添加深色模式变体
标准化 CSS 模式
识别并合并多个文件中重复的样式到共享的语义化类中
جرّب هذه الموجهات
提取内联样式
使用 css-development:refactor 技能将此组件中的内联样式提取为语义化 CSS 类
合并工具类
在我的代码库中找到重复的工具类模式并将它们合并为语义化类
添加深色模式
使用 css-development:refactor 技能为现有 CSS 组件添加深色模式支持
完整组件重构
将整个代码库从内联样式重构为语义化 CSS 模式，包含深色模式和测试
أفضل الممارسات
- 在创建新的语义化类之前检查现有组件模式以避免重复
- 创建新的 CSS 类时始终包含浅色和深色模式变体
- 添加文档注释说明用法和每个类替换的模式
تجنب
- 创建新的语义化类之前不检查是否已存在类似的模式
- 只给背景添加深色模式而不更新文本和边框颜色
- 重构时不添加测试来验证行为是否保留
الأسئلة المتكررة
这个技能适用于 Tailwind 以外的框架吗？
是的。语义化模式适用于任何 CSS 框架。您可以为自己的框架调整 @apply 组合。
重构会破坏我现有的组件吗？
该技能遵循行为中立的重构。所有类都经过验证以保留原始视觉输出。
我可以将这个技能用于 CSS-in-JS 解决方案吗？
是的。提取模式适用于 styled-components、emotion 和其他 CSS-in-JS 库。
深色模式检测是如何工作的？
该技能检查 Tailwind 的 dark: 变体，并为背景、文本和边框属性添加缺失的变体。
这个技能会直接修改文件吗？
不会。该技能为 AI 助手提供指导。所有文件修改都需要人工批准和执行。
这与 css-development:validate 有什么不同？
Refactor 转换现有代码。Validate 检查现有 CSS 是否符合标准而不做任何更改。