技能 css-development

📦

css-development

Name: css-development
Author: 2389-research

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

建構一致的 CSS 元件

CSS 樣式經常在元件與工具類別之間逐漸偏離一致性。此 skill 會引導語意化類別建立、Tailwind 組合、深色模式覆蓋、測試與重構。

支援: Claude Codex Code(CC)

🥉 78 銅級

Maintain this Skill? Claim it 🥉 78 銅級

使用我的智慧代理安裝

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

智能體請求

Review the Skillstore skill "css-development" from https://skillstore.io/skills/2389-research-css-development.md and its manifest at https://skillstore.io/api/skills/2389-research-css-development/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.md 已簽名 manifest GET /api/skills/2389-research-css-development/manifest 已簽名 lockfile GET /api/skills/2389-research-css-development/lockfile

測試它

正在使用「css-development」。建立支援深色模式的主要按鈕樣式。

預期結果:

建議的語意化名稱：button-primary。
建議依顏色、間距、排版、焦點與轉場分組的 Tailwind 組合。
涵蓋類別存在性、深色模式工具類別與元件類別套用情況的測試計畫。

正在使用「css-development」。在合併前審查 CSS 檔案。

預期結果:

良好模式、命名問題、缺少深色模式變體與測試缺口的報告。
若可存取專案檔案，提供含檔案與行號參照的優先修正項目。
僅在需要時建議下一步重構結構性問題。

正在使用「css-development」。重構多個元件中的重複工具類別。

預期結果:

重複視覺模式及其出現頻率的清單。
建議的語意化類別名稱與受影響檔案。
用於測試、視覺一致性與深色模式行為的驗證檢查清單。

安全審計

安全

v6 • 2026/7/6 開啟版本化報告

Static analysis produced many hits because Markdown backticks, CSS examples, and fixed local test snippets were interpreted as executable Ruby, shell, or filesystem behavior. I found no evidence of prompt injection, data exfiltration, network reconnaissance, or dynamic command construction in the reviewed files.

已掃描檔案

1,311

分析行數

複核項目

已忽略的誤報

風險因素

⚙️ 外部命令 (188)

📁 檔案系統存取 (5)

create-component/SKILL.md:230 create-component/SKILL.md:234 refactor/SKILL.md:268 refactor/SKILL.md:273 SKILL.md:100

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

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

開啟版本化報告

複製報告連結

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

Markdown 徽章

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

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/2389-research-css-development.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 security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development/audits/6

BibTeX 引用

@techreport{2389-research-2389-research-css-development-2026,
  author = {2389-research},
  title = {css-development security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/2389-research-css-development/audits/6},
  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 security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "2389-research"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/2389-research-css-development/audits/6"
identifiers:
  - type: other
    value: "skillstore:2389-research-css-development:audit:6"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

建立可重用的 UI 樣式

使用語意化名稱、深色模式變體與相符測試，加入按鈕、卡片、徽章或表單樣式。

稽核 CSS 一致性

在合併設計系統變更前，審查類別名稱、Tailwind 組合、文件與測試覆蓋率。

重構大量使用工具類別的標記

將重複的工具類別組合轉換為可維護的元件類別，同時保留行為與視覺輸出。

試試這些提示

建立 CSS 元件

為主要按鈕建立語意化 CSS 元件。包含 Tailwind 組合、深色模式變體、使用說明與測試建議。

驗證現有樣式

審查我的 components.css 檔案，檢查語意化命名、Tailwind @apply 使用方式、深色模式覆蓋、文件與缺少的測試。

重構重複標記

找出這些元件中重複的 Tailwind 工具類別模式，並提出可保留目前視覺行為的語意化類別。

規劃 CSS 遷移

建立分階段遷移計畫，將分散的工具類別遷移到語意化 CSS 元件，並包含測試、審查檢查點與回復指引。

最佳實務

在新增元件類別前，先閱讀現有 CSS。
使用描述用途的語意化名稱，而不只描述顏色或尺寸。
為每個可重用的視覺元件加入深色模式變體與測試。

避免

在現有類別可組合出相同結果時，仍建立新類別。
讓重複的工具類別組合分散在多個元件中。
加入彩色或互動樣式卻沒有深色模式覆蓋。

常見問題

這個 skill 會自動撰寫 CSS 嗎？

它提供工作流程與範例。檔案編輯仍取決於連接的程式碼助理與專案情境。

是否必須使用 Tailwind？

此指引針對 Tailwind @apply 模式最佳化。未使用 Tailwind 的專案可能需要調整 CSS 範例。

它可以審查現有 CSS 嗎？

可以。驗證工作流程會檢查命名、組合、深色模式覆蓋、測試與文件。

它可以協助 React 和 Vue 嗎？

可以。範例包含 React、Vue 與原生 HTML 整合模式。

它能取代視覺 QA 嗎？

不會。它會建議檢查項目，但視覺一致性需要瀏覽器審查、截圖或專案測試。

它對 Claude Code 和 Codex 有什麼幫助？

它為 Claude、Claude Code 與 Codex 提供結構化 CSS 工作流程，並具備清楚的檢查點與預期輸出。

開發者詳細資訊

作者

2389-research

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

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

引用

c1fdca50ff516318f65fed0d7f9e82797c5171dc

維護新鮮度

2026/7/22

使用量

16 次下載 · 406 次瀏覽

檔案結構

📁 create-component/

📄 SKILL.md

📁 refactor/

📄 SKILL.md

📁 validate/

改善 Vue 3 TypeScript 實務

由 hyf0

Vue TypeScript 專案經常遇到令人困惑的範本、路由器與 Volar 錯誤。此技能為 Codex、Claude 和 Claude Code 提供有針對性的 Vue 3 修正方式。

程式開發查看

css-development

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 評分

你可以打造什麼

建立可重用的 UI 樣式

稽核 CSS 一致性

重構大量使用工具類別的標記

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

2389-research 的更多技能

landing-page-design

fresh-eyes-review

css-development-create-component

using-xtool

firebase-development-project-setup

css-development-refactor

相關技能

analyzing-patterns

structural-search

code-context-finder

vercel-react-view-transitions

react-email

vue-best-practices