技能 ui-style-guide
📦

ui-style-guide

內容修訂 r1 安全 ⚙️ 外部命令

Angular UI 樣式指南

前端團隊需要在 Guessimate UI 中維持一致的 Angular 元件結構與視覺樣式。此技能提供元件、狀態、Tailwind CSS 使用方式、顏色、卡片和排版的實用標準。

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

使用我的智慧代理安裝

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

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

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

Agent 可讀資源

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

Markdown 詳情 GET /skills/davidopdebeeck-ui-style-guide.md 已簽名 manifest GET /api/skills/davidopdebeeck-ui-style-guide/manifest 已簽名 lockfile GET /api/skills/davidopdebeeck-ui-style-guide/lockfile

測試它

正在使用「ui-style-guide」。 審查新的 session 頁面元件是否符合樣式指南。

預期結果:

  • 該元件遵循 standalone 模式，並使用明確的 imports。
  • 將功能狀態移至 session store，因為多個子元件會使用它。
  • 以主題間距取代任意間距，並為顏色工具類別加入深色模式 classes。

正在使用「ui-style-guide」。 為 lobby management 功能規劃資料夾。

預期結果:

  • 將 routed containers 放在功能 pages 區域下。
  • 將展示型 lobby widgets 保留在功能 components 下。
  • 使用功能 service 管理 lobby 狀態，並將共用 UI helpers 保留在 shared 區域。

正在使用「ui-style-guide」。 改善卡片版面以提升視覺一致性。

預期結果:

  • 使用文件記載的表面背景、邊框和分隔線處理方式。
  • 為卡片與容器維持標準圓角尺寸。
  • 針對標題與副標題文字使用 header typography 模式。

安全審計

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

All static findings were reviewed against SKILL.md and are false positives caused by Markdown code fences, inline code, tables, and style-guide wording. The skill is documentation-only frontend guidance for Angular and Tailwind CSS, with no executable scripts, network behavior, file access, or prompt injection attempts found.

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

風險因素

⚙️ 外部命令 (49)
SKILL.md:21-35 SKILL.md:35-39 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:43 SKILL.md:49-53 SKILL.md:53-58 SKILL.md:62-67 SKILL.md:67-73 SKILL.md:73-82 SKILL.md:82-86 SKILL.md:86-88 SKILL.md:88-101 SKILL.md:101-105 SKILL.md:105-107 SKILL.md:107 SKILL.md:109-125 SKILL.md:125-129 SKILL.md:129-134 SKILL.md:134 SKILL.md:135-145 SKILL.md:145 SKILL.md:146 SKILL.md:147 SKILL.md:148 SKILL.md:149 SKILL.md:150 SKILL.md:151 SKILL.md:152 SKILL.md:153 SKILL.md:154 SKILL.md:155 SKILL.md:161 SKILL.md:162 SKILL.md:163 SKILL.md:164 SKILL.md:166-168 SKILL.md:168-170 SKILL.md:170-176 SKILL.md:176-184 SKILL.md:184-189 SKILL.md:189-191 SKILL.md:191 SKILL.md:192 SKILL.md:193-194 SKILL.md:194-198 SKILL.md:198-204
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告

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

開啟版本化報告
安全評估

複製報告連結

https://skillstore.io/skills/davidopdebeeck-ui-style-guide/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/davidopdebeeck-ui-style-guide/security.svg)](https://skillstore.io/skills/davidopdebeeck-ui-style-guide?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/davidopdebeeck-ui-style-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/davidopdebeeck-ui-style-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/davidopdebeeck-ui-style-guide.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 引用

DavidOpDeBeeck. (2026). ui-style-guide security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/davidopdebeeck-ui-style-guide/audits/8

BibTeX 引用

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

Skillstore 評分

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

你可以打造什麼

建立一致的元件

套用專案對 standalone 元件、inline templates、imports、selectors 和 Angular control flow 的規則。

審查 UI Pull Requests

檢查新的 UI 程式碼是否遵循專案結構、狀態管理規則、命名慣例和 Tailwind 樣式標準。

對齊產品 UI 決策

在規劃或改善介面變更時，使用文件中記載的顏色、卡片處理方式、排版和深色模式規則。

試試這些提示

檢查元件 
依據 ui-style-guide 審查這個 Angular 元件。著重於命名、standalone 元件結構、inline template 使用方式和 Tailwind classes。
規劃功能資料夾 
使用 ui-style-guide 為這個新的 UI 功能提出以功能為基礎的資料夾配置。視需要包含 components、pages、services 和 models。
改善狀態管理 
將這個功能狀態設計與 ui-style-guide 比較。建議哪些地方應使用 signals、computed values、effects、RxJS 和 service stores。
稽核 UI 流程 
依據 ui-style-guide 稽核這個 UI 流程。涵蓋專案結構、元件邊界、狀態處理、語意化顏色、深色模式、卡片和排版。

最佳實務

  • 在撰寫新的 Angular UI 程式碼前就使用此指南，而不只是在審查時使用。
  • 將功能特定邏輯保留在功能資料夾內，並將 shared code 保留給可重用的工具。
  • 針對每個與顏色相關的 class，一致套用語意化顏色名稱和深色模式變體。

避免

  • 不要只依檔案類型將不相關的功能程式碼混入技術資料夾。
  • 當專案主題值已存在時，不要新增任意 Tailwind values。
  • 當指南建議元件使用 inject function 時，不要依賴 constructor injection。

常見問題

這個技能涵蓋哪些前端技術堆疊？
它涵蓋 Angular 20+、Tailwind CSS 4、Angular Signals、RxJS，以及搭配 Esbuild 的 Angular CLI。
這個技能可以生成完整的 UI 程式碼嗎？
它可以指導 UI 程式碼生成，但主要是結構、狀態和樣式的標準參考。
這個技能會執行命令或修改檔案嗎？
不會。此技能是 Markdown 樣式指南，不包含可執行腳本或自動化。
它在 Guessimate 專案之外也有用嗎？
可以，但部分指引是專案特定的，在用於其他產品前應先調整。
審查者應如何使用它？
審查者可以將 pull requests 與文件記載的元件、狀態、結構、顏色和排版規則進行比較。
它包含無障礙指引嗎？
它不提供詳細的無障礙規則，因此團隊應搭配自己的無障礙檢查清單使用。

開發者詳細資訊

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/DavidOpDeBeeck/guessimate/tree/master/.claude/skills/ui-style-guide

引用

34f316ba14ef36c7a620fc09f2676d2429997a77

維護新鮮度

2026/7/18

使用量

6 次下載 · 276 次瀏覽

檔案結構

📄 SKILL.md

DavidOpDeBeeck 的更多技能

查看全部

相關技能

查看全部