技能 web-styling
📦
web-styling
內容修訂 r1 安全 ⚙️ 外部命令
更快速地設計 React 介面樣式
React 團隊經常在元件和版面配置中重複相同的樣式決策。此技能提供可重用的 Tailwind、CSS Modules、CSS-in-JS、主題設定、動畫和版面配置模式。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-styling/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「web-styling」。 使用 Tailwind CSS 設計響應式產品卡片樣式。
預期結果:
一份行動優先的樣式計畫，包含間距、排版、hover 狀態、深色模式色彩和可重用類別群組。
正在使用「web-styling」。 建立 primary、secondary、outline 和 danger 按鈕變體。
預期結果:
一份變體矩陣，涵蓋尺寸、狀態、停用行為、類別合併和一致的互動樣式。
正在使用「web-styling」。 為 React 儀表板規劃主題系統。
預期結果:
一份精簡的權杖策略，涵蓋色彩、間距、CSS 變數、深色模式對應和元件檔案組織。
安全審計
安全v7 • 2026/7/6 開啟版本化報告
All static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
1
已掃描檔案
521
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (42)
SKILL.md:12-23 SKILL.md:23-28 SKILL.md:28-32 SKILL.md:32-55 SKILL.md:55-59 SKILL.md:59-82 SKILL.md:82-86 SKILL.md:86-113 SKILL.md:113-117 SKILL.md:117-141 SKILL.md:141-143 SKILL.md:143-148 SKILL.md:148-156 SKILL.md:156-173 SKILL.md:173-175 SKILL.md:175-181 SKILL.md:181-186 SKILL.md:186-190 SKILL.md:190-207 SKILL.md:207-213 SKILL.md:213-216 SKILL.md:224-230 SKILL.md:231-237 SKILL.md:238-254 SKILL.md:257-258 SKILL.md:258-264 SKILL.md:264-308 SKILL.md:308-316 SKILL.md:316-351 SKILL.md:351-355 SKILL.md:355-383 SKILL.md:383-391 SKILL.md:391-409 SKILL.md:409-413 SKILL.md:413-430 SKILL.md:430-434 SKILL.md:434-444 SKILL.md:444-450 SKILL.md:450-492 SKILL.md:492-503 SKILL.md:503-510 SKILL.md:510-520
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-styling.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 引用
CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7BibTeX 引用
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/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: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
71
社群
78
規範符合度
你可以打造什麼
建立可重用的 React 元件
以一致的變體和響應式類別建立按鈕、卡片、互動視窗和版面配置基礎元件。
記錄設計系統
標準化間距、色彩權杖、深色模式值和元件樣式慣例。
交付精緻的產品畫面
快速套用經驗證的樣式模式，而不必從零開始建立自訂樣式架構。
試試這些提示
建立 Tailwind 元件
為名為 [component] 的 React 元件建立樣式指引。使用 Tailwind CSS、響應式間距、hover 狀態和深色模式支援。
重構重複的類別
檢視這些 React 樣式需求，並提出使用 clsx、tailwind-merge 或 cva 的可重用變體模式。說明每個選項適合的時機。
規劃主題權杖
為 [product] 設計 React 主題設定方法。包含色彩權杖、間距權杖、CSS 變數、深色模式行為和檔案組織。
稽核樣式架構
稽核此 React 樣式方法的可維護性。找出重複模式、權杖缺口、響應式問題、動畫疑慮和遷移步驟。
最佳實務
- 使用行動優先的響應式規則，並明確保留版面配置限制。
- 集中管理設計權杖、變體定義和深色模式值。
- 當元件接受外部類別覆寫時，使用類別合併輔助工具。
避免
- 在多個元件中重複冗長的變體類別字串。
- 在沒有共用設計權杖的情況下混用任意色彩和間距。
- 在沒有狀態規則、動作限制或備援行為的情況下加入動畫。
常見問題
此技能適用於哪些專案？
它適用於使用 Tailwind CSS、CSS Modules、styled-components 或類似樣式工具的 React 網頁應用程式。
它可以協助響應式設計嗎？
可以。它包含行動優先斷點、網格、flex 版面、容器和響應式文字模式。
它需要 Tailwind CSS 嗎？
不需要。它包含 Tailwind 範例，但此技能也涵蓋 CSS Modules 和 CSS-in-JS 模式。
它可以定義元件變體嗎？
可以。它涵蓋使用類別組合輔助工具和 class-variance-authority 樣式模式來定義變體。
它會產生完整的 UI 設計嗎？
不會。它提供樣式模式和實作指引，而不是完整的視覺設計交付成果。
此技能使用起來安全嗎？
已審查的檔案僅為文件。靜態命令警告是來自 Markdown 和 template literals 的誤判。