skills.rest
zakariaf
zakariafCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-structure

Structures Flutter design systems as two-tier tokens consumed through ThemeExtension slots.

Updated Aug 22, 2026
Search Tags:#accessibility#design system#design tokens#dark mode#flutter#colorscheme#themeextension
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill design-system-structure-zakariaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-structure
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/design-system-structure
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill design-system-structure-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Flutter apps accumulate stray colors, durations, radii, and font sizes scattered across widget code, making reskins painful, dark themes inconsistent, and accessibility regressions invisible until production. This Skill enforces a structure where every aesthetic value lives in lib/theme/ and every widget reads it back through a named semantic slot. ## Core Features & Use Cases - Two-tier token architecture: Primitives named by measured value (e.g. neutral12) feed semantic slots (surface, accent, hairline) exposed via a ThemeExtension with an asserting of(context) accessor. - Hand-authored ColorScheme and gated raw values: Replaces ColorScheme.fromSeed with explicit M3 role declarations for both light and dark, while scripts/check_raw_values.sh fails any raw Color, Curves, Duration, BorderRadius, or fontSize outside lib/theme/. - Motion, fonts, and contrast discipline: Reduced motion collapses to Duration.zero via MediaQuery, fonts are bundled with license registration instead of google_fonts, and AA contrast is verified as a computeLuminance unit test. - Use Case: When adding a new status chip to a Flutter app, derive its color from a canonical enum through a semantic slot, pair it with icon and label signals, and let the gate scripts reject any hardcoded hex before the PR merges. ## Quick Start Ask the AI to review or create your Flutter ThemeData and ThemeExtension setup so all colors, motion, and typography live in lib/theme/ behind the raw-values gate.

Frequently Asked Questions about design-system-structure

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

FAQPage Schema
How do I structure a Flutter design system with ThemeExtension?▼

Define primitives named by measured value in lib/theme/primitives.dart, then expose semantic slots like surface and accent on a ThemeExtension subclass with copyWith and lerp. Widgets read slots through a static of(context) that asserts the extension exists rather than falling back.

Should I use ColorScheme.fromSeed for app theming?▼

No, not for a product with its own identity. Per-role overrides in fromSeed do not propagate, so overriding surface leaves surfaceContainerHigh seed-derived. Hand-author the ColorScheme for both brightnesses, keeping M3 role names so Material widgets theme themselves.

How do I handle reduced motion in Flutter animations?▼

Read MediaQuery.disableAnimationsOf(context) and resolve to Duration.zero, never a shorter duration or softer curve. Also disable Material's default animations: theme interpolation via themeAnimationStyle, ink splash via NoSplash, and the separate InkHighlight fade.

Can I use google_fonts in an offline Flutter app?▼

No, google_fonts fetches over HTTP by default and ships a network code path into the binary. Declare fonts in pubspec.yaml, ship the license text registered via LicenseRegistry, and drive weight with FontWeight rather than FontVariation.

Why does FontVariation silently do nothing in Flutter?▼

FontVariation only works on axes the font file actually ships. FontVariation('opsz') or FontVariation('ital') on a font lacking that axis no-ops silently, so verify the TTF's axes with a tool like fontTools before relying on them.

How do I verify color contrast in a Flutter theme?▼

Write a unit test using Color.computeLuminance() over every declared foreground/background pair, requiring 4.5:1 for body text and 3:1 for large text and meaningful non-text UI. Test light and dark themes independently since dark gets no credit for light's ratios.

Related Skills

Explore More Software Engineering Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
QunnnnQunnnn

flutter-improving-accessibility

Configure Flutter user interfaces for assistive technologies and accessibility validation.

Community
Intermediate
ihlamuryihlamury
73

convertkit-ui-skills

Enforce Convertkit's UI design system for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced