skills.rest
myeohVmzrka92
myeohVmzrka92COMMUNITY
Explore all skills by this author →
GitHub

flutter-patterns

Standardize Flutter UI development with design system patterns and testing practices.

Updated Apr 2, 2026
Search Tags:#design system#dark mode#flutter#widget testing#responsive layout#ui patterns
One-click install
npx skills add https://github.com/myeohVmzrka92/disease-risk-controller-S2 --skill flutter-patterns-myeohvmzrka92
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-patterns
Source: https://github.com/myeohVmzrka92/disease-risk-controller-S2/tree/main/.claude/skills/19-flutter-patterns
Command: npx skills add https://github.com/myeohVmzrka92/disease-risk-controller-S2 --skill flutter-patterns-myeohvmzrka92

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill gives Flutter teams a reliable pattern library for building consistent, responsive, and testable user interfaces without reinventing styling, layout, or validation logic for every feature.

Core Features & Use Cases

  • Design System Guidance: Defines token-based colors, typography, spacing, shadows, and reusable component patterns.
  • Responsive UI Patterns: Helps adapt layouts across mobile, tablet, desktop, and wide screens with predictable breakpoints.
  • Testing Standards: Provides widget and integration testing practices that reduce flaky tests and catch validation, visibility, and async issues.
  • Use Case: A developer building a new onboarding flow can use this Skill to choose the right button, input, card, and layout patterns while keeping the screen aligned with the existing app design system.

Quick Start

Use the flutter patterns skill to design a responsive Flutter screen that follows the shared design system, supports dark mode, and includes reliable widget tests.

Frequently Asked Questions about flutter-patterns

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

FAQPage Schema
How do I build a responsive Flutter UI that adapts across mobile, tablet, and desktop?▼

Flutter dark mode support is implemented through token-based theming guidance. By defining standard color tokens, the UI automatically switches between light and dark themes consistently across all reusable components.

How do I write reliable Flutter widget tests and avoid flaky behavior?▼

Write reliable Flutter widget tests by following standardized testing practices that enforce deterministic behavior. This reduces flaky tests by catching validation, visibility, and async issues before they affect integration testing.

What is the best way to standardize Flutter UI components with a design system?▼

Standardize Flutter UI components by applying a token-based design system. This defines consistent colors, typography, spacing, and shadows, ensuring reusable component patterns align with production-ready accessibility expectations.

Can I use these Flutter UI patterns for a new onboarding flow?▼

You can use these Flutter UI patterns for a new onboarding flow. They help you choose the right button, input, card, and layout patterns while keeping the screen aligned with the existing app design system.

Related Skills

Explore More Software Engineering Skills→
stagewise-iostagewise-io
6.8k

stage-ui-design-system

Reference Stagewise UI design tokens, React components, and utility functions.

Official
Basic
DatTran26DatTran26

ck:test

Execute unit, integration, e2e, and UI tests with coverage reports.

Community
Advanced
GainInsightDevGainInsightDev

af-flutter-expertise

Develop Flutter mobile applications within AgentFlow monorepos.

Official
Advanced
shobhit-16shobhit-16

flutter-patterns

Standardize Flutter UI development with design-system tokens and responsive layout patterns.

Community
Advanced