ui-standards-tokens

Audit Flutter design tokens and UI patterns against accessibility guidelines.

34|21|Updated Feb 1, 2026
One-click install
npx skills add https://github.com/kumaran-is/claude-code-onboarding --skill ui-standards-tokens
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-standards-tokens
Source: https://github.com/kumaran-is/claude-code-onboarding/tree/main/.claude/skills/ui-standards-tokens
Command: npx skills add https://github.com/kumaran-is/claude-code-onboarding --skill ui-standards-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Flutter UI projects often drift from a shared design system, leading to inconsistent visuals and accessibility gaps. This Skill provides a structured approach to auditing and harmonizing design tokens, theming usage, and UI patterns across Flutter apps.

Core Features & Use Cases

  • Centralizes spacing, color, radius, and typography tokens to ensure consistent UI across modules.
  • Validates semantic widget usage and accessibility patterns per reference/ui-accessibility-patterns.md.
  • Applies and audits tokens in real-world scenarios like theming migrations, responsive layouts, and design-system conformance.

Quick Start

Audit a Flutter project against the tokens and patterns documented in reference/ui-design-tokens.md and reference/ui-accessibility-patterns.md, then report deviations.

Frequently Asked Questions about ui-standards-tokens

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

FAQPage Schema
How do I audit Flutter design tokens and fix hard-coded colors?

To audit Flutter design tokens, scan your project for hard-coded colors and verify usage of Theme.of(context).colorScheme. This centralizes spacing, color, radius, and typography tokens to resolve visual inconsistencies and enforce your design system.

Why does my Flutter UI drift from the shared design system?

Flutter UI drifts from a shared design system when hard-coded colors bypass Theme.of(context).colorScheme, causing inconsistent visuals and accessibility gaps. Centralizing your design tokens and validating semantic widget usage ensures consistent UI across modules.

Does this design token audit support responsive layouts and theming migrations?

Yes, the design token audit supports responsive layouts and theming migrations. It applies and audits tokens in real-world scenarios to ensure your Flutter project maintains design-system conformance during structural updates.

How do I validate accessibility patterns in a Flutter application?

Validate accessibility patterns in a Flutter application by checking semantic widget usage against reference guidelines. Auditing these patterns ensures your UI meets accessibility conformance standards and integrates properly with your design tokens.

What's the best way to enforce consistent typography and spacing in Flutter?

The best way to enforce consistent typography and spacing in Flutter is to centralize these values as design tokens. Auditing your project against these tokens prevents visual drift and ensures all modules reference a unified theming system.