flutter-design-tokens

Define centralized Flutter design tokens for spacing, sizes, and radii.

Updated Jan 18, 2026
One-click install
npx skills add https://github.com/333-333-333/agents --skill flutter-design-tokens
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flutter-design-tokens
Source: https://github.com/333-333-333/agents/tree/main/skills/flutter-design-tokens
Command: npx skills add https://github.com/333-333-333/agents --skill flutter-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Design teams and developers struggle to maintain consistent spacing, sizes, and radii across Flutter components, leading to visual drift and maintenance overhead.

Core Features & Use Cases

  • Centralized token definitions for spacing, sizes, and radii (AppSpacing, AppSizes, AppRadii) to enforce design consistency.
  • Theming-ready tokens with light and dark variants that map to Flutter widgets and imports for easy integration.
  • Real-world use: applying tokens.dart in widgets to replace hard-coded values and ensure a single source of truth.

Quick Start

Create a sample Flutter theme using the tokens and demonstrate how to import and apply the tokens in a widget.

Frequently Asked Questions about flutter-design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize Flutter design tokens for spacing and radii across multiple widgets?

Standardize Flutter design tokens by defining centralized classes like AppSpacing, AppSizes, and AppRadii to replace hard-coded values. This ensures a single source of truth, reducing visual drift and duplication across mobile widgets.

What is the best way to maintain consistent UI theming in Flutter light and dark modes?

Maintain consistent UI theming by using theming-ready tokens with light and dark variants that map directly to Flutter widgets. This approach enforces visual consistency across different mode configurations without manual value adjustments.

How do I import and apply design tokens in an existing Flutter codebase?

Import and apply design tokens in an existing Flutter codebase using easy Dart imports. You integrate the tokens.dart file into your widgets to replace hard-coded values, ensuring semantic naming and versioning metadata are preserved.

Does this design token approach work for responsive Flutter layouts?

Yes, this design token approach works for responsive Flutter layouts. The centralized tokens can be applied directly in widget layout and responsive designs across mobile Flutter apps to maintain visual consistency at any scale.

Why does my Flutter app have visual drift between components?

Visual drift occurs when developers use hard-coded spacing, sizes, and radii values instead of centralized design tokens. Defining a single source of truth for your UI tokens eliminates this maintenance overhead and enforces design consistency.

Can I use these Flutter design tokens without adding external dependencies?

Yes, you can use these Flutter design tokens without adding external dependencies. The tokens are integrated via easy Dart imports into your existing codebase, requiring no additional packages to enforce visual consistency.