메뉴
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명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? 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