← スキル一覧に戻る

design-tokens-enforcement
by AVRA-CADAVRA
⭐ 0🍴 0📅 2026年1月24日
SKILL.md
name: design-tokens-enforcement description: Enforces design token usage (AppColors/AppTheme) instead of direct Colors.*. Use when writing UI code, reviewing widgets, or ensuring design consistency.
Design Tokens Enforcement
Mandatory Rule
✅ ALWAYS use AppColors or AppTheme for colors
❌ NEVER use direct Colors.*
Import Pattern
import 'package:avrai/core/theme/colors.dart';
import 'package:avrai/core/theme/app_theme.dart';
Color Usage
✅ GOOD
Container(
color: AppColors.electricGreen,
child: Text(
'Hello',
style: TextStyle(color: AppTheme.textPrimary),
),
)
// Background colors
Container(
color: AppColors.grey50, // Light background
color: AppColors.grey900, // Dark background
)
// Semantic colors
Text(
'Error message',
style: TextStyle(color: AppColors.error),
)
❌ BAD
Container(
color: Colors.blue, // Don't use direct Colors.*
color: Colors.green, // Don't use
color: Color(0xFF00FF66), // Don't hardcode colors
)
Theme Usage
Use AppTheme for consistent theme-aware styling:
Text(
'Hello',
style: TextStyle(
color: AppTheme.textPrimary,
fontSize: AppTheme.fontSizeLarge,
),
)
Why This Matters
- Design Consistency - Ensures consistent design across app
- Theme Support - Supports light/dark themes
- Maintainability - Centralized design tokens
- Brand Alignment - Enforces brand colors
Design Token Reference
See available tokens in:
lib/core/theme/colors.dart- Color definitionslib/core/theme/app_theme.dart- Theme definitions
Common Colors Available
AppColors.electricGreen // Primary brand accent
AppColors.black // Pure black
AppColors.white // Pure white
AppColors.grey50 // Lightest grey
AppColors.grey900 // Darkest grey
AppColors.error // Error red
AppColors.warning // Warning yellow
AppColors.success // Success green (electricGreen)
Migration Pattern
When converting existing code:
// Before
Container(color: Colors.blue)
// After
Container(color: AppColors.electricGreen)
Always use brand-accurate colors, not arbitrary color choices.
スコア
総合スコア
60/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
✓LICENSE
ライセンスが設定されている
+10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です