メニュー
CIS (Corporate Identity System) 設計規範建立與維護。前端專案的色彩、字型、間距、元件用途統一定義。新專案建立時或前端修改時自動觸發，確保設計一致性。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/seikaikyo/dash-skills --skill cis-design-systemコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Use when reviewing code for security vulnerabilities, implementing authentication/authorization, handling user input, or discussing web application security. Covers OWASP Top 10:2025, ASVS 5.0, LLM Top 10 (2025), and Agentic AI security (2026).
Guides authoring of high-quality YARA-X detection rules for malware identification. Use when writing, reviewing, or optimizing YARA rules. Covers naming conventions, string selection, performance optimization, migration from legacy YARA, and false positive reduction. Triggers on: YARA, YARA-X, malware detection, threat hunting, IOC, signature, crx module, dex module.
Throwaway HTML mockups: 2-3 design variants to compare.
| name | cis-design-system |
| description | CIS (Corporate Identity System) 設計規範建立與維護。前端專案的色彩、字型、間距、元件用途統一定義。新專案建立時或前端修改時自動觸發，確保設計一致性。 |
| source | 自建 |
| updated | "2026-04-04T00:00:00.000Z" |
自動觸發（hook 強制）：
.css / .tsx / .vue / .scss / tailwind 相關檔案時手動觸發：
/cis-design-system — 建立或更新 CIS 文件每個前端專案必須有：wireframes/cis-design-tokens.html
1. 讀取 globals.css / tailwind config 萃取所有 CSS 變數
2. 讀取 package.json 確認 UI 框架（shadcn/PrimeVue）
3. 讀取字型設定（layout.tsx / fonts）
4. 生成 cis-design-tokens.html，包含以下區塊：
1. 偵測修改了哪些前端檔案
2. 檢查修改內容是否涉及色彩/字型/間距/元件
3. 若涉及 → 比對 CIS 文件是否需更新
4. 若不一致 → block 並提示更新 CIS
每個區塊有固定編號，方便討論時引用（如「調整 C1.3 的深色值」）。
| 編號 | 內容 |
|---|---|
| C1.1 | 品牌色（primary / accent，雙主題） |
| C1.2 | 背景色（background / card / muted / input） |
| C1.3 | 文字色（foreground / muted-foreground / dim） |
| C1.4 | 邊框色（border / ring） |
| C1.5 | 語意色（destructive / success / warning） |
| C1.6 | 領域專用色（如運勢等級、特殊日、七曜） |
每個色必須列：Token 名 / Light 值 / Dark 值 / 用途說明
| 編號 | 內容 |
|---|---|
| C2.1 | 字型家族定義（serif / sans / mono） |
| C2.2 | 字級表（名稱 / 大小 / 字重 / 用途） |
| C2.3 | 行高規則 |
| 編號 | 內容 |
|---|---|
| C3.1 | 基數定義（如 4px） |
| C3.2 | 間距階梯（gap-sm / gap-md / gap-lg） |
| C3.3 | 元件內距（card padding / page padding） |
| 編號 | 內容 |
|---|---|
| C4.1 | 圓角階梯（radius-sm / radius / radius-lg / radius-xl） |
| C4.2 | 特殊圓角（pill / circle） |
| 編號 | 內容 |
|---|---|
| C5.1 | 每個 UI 元件該用哪個 token |
| C5.2 | Badge 色彩規則（bg 透明度 + text 實色） |
| C5.3 | 卡片色彩規則 |
| C5.4 | 互動狀態（hover / active / focus） |
| 編號 | 內容 |
|---|---|
| C6.1 | 禁用 hardcode hex/rgb |
| C6.2 | 禁用非原典術語（專案特定） |
| C6.3 | 禁用 emoji |
| C6.4 | 其他專案特定禁止項 |
| 編號 | 內容 |
|---|---|
| C7.x | 由專案自行定義的領域色彩、術語色彩等 |
修改前端檔案時，hook 檢查以下項目：
# 萃取現有專案的設計 token
/cis-design-system
# 步驟：
# 1. 掃描 globals.css → 萃取所有 CSS 變數
# 2. 掃描 components.json → 確認 UI 框架設定
# 3. 掃描 layout.tsx → 確認字型
# 4. 掃描 tailwind config → 確認客製化設定
# 5. 生成 wireframes/cis-design-tokens.html
# 6. 輸出變更摘要
用戶: 「C1.6 的甘露日金色太亮了，深色模式要暗一點」
Claude: 調整 C1.6 kanro dark 從 #d4af37 → #b8941f，同步更新 globals.css + CIS 文件
用戶: 「C5.2 的 badge 透明度統一改 15%」
Claude: 更新所有 badge bg 從 12% → 15%，影響 C1.5/C1.6 所有 -bg token