Back to list
AVRA-CADAVRA

design-tokens-enforcement

by AVRA-CADAVRA

0🍴 0📅 Jan 24, 2026

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 definitions
  • lib/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.

Score

Total Score

60/100

Based on repository quality metrics

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

Reviews

💬

Reviews coming soon