技能 baseline-ui
📦
baseline-ui
內容修訂 r2 安全 ⚙️ 外部命令🌐 網路存取
強制執行一致的前端 UI 標準
AI 產生的介面可能逐漸偏離，形成不一致的模式、薄弱的無障礙支援，以及成本高昂的動畫選擇。此技能會套用明確的前端規則，以確保 UI 工作穩定、可存取且易於維護。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "baseline-ui" from https://skillstore.io/skills/ibelick-baseline-ui.md and its manifest at https://skillstore.io/api/skills/ibelick-baseline-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「baseline-ui」。 發布前審查破壞性確認對話框。
預期結果:
- 違規：破壞性動作使用一般對話框，而不是警示對話框。
- 重要原因：鍵盤與焦點行為必須符合該動作的風險。
- 修正：使用專案的警示對話框基礎原語，並讓破壞性動作保持明確。
正在使用「baseline-ui」。 將基準套用至指標儀表板設計。
預期結果:
- 建議：對指標值和密集表格使用等寬數字。
- 建議：在受影響的資料區域附近使用結構化載入狀態。
- 建議：讓方形控制項使用穩定尺寸工具，以避免版面位移。
正在使用「baseline-ui」。 檢查面板轉場的動畫選擇。
預期結果:
- 違規：轉場動畫改變版面尺寸，而不是使用合成器屬性。
- 重要原因：版面動畫可能導致效能不佳和視覺不穩定。
- 修正：對 transform 和 opacity 製作動畫，將回饋控制在 200 毫秒以內，並尊重減少動態效果設定。
安全審計
安全v6 • 2026/7/23 開啟版本化報告
All 30 static findings are false positives caused by Markdown inline code, a documentation hyperlink, and ordinary UI terminology. SKILL.md contains frontend review guidance without executable scripts, network requests, system reconnaissance, credential access, or prompt injection. No semantic security findings were identified.
1
已掃描檔案
86
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (27)
SKILL.md:12 SKILL.md:15 SKILL.md:24 SKILL.md:25 SKILL.md:26 SKILL.md:30 SKILL.md:33 SKILL.md:34 SKILL.md:39 SKILL.md:41 SKILL.md:42 SKILL.md:44 SKILL.md:49 SKILL.md:50 SKILL.md:51 SKILL.md:52 SKILL.md:53 SKILL.md:55 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:64 SKILL.md:68 SKILL.md:69 SKILL.md:73 SKILL.md:74 SKILL.md:75
🌐 網路存取 (1)
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/ibelick-baseline-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/ibelick-baseline-ui?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/ibelick-baseline-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ibelick-baseline-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/ibelick-baseline-ui.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 引用
ibelick. (2026). baseline-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ibelick-baseline-ui/audits/6BibTeX 引用
@techreport{ibelick-ibelick-baseline-ui-2026,
author = {ibelick},
title = {baseline-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/ibelick-baseline-ui/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: "baseline-ui security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "ibelick"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ibelick-baseline-ui/audits/6"
identifiers:
- type: other
value: "skillstore:ibelick-baseline-ui:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
69
社群
83
規範符合度
你可以打造什麼
發布前審查 UI
在前端變更出貨前，找出無障礙、動畫、排版和版面配置問題。
標準化 AI 產生的元件
當 AI 建立或編輯 React 和 Tailwind CSS 元件時，套用一致的規則。
引導產品介面重構
讓儀表板、表單和互動介面與實用的 UI 品質規則保持一致。
試試這些提示
套用基準
針對此功能使用 baseline-ui。讓介面保持可存取、回應式，並與現有元件一致。
審查元件
使用 baseline-ui 審查附加的元件。列出違規項目、每項為何重要，以及具體修正方式。
稽核互動細節
使用 baseline-ui 審查此互動設計。聚焦於動畫屬性、減少動態效果、時序和效能風險。
重構複雜介面
將 baseline-ui 套用至此儀表板重新設計。保留現有基礎原語、降低視覺雜訊，並指出重要取捨。
最佳實務
- 在最終 UI 實作前套用此技能，然後在發布前再次審查。
- 在新增 UI 模式前，優先使用專案現有的基礎原語和主題權杖。
- 對重要流程，將審查與已渲染螢幕截圖和無障礙檢查搭配使用。
避免
- 未經審查就使用此技能覆蓋成熟的專案設計系統。
- 將檢查清單視為鍵盤、螢幕閱讀器或視覺測試的替代品。
- 未經調整就將 React 和 Tailwind CSS 指引套用到不相關的技術棧。
常見問題
此技能會審查什麼？
它會審查前端 UI 決策，涵蓋技術棧選擇、元件、互動、動畫、排版、版面配置、效能和視覺設計。
它會產生生產程式碼嗎？
它主要提供約束和審查指引。與實作任務一起使用時，可以引導程式碼變更。
哪些技術棧最適合？
最適合使用可存取元件基礎原語和現代動畫函式庫的 React 與 Tailwind CSS 專案。
它可以取代無障礙測試嗎？
不能。它能改善無障礙習慣，但團隊仍應測試鍵盤流程、焦點行為和輔助技術支援。
團隊應如何使用它？
在 AI 輔助的前端介面設計、實作和審查期間，將它作為共享基準使用。
它需要外部服務嗎？
不需要。此技能是一個 Markdown 指令檔，不會呼叫外部服務。