원클릭으로 Manus에서 모든 스킬 실행

style-guardian

스타0

포크0

업데이트2026년 4월 22일 01:25

Style Guardian - Unified Design System Enforcement Tool. Use for: (1) Preventing hardcoded styles (colors, spacing, typography), (2) Preventing hardcoded text (i18n violations), (3) Guiding unified configuration usage, (4) Detecting and fixing style violations

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

tarrragon

tarrragon/ccsession

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

소프트웨어 개발자컴퓨터 및 수학직·SOC 15-1252

파일 탐색기

6 개 파일

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

compositional-writing

tarrragon/ccsession

Composes atomic, intent-revealing, grep-friendly writing (Zettelkasten) for code comments, docs, logs, prompts, schema/ticket fields, and long-form technical articles. Use when cognitive load and token cost matter. Triggers: 寫註解, 寫文件, 寫日誌, 寫 prompt, 寫文章, 技術文章, post-mortem, 架構決策, 除錯復盤, 欄位設計, atomic, reusable.

2026-04-220

agent-team

tarrragon/ccsession

Agent Teams 協作派發指南。Use when: (1) Agent A 的發現會改變 Agent B 正在進行的工作, (2) 用戶要求使用 team/swarm, (3) 多代理人需即時協商共用介面或 API 契約。涵蓋 team 建立、Ticket-Task 橋接、teammate 入職、生命週期管理。

2026-04-220

branch-worktree-guardian

tarrragon/ccsession

Branch Worktree Guardian - Git 分支和 Worktree 管理工具。Use for: (1) 新開發需求時建立隔離分支, (2) 使用 worktree 機制避免分支衝突, (3) 驗證當前工作分支正確性, (4) 預防在錯誤分支上開發

2026-04-220

broken-link-check

tarrragon/ccsession

broken-link 偵測工具。掃描 .claude/ 目錄所有 Markdown 文件中的路徑引用，偵測失效連結。Use for: (1) 一次性掃描所有 broken links, (2) 搭配 /loop 定期監控, (3) 修改規則/方法論/代理人文件後驗證路徑完整性。Use when: user runs /broken-link-check, 或搭配 /loop 定期執行, 或發現 broken link 錯誤後。

2026-04-220

bulk-evaluate

tarrragon/ccsession

子任務拆分與 Context 卸載工具。將可拆分的大型任務分成 N 個子 Ticket，各由 Agent 獨立執行，結論直接寫入 Ticket 不回報主線程。Use for: 批量檔案評估, 大型審查任務拆分, 任何需要讀取大量資料但結果可落地到 Ticket 的任務

2026-04-220

cognitive-load-assessment

tarrragon/ccsession

認知負擔評估與審查工具。作為決策樹、代理人、Code Review 的基本參考標準。用於: (1) 任務複雜度評估, (2) 代理人升級判斷, (3) 任務拆分建議, (4) 程式碼品質審查與熱點識別

2026-04-220

name	style-guardian
description	Style Guardian - Unified Design System Enforcement Tool. Use for: (1) Preventing hardcoded styles (colors, spacing, typography), (2) Preventing hardcoded text (i18n violations), (3) Guiding unified configuration usage, (4) Detecting and fixing style violations

Style Guardian - Unified Design System Enforcement

Core Principles

Design Philosophy: Flat Design 2.0 + Monochrome System

Principle	Description	Source
Minimalism	Clean, uncluttered layouts	Flat Design
2D Styling	Simple, flat shapes without 3D effects	Flat Design
Subtle Shadows	Shadows hint at interactivity (Flat 2.0)	Material Design
Monochrome	Primarily use different saturations of blue	Project Design Spec
Three-Color System	Blue (primary) + Green (positive) + Orange (negative)	Project Design Spec

Key Files

File	Purpose
`lib/core/ui/ui_config.dart`	Core style configuration system
`lib/core/ui/flat_design_config.dart`	Flat design component configuration
`lib/core/ui/responsive_config.dart`	Responsive layout configuration
`lib/app/theme.dart`	Application theme (uses UIColors)
`docs/ui_design_specification.md`	UI design specification document

Color System

Primary Color (Blue, 90% usage)

Hardcoded	UIColors	Purpose	Hex
`Colors.blue`	`UIColors.primary`	Primary buttons	#2196F3
`Color(0xFF2196F3)`	`UIColors.primary`	Primary buttons	#2196F3
`Colors.blue[50]`	`UIColors.primaryLightest`	Background blocks	#E3F2FD
`Colors.blue[100]`	`UIColors.primaryLight`	Secondary blocks	#BBDEFB
`Colors.blue[300]`	`UIColors.primaryMedium`	Interactive elements	#64B5F6
`Colors.blue[700]`	`UIColors.primaryDark`	Selected states	#1976D2
`Colors.blue[900]`	`UIColors.primaryDarkest`	Emphasis text	#0D47A1

