skills.rest
taku-enginner
taku-enginnerCOMMUNITY
Explore all skills by this author →
𝕏@taku_enginnerGitHub

ui-skills-flutter

Enforce Material 3 and accessibility constraints in Flutter UI code.

Updated Jan 26, 2026
Search Tags:#accessibility#state-management#flutter#design-system#dart#material3#ui-constraints
One-click install
npx skills add https://github.com/taku-enginner/claude_skills --skill ui-skills-flutter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skills-flutter
Source: https://github.com/taku-enginner/claude_skills/tree/main/.claude/skills/ui-skills
Command: npx skills add https://github.com/taku-enginner/claude_skills --skill ui-skills-flutter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flutter UI code often lacks consistency, accessibility, and performance guarantees across components and screens. This skill provides a set of opinionated constraints to ensure UI code adheres to a cohesive design system and reliable behavior.

Core Features & Use Cases

  • MUST use Material 3 defaults (ThemeData(useMaterial3: true)) unless tokens exist or are explicitly requested
  • SHOULD use ColorScheme and semantic tokens over hardcoded colors
  • MUST employ accessible widgets for focus management and add semantics to icon buttons
  • SHOULD utilize build-time helpers for conditional styles and concentrate state management with riverpod for testability
  • MUST respect SafeArea and MediaQuery for responsive layout and safe areas

Quick Start

Run the UI Skills workflow to enforce Flutter UI constraints on your codebase.

Frequently Asked Questions about ui-skills-flutter

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

FAQPage Schema
How do I enforce Material 3 defaults and consistent Flutter UI constraints?▼

Enforce Flutter UI constraints by applying opinionated rules like using ThemeData(useMaterial3: true) and ColorScheme-based styling. This ensures your UI code maintains a cohesive design system and reliable behavior across components.

How do I make Flutter UI accessible for focus management and semantics?▼

Make Flutter UI accessible by employing accessible widgets for focus management and adding semantics to icon buttons. Enforcing these UI constraints ensures screen reader compatibility and reliable interaction states.

Does this Flutter UI skill work with Riverpod for state management?▼

Yes, this Flutter UI skill works with Riverpod. It concentrates state management with Riverpod to improve testability, while enforcing UI constraints like build-time helpers for conditional styles and modular helper composition.

What is the best way to handle responsive layout and SafeArea in Flutter?▼

The best way to handle responsive layout in Flutter is respecting SafeArea and MediaQuery. Enforcing these UI constraints ensures your interfaces adapt correctly to screen sizes and avoid overlapping system gestures.

Why use ColorScheme and semantic tokens over hardcoded colors in Flutter?▼

Use ColorScheme and semantic tokens over hardcoded colors in Flutter to guarantee consistent theming. This UI constraint ensures maintainable code and automatically supports light and dark modes across your app.

Can I apply these Flutter UI constraints to projects of any size?▼

Yes, you can apply these Flutter UI constraints to projects of any size. They enforce consistency, accessibility, and performance guarantees across Flutter and Dart codebases, including Material 3 apps and responsive layouts.

Related Skills

Explore More Design & Creative Skills→
shelbeelyshelbeely
4

m3-web-flutter

Implement Material Design 3 theming and dynamic color in Flutter apps.

Community
Intermediate
takzobyetakzobye

flutter-layout

Design responsive Flutter layouts using Row, Column, Stack, and LayoutBuilder.

Community
Advanced
NinaVerdeNinaVerde

Architecture Auditor

Audit Flutter feature modules for Clean Architecture and Riverpod compliance.

Community
Basic
weberwangweberwang
1

flutter-ui

Implement Flutter UI patterns using ThemeData, ColorScheme, and design tokens.

Community
Advanced