技能 ckm-ui-styling
📦
ckm-ui-styling
v1.0.0 內容修訂 r1 高風險 ⚡ 包含腳本🔑 環境變數🌐 網路存取⚙️ 外部命令
使用 Tailwind 和 shadcn 建構無障礙 UI
團隊需要一致的介面指引，涵蓋元件、樣式、無障礙性與響應式行為。此技能為 Claude、Codex 和 Claude Code 工作流程提供 shadcn/ui、Tailwind CSS 與視覺設計參考。
支援: Claude Codex Code(CC)
安裝前請停止並請求確認。
請審查安裝計畫，並在變更檔案前取得使用者明確同意。
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「ckm-ui-styling」。 設定頁面需要響應式卡片、深色模式與清楚的表單操作。
預期結果:
- 一份行動優先版面配置計畫，在小螢幕上堆疊卡片，並在桌面端使用分組面板。
- 針對淺色與深色表面、邊框、焦點環與弱化文字的主題指引。
- 針對表單、對話框、警示、按鈕與狀態回饋的元件建議。
正在使用「ckm-ui-styling」。 現有對話框未通過鍵盤與螢幕閱讀器審查。
預期結果:
- 一份焦點鎖定、escape 鍵、tab 順序、標題、描述與公告修正清單。
- 建議可保留語意結構的 shadcn 與 Radix 模式。
- 針對僅鍵盤使用與常見螢幕閱讀器行為的人工驗證步驟。
正在使用「ckm-ui-styling」。 團隊希望產品頁面之間有一致的 Tailwind tokens。
預期結果:
- 一份針對色彩、間距、圓角、字體排印與斷點使用方式的 token 計畫。
- 針對深色模式變數與元件變體命名的指引。
- 避免削弱系統一致性的一次性類別建議。
安全審計
高風險v4 • 2026/7/5 開啟版本化報告
Most static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
43
已掃描檔案
7,358
分析行數
2
複核項目
0
已忽略的誤報
已確認的安全問題 (1)
高
Unpinned Package Manager Execution
The helper builds npx shadcn@latest commands and executes them in the target project. This can fetch changing third-party package code and modify local files.
The command arrays are explicit and executed by subprocess.run. There is no shell injection, but @latest creates a real supply-chain risk.
能力複核項目 (2)
這些是真實的本機能力，對此技能而言可能是預期行為，因此需要複核，但不會按已確認的惡意行為計分。
高
Python subprocess.run
result = subprocess.run(
The helper executes npx shadcn@latest through subprocess.run in the caller project. It avoids shell injection, but it fetches third-party package code and can modify project files.
高
Python subprocess.run
result = subprocess.run(
The helper executes npx shadcn@latest through subprocess.run in the caller project. It avoids shell injection, but it fetches third-party package code and can modify project files.
風險因素
⚡ 包含腳本 (3)
🔑 環境變數 (3)
🌐 網路存取 (9)
⚙️ 外部命令 (42)
scripts/shadcn_add.py:111 scripts/shadcn_add.py:156 scripts/tests/test_shadcn_add.py:130 scripts/tests/test_shadcn_add.py:156 scripts/tests/test_shadcn_add.py:180 scripts/tests/test_shadcn_add.py:193 scripts/tests/test_shadcn_add.py:221 SKILL.md:61-63 SKILL.md:63-68 SKILL.md:68-70 SKILL.md:70-73 SKILL.md:73-94 SKILL.md:94-99 SKILL.md:99-101 SKILL.md:101-103 SKILL.md:103-107 SKILL.md:107-109 SKILL.md:109-112 SKILL.md:112-118 SKILL.md:118-131 SKILL.md:131-144 SKILL.md:144-157 SKILL.md:157-171 SKILL.md:171-185 SKILL.md:185-200 SKILL.md:200-217 SKILL.md:217-219 SKILL.md:219-223 SKILL.md:223-225 SKILL.md:225-243 SKILL.md:243-244 SKILL.md:244-245 SKILL.md:245-248 SKILL.md:248-249 SKILL.md:249-250 SKILL.md:250-253 SKILL.md:253-256 SKILL.md:256-257 SKILL.md:257-262 SKILL.md:262-298 SKILL.md:298-301 SKILL.md:301-315
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-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 引用
nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4BibTeX 引用
@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 68
架構
100
可維護性
87
內容
67
社群
91
規範符合度
你可以打造什麼
交付響應式產品畫面
使用 shadcn 卡片、表單、對話框與 Tailwind 間距規則建立行動優先頁面。
標準化設計系統
為共用 UI 系統定義 tokens、深色模式行為、元件變體與無障礙互動狀態。
改善無障礙涵蓋範圍
審查焦點管理、鍵盤行為、表單錯誤、色彩對比與螢幕閱讀器公告。
試試這些提示
設定基本元件樣式
Use ckm-ui-styling to style a responsive shadcn button and card for a simple signup screen.
建構無障礙流程
Create an accessible settings dialog with keyboard navigation, focus states, form messages, and Tailwind dark mode styles.
設計主題系統
Define a Tailwind and shadcn theme for a finance dashboard, including tokens, variants, and responsive layout guidance.
稽核複雜介面
Review this React UI for accessibility, layout consistency, dark mode, and shadcn composition. Provide precise changes and validation steps.
最佳實務
- 在加入視覺修飾之前，先從語意化 HTML、無障礙 shadcn primitives 與可見焦點狀態開始。
- 一致使用 Tailwind 工具類別，只有在重複明確時才抽取可重用元件。
- 發布前在行動裝置、平板、桌面、深色模式與瀏覽器縮放情境下測試版面。
避免
- 在未先審查確切套件管理器命令的情況下執行輔助腳本。
- 使用難以掃描、purge 或維護的動態 Tailwind 類別名稱。
- 移除焦點指示器，或只依賴色彩傳達狀態。
常見問題
此技能最適合哪些專案？
它適合使用 shadcn/ui、Radix UI、Tailwind CSS 與元件式設計系統的 React 專案。
它可以建立完整的設計系統嗎？
它可以指引 tokens、主題、元件、無障礙模式與響應式規則。最終治理仍需要團隊審查。
它會自動執行命令嗎？
此技能記錄了可執行套件管理器命令的輔助腳本。使用者應先審查並核准這些命令。
它支援無障礙工作嗎？
是。它包含鍵盤導覽、焦點管理、表單、對話框、對比與螢幕閱讀器支援的指引。
它可以協助深色模式嗎？
是。它涵蓋 CSS 變數、主題 tokens、深色變體與一致的表面色彩。
內建字型已準備好發布了嗎？
它們應在 marketplace 發布前透過來源 checksums 與字型工具進行驗證。
開發者詳細資訊
授權
MIT
作者版本
v1.0.0
Skillstore 修訂
r1
引用
62e2a730c5cd74eab4c7164309d810de660fcea3
維護新鮮度
2026/7/18
使用量
9 次下載 · 15 次瀏覽