Positive Color (Green, 5% usage)

Hardcoded	UIColors	Purpose
`Colors.green`	`UIColors.positive`	Success, confirmation
`Colors.green[100]`	`UIColors.positiveLight`	Success backgrounds
`Colors.green[700]`	`UIColors.positiveDark`	Success emphasis

Negative Color (Orange, 5% usage)

Hardcoded	UIColors	Purpose
`Colors.orange`	`UIColors.negative`	Warning, error
`Colors.amber`	`UIColors.negative`	Warning, caution
`Colors.red`	`UIColors.negative`	Project does NOT use red

Background Colors

Hardcoded	UIColors	Purpose
`Colors.white`	`UIColors.surfaceLight`	Card backgrounds
`Colors.grey[50]`	`UIColors.backgroundLight`	Page backgrounds
`Colors.grey[600]`	`UIColors.onSurfaceMuted`	Muted text

Spacing System (4dp Grid)

SizedBox Spacing

Hardcoded	UISpacing	Responsive
`SizedBox(height: 4)`	`SizedBox(height: UISpacing.xxs)`	`.h` suffix
`SizedBox(height: 8)`	`SizedBox(height: UISpacing.xs)`	`.h` suffix
`SizedBox(height: 12)`	`SizedBox(height: UISpacing.sm)`	`.h` suffix
`SizedBox(height: 16)`	`SizedBox(height: UISpacing.md)`	`.h` suffix
`SizedBox(height: 24)`	`SizedBox(height: UISpacing.lg)`	`.h` suffix
`SizedBox(height: 32)`	`SizedBox(height: UISpacing.xl)`	`.h` suffix
`SizedBox(width: 8)`	`SizedBox(width: UISpacing.xs)`	`.w` suffix

EdgeInsets Padding

Hardcoded	UISpacing
`EdgeInsets.all(4)`	`EdgeInsets.all(UISpacing.xxs)`
`EdgeInsets.all(8)`	`EdgeInsets.all(UISpacing.xs)`
`EdgeInsets.all(16)`	`EdgeInsets.all(UISpacing.md)`
`EdgeInsets.symmetric(horizontal: 16)`	`EdgeInsets.symmetric(horizontal: UISpacing.md)`
`EdgeInsets.symmetric(vertical: 8)`	`EdgeInsets.symmetric(vertical: UISpacing.xs)`

Typography System

Font Sizes

Hardcoded	UIFontSizes	Purpose
`fontSize: 10`	`UIFontSizes.overline`	Overline text
`fontSize: 12`	`UIFontSizes.bodySmall`	Small body text
`fontSize: 14`	`UIFontSizes.bodyMedium`	Standard body text
`fontSize: 16`	`UIFontSizes.bodyLarge`	Large body text
`fontSize: 18`	`UIFontSizes.titleMedium`	Medium titles
`fontSize: 20`	`UIFontSizes.titleLarge`	Large titles
`fontSize: 24`	`UIFontSizes.headline3`	Headlines

Responsive Font Sizes

Use .rsp suffix for responsive scaling:

// Correct
TextStyle(fontSize: UIFontSizes.bodyMedium)  // Already includes .rsp

// Incorrect
TextStyle(fontSize: 14)
TextStyle(fontSize: 14.sp)  // Manual scaling

Border Radius System

Hardcoded	UIBorderRadius
`BorderRadius.circular(4)`	`BorderRadius.circular(UIBorderRadius.xs)`
`BorderRadius.circular(8)`	`BorderRadius.circular(UIBorderRadius.sm)`
`BorderRadius.circular(12)`	`BorderRadius.circular(UIBorderRadius.md)`
`BorderRadius.circular(16)`	`BorderRadius.circular(UIBorderRadius.lg)`
`BorderRadius.circular(20)`	`BorderRadius.circular(UIBorderRadius.xl)`
`BorderRadius.circular(999)`	`BorderRadius.circular(UIBorderRadius.circular)`

Internationalization (i18n)

i18n 硬編碼檢測、ARB 工作流程、支援語言清單詳見 /i18n-checker。

快速參考：所有使用者可見文字必須使用 context.l10n!.keyName，禁止硬編碼字串。

Common Violations and Fixes

Violation 1: Hardcoded Colors

// Violation
Container(color: Colors.blue)
Container(color: Color(0xFF2196F3))

// Fix
Container(color: UIColors.primary)

Violation 2: Hardcoded Spacing

// Violation
SizedBox(height: 16)
Padding(padding: EdgeInsets.all(8))

// Fix
SizedBox(height: UISpacing.md)
Padding(padding: EdgeInsets.all(UISpacing.xs))

Violation 3: Hardcoded Font Size

// Violation
TextStyle(fontSize: 14)

// Fix
TextStyle(fontSize: UIFontSizes.bodyMedium)

Violation 4: Hardcoded Border Radius

// Violation
BorderRadius.circular(8)

// Fix
BorderRadius.circular(UIBorderRadius.sm)

Violation 5: Hardcoded Text

硬編碼文字檢測和修正詳見 /i18n-checker。

Violation 6: ViewModel Hardcoded User Messages

Scope: lib/presentation/**/viewmodel.dart, lib/presentation/**_viewmodel.dart

Detection Pattern: String literals assigned to error/message state properties

// Violation - Hardcoded user messages in ViewModel
state = state.copyWith(errorMessage: 'Invalid file format');
state = state.copyWith(errorMessage: '網路連線失敗');
_errorMessage = 'Something went wrong';

// Fix - Use i18n or ErrorHandler
state = state.copyWith(errorMessage: context.l10n!.invalidFileFormat);
state = state.copyWith(errorMessage: ErrorHandler.getUserMessage(exception));

Allowed Exceptions:

e.toString() for unknown system exceptions
String interpolation with i18n: context.l10n!.errorWithCode(code)

Detection Script Usage

Manual Scan

# Scan entire project
uv run .claude/skills/style-guardian/scripts/style_checker.py scan lib/

# Scan specific directory
uv run .claude/skills/style-guardian/scripts/style_checker.py scan lib/presentation/

# Generate report
uv run .claude/skills/style-guardian/scripts/style_checker.py report

Hook Integration

The style checker is integrated into PostEdit Hook:

Automatically scans edited files in lib/presentation/
Reports violations in hook output
Suggests fixes based on this guide

Quick Reference Card

Import Statement

import 'package:book_overview_app/core/ui/ui_config.dart';

Common Replacements

Type	Hardcoded	Configuration
Color	`Colors.blue`	`UIColors.primary`
Success	`Colors.green`	`UIColors.positive`
Warning	`Colors.orange`	`UIColors.negative`
Spacing	`16`	`UISpacing.md`
Font	`14`	`UIFontSizes.bodyMedium`
Radius	`8`	`UIBorderRadius.sm`
Text	`'My Library'`	`context.l10n!.libraryTitle`

Responsive Suffixes

Suffix	Purpose	Example
`.w`	Width scaling	`16.w`
`.h`	Height scaling	`16.h`
`.rsp`	Font scaling	`14.rsp`
`.r`	Radius scaling	`8.r`

Last Updated: 2026-03-02 Version: 1.0.0

style-guardian

이 저장소의 다른 Skills

이 저장소의 다른 Skills

Style Guardian - Unified Design System Enforcement

Core Principles

Design Philosophy: Flat Design 2.0 + Monochrome System

Key Files

Color System

Primary Color (Blue, 90% usage)

Positive Color (Green, 5% usage)

Negative Color (Orange, 5% usage)

Background Colors

Spacing System (4dp Grid)

SizedBox Spacing

EdgeInsets Padding

Typography System

Font Sizes

Responsive Font Sizes

Border Radius System

Internationalization (i18n)

Common Violations and Fixes

Violation 1: Hardcoded Colors

Violation 2: Hardcoded Spacing

Violation 3: Hardcoded Font Size

Violation 4: Hardcoded Border Radius

Violation 5: Hardcoded Text

Violation 6: ViewModel Hardcoded User Messages

Detection Script Usage

Manual Scan

Hook Integration

Related Documentation

Project Files

Reference Files (in this SKILL)

Related Skills

External Resources

Quick Reference Card

Import Statement

Common Replacements

Responsive Suffixes

Style Guardian - Unified Design System Enforcement

Core Principles

Design Philosophy: Flat Design 2.0 + Monochrome System

Key Files

Color System

Primary Color (Blue, 90% usage)

Positive Color (Green, 5% usage)

Negative Color (Orange, 5% usage)

Background Colors

Spacing System (4dp Grid)

SizedBox Spacing

EdgeInsets Padding

Typography System

Font Sizes

Responsive Font Sizes

Border Radius System

Internationalization (i18n)

Common Violations and Fixes

Violation 1: Hardcoded Colors

Violation 2: Hardcoded Spacing

Violation 3: Hardcoded Font Size

Violation 4: Hardcoded Border Radius

Violation 5: Hardcoded Text

Violation 6: ViewModel Hardcoded User Messages

Detection Script Usage

Manual Scan

Hook Integration

Related Documentation

Project Files

Reference Files (in this SKILL)

Related Skills

External Resources

Quick Reference Card

Import Statement

Common Replacements

Responsive Suffixes