技能 css-development-refactor
📦

css-development-refactor

內容修訂 r1 安全 ⚙️ 外部命令📁 檔案系統存取

將 CSS 重構為語意化元件

重複的工具類別和行內樣式會讓前端程式碼更難維護。這項技能會引導 Claude、Codex 和 Claude Code 透過測試進行語意化 CSS 重構。

支援: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 78 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求
Review the Skillstore skill "css-development-refactor" from https://skillstore.io/skills/2389-research-css-development-refactor.md and its manifest at https://skillstore.io/api/skills/2389-research-css-development-refactor/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/2389-research-css-development-refactor.md 已簽名 manifest GET /api/skills/2389-research-css-development-refactor/manifest 已簽名 lockfile GET /api/skills/2389-research-css-development-refactor/lockfile

測試它

正在使用「css-development-refactor」。 某個元件在許多檔案中重複相同的長按鈕工具類別。

預期結果:

這項技能會辨識重複模式、提出語意化按鈕類別、更新標記，並建議針對新選擇器進行測試。

正在使用「css-development-refactor」。 某個卡片版面有淺色主題樣式，但沒有暗色模式支援。

預期結果:

這項技能會加入對應的暗色模式變體、記錄語意化類別的用途，並要求在兩種主題中進行視覺驗證。

正在使用「css-development-refactor」。 團隊在 CSS 清理分支完成後需要摘要。

預期結果:

這項技能會回報已建立的類別、已更新的檔案、測試覆蓋範圍、行為檢查，以及供審查使用的實用後續步驟。

安全審計

安全
v7 • 2026/7/6 開啟版本化報告

The static findings are false positives caused by Markdown backticks, fenced examples, hardcoded local grep and npm test commands, and test-only file reads. No prompt injection, data exfiltration, unauthorized network activity, or dangerous execution intent was found in SKILL.md.

1
已掃描檔案
416
分析行數
0
複核項目
0
已忽略的誤報

風險因素

⚙️ 外部命令 (53)
SKILL.md:12 SKILL.md:17 SKILL.md:30 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:50-61 SKILL.md:61-78 SKILL.md:78-95 SKILL.md:95-112 SKILL.md:112-116 SKILL.md:116-134 SKILL.md:134-142 SKILL.md:142-146 SKILL.md:146-160 SKILL.md:160-165 SKILL.md:165-172 SKILL.md:172-176 SKILL.md:176-179 SKILL.md:179-187 SKILL.md:187-197 SKILL.md:197-200 SKILL.md:200-201 SKILL.md:201-202 SKILL.md:202-206 SKILL.md:206-212 SKILL.md:212-231 SKILL.md:231-235 SKILL.md:235-238 SKILL.md:238-242 SKILL.md:242-245 SKILL.md:245-250 SKILL.md:250-265 SKILL.md:265-266 SKILL.md:266-276 SKILL.md:276-279 SKILL.md:279-284 SKILL.md:284-287 SKILL.md:287-289 SKILL.md:289-305 SKILL.md:305-314 SKILL.md:314-327 SKILL.md:327-329 SKILL.md:329-359 SKILL.md:359-365 SKILL.md:365-366 SKILL.md:366-367 SKILL.md:367-370 SKILL.md:370-371 SKILL.md:371-372 SKILL.md:372-373 SKILL.md:373-374 SKILL.md:374-405
📁 檔案系統存取 (2)
SKILL.md:268 SKILL.md:273
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告
安全評估

複製報告連結

https://skillstore.io/skills/2389-research-css-development-refactor/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/2389-research-css-development-refactor/security.svg)](https://skillstore.io/skills/2389-research-css-development-refactor?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/2389-research-css-development-refactor?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/2389-research-css-development-refactor/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/2389-research-css-development-refactor.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
學術引用 (APA · BibTeX · CFF)

APA 引用

2389-research. (2026). css-development-refactor security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development-refactor/audits/7

BibTeX 引用

@techreport{2389-research-2389-research-css-development-refactor-2026, author = {2389-research}, title = {css-development-refactor security audit report (audit version 7)}, institution = {Skillstore}, year = {2026}, number = {7}, url = {https://skillstore.io/skills/2389-research-css-development-refactor/audits/7}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "css-development-refactor security audit report (audit version 7)" version: "unspecified" type: report authors: - name: "2389-research" date-released: "2026-07-06" url: "https://skillstore.io/skills/2389-research-css-development-refactor/audits/7" identifiers: - type: other value: "skillstore:2389-research-css-development-refactor:audit:7" description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據 證據置信度: 高
55
架構
85
可維護性
87
內容
69
社群
83
規範符合度

你可以打造什麼

清理大量使用工具類別的元件

將重複的工具類別字串轉換為可重用的語意化類別，以便更容易維護。

在重構期間加入暗色模式

在保留現有淺色主題的同時，為重構後的類別擴充暗色模式變體。

準備更安全的樣式遷移

記錄變更的選擇器、加入測試，並在合併 CSS 清理工作之前驗證行為。

試試這些提示

尋找 CSS 重構目標 
使用這項技能檢查我的元件，並列出應該轉為語意化 CSS 類別的重複行內樣式或工具類別群組。
抽取語意化類別 
將重複的按鈕和卡片工具類別重構為語意化 CSS 類別。在建立新類別之前，先重用現有的 components.css 模式。
加入暗色模式覆蓋 
檢查新的語意化 CSS 類別，並在需要時為背景、邊框、文字、hover 和 focus 狀態加入暗色模式變體。
完成已驗證的遷移 
重構選定的 CSS 模式、更新標記、加入靜態 CSS 和渲染測試，然後摘要說明已變更的檔案和行為驗證結果。

最佳實務

  • 從重複模式開始，並保留一次性的工具類別，除非抽取能改善可維護性。
  • 在加入新類別或變體之前，先檢查現有的元件樣式。
  • 在淺色和暗色模式中，透過測試和視覺審查驗證重構後的樣式。

避免

  • 不要在未更新每個受影響元件和測試的情況下重新命名類別。
  • 不要建立只包裝單一不相關一次性樣式的語意化類別。
  • 不要在未執行可用測試或審查 UI 的情況下聲稱行為未改變。

常見問題

這項技能需要 Tailwind CSS 嗎？
它是為 Tailwind 風格的 @apply 組合而撰寫，但該工作流程也可引導其他語意化 CSS 重構。
它能移除所有工具類別嗎？
不會。它建議在語意化類別會增加不必要抽象時，保留一次性工具類別。
它會自動編輯專案檔案嗎？
它會指示代理程式讀取檔案、套用聚焦的編輯、加入測試，並在工具可用時驗證行為。
它如何處理暗色模式？
它會要求代理程式在新類別中為背景、文字、邊框和互動狀態加入暗色變體。
它建議哪些測試？
它建議針對選擇器進行靜態 CSS 測試，以及確認元件使用新語意化類別的渲染測試。
它對大型重構安全嗎？
它可以引導大型重構，但變更應拆分、測試，並在合併前進行視覺審查。

開發者詳細資訊

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/refactor

引用

c1fdca50ff516318f65fed0d7f9e82797c5171dc

維護新鮮度

2026/7/18

使用量

17 次下載 · 158 次瀏覽

檔案結構

📄 SKILL.md

2389-research 的更多技能

查看全部

相關技能

查看全部