flutter-ui-ux

Q: How do I install flutter-ui-ux?

Run npx skills add https://smithery.ai --skill flutter-ui-ux in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-ui-ux/ (personal) or .claude/skills/flutter-ui-ux/ (project).

by smithery.aiFrontend & Design

Comprehensive Flutter UI/UX development skill for creating beautiful, responsive, and animated mobile applications. Use when user asks to: (1) Build Flutter UI components or screens (2) Implement animations and transitions (3) Design responsive layouts (4) Create custom widgets and themes (5) Optimize UI performance and accessibility Triggers: "create Flutter UI", "build Flutter screen", "Flutter animations", "responsive Flutter layout", "custom Flutter widgets", "Flutter theme design"

Installs: 386
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://smithery.ai --skill flutter-ui-ux

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads flutter-ui-ux automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Flutter UI/UX Development

Create beautiful, responsive, and animated Flutter applications with modern design patterns and best practices.

Core Philosophy

"Mobile-first, animation-enhanced, accessible design" - Focus on:

Priority	Area	Purpose
1	Widget Composition	Reusable, maintainable UI components
2	Responsive Design	Adaptive layouts for all screen sizes
3	Animations	Smooth, purposeful transitions and micro-interactions
4	Custom Themes	Consistent, branded visual identity
5	Performance	60fps rendering and optimal resource usage

Development Workflow

Execute phases sequentially. Complete each before proceeding.

Phase 1: Analyze Requirements

Understand app structure - Identify existing widgets, screens, and navigation
Design system review - Check existing themes, colors, and typography
Platform considerations - Note iOS/Android specific requirements
Performance constraints - Identify animation complexity and rendering needs

Output: UI requirements analysis with component breakdown.

Phase 2: Design Widget Architecture

Widget hierarchy planning - Design composition tree
State management strategy - Choose StatefulWidget vs StatelessWidget
Custom widget identification - Plan reusable components
Theme integration - Define color schemes and typography

Output: Widget architecture diagram and component specifications.

Phase 3: Implement Core UI

Create base widgets - Build foundational components
Implement responsive layouts - Use MediaQuery, LayoutBuilder, Flex/Expanded
Add custom themes - ThemeData, ColorScheme, TextThemes
Integrate navigation - Implement routing and transitions

Widget Composition Patterns:

// ✅ DO: Compose small, reusable widgets
class CustomCard extends StatelessWidget {
  final Widget child;
  final EdgeInsets padding;

  const CustomCard({required this.child, this.padding = EdgeInsets.all(16)});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(padding: padding, child: child),
    );
  }
}

// ✅ DO: Use const constructors where possible
const Icon(Icons.add) // Better than Icon(Icons.add)

Phase 4: Add Animations

Implicit animations - AnimatedContainer, AnimatedOpacity
Explicit animations - AnimationController with Tween
Hero animations - Screen transitions with Hero widgets
Micro-interactions - Button presses, hover effects, loading states

Animation Performance Rules:

// ✅ DO: Use performance-optimized animations
AnimatedBuilder(
  animation: controller,
  builder: (context, child) => Transform.rotate(
    angle: controller.value * 2 * math.pi,
    child: child, // Pass child to avoid rebuilding
  ),
  child: const Icon(Icons.refresh),
)

// ❌ DON'T: Animate expensive operations
// Avoid animating complex layouts or heavy widgets

Phase 5: Optimize and Test

Performance profiling - Use Flutter DevTools
Accessibility testing - Screen readers, contrast ratios
Responsive testing - Multiple screen sizes and orientations
Animation smoothness - 60fps validation

Quick Reference

Responsive Design Patterns

Technique	Use Case	Implementation
LayoutBuilder	Responsive layouts	`LayoutBuilder(builder: (context, constraints) => ...)`
MediaQuery	Screen info	`MediaQuery.of(context).size.width`
Flexible/Expanded	Flex layouts	`Flexible(child: ...)` or `Expanded(child: ...)`
AspectRatio	Fixed ratios	`AspectRatio(aspectRatio: 16/9, child: ...)`

Animation Types

Type	Widget	Duration	Use Case
Fade	AnimatedOpacity	200-300ms	Show/hide content
Slide	SlideTransition	250-350ms	Screen transitions
Scale	AnimatedScale	150-250ms	Button presses
Rotation	RotationTransition	1000-2000ms	Loading indicators

Custom Widget Examples

Themed Button:

class ThemedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const ThemedButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Theme.of(context).colorScheme.onPrimary,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
      child: Text(text),
    );
  }
}

Responsive Card:

class ResponsiveCard extends StatelessWidget {
  final Widget child;

  const ResponsiveCard({required this.child});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _buildWideLayout(child);
        } else {
          return _buildNarrowLayout(child);
        }
      },
    );
  }

  Widget _buildWideLayout(Widget child) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Padding(padding: const EdgeInsets.all(24), child: child),
    );
  }

  Widget _buildNarrowLayout(Widget child) {
    return Card(
      margin: const EdgeInsets.all(8),
      child: Padding(padding: const EdgeInsets.all(16), child: child),
    );
  }
}

Resources

Widget patterns: See references/widget-patterns.md
Animation examples: See references/animation-patterns.md
Theme templates: See references/theme-templates.md
Performance guide: See references/performance-optimization.md

Technical Stack

Core Widgets: StatelessWidget, StatefulWidget, InheritedWidget
Layout: Row, Column, Stack, GridView, ListView
Animation: AnimationController, Tween, AnimatedWidget
Themes: ThemeData, ColorScheme, TextTheme
Navigation: Navigator, MaterialPageRoute, Hero

Accessibility (Required)

Always implement:

// Semantic labels for screen readers
Semantics(
  label: 'Add item to cart',
  button: true,
  child: IconButton(icon: Icon(Icons.add_cart), onPressed: () {}),
)

// High contrast support
Theme.of(context).colorScheme.contrast() == Brightness.dark

// Font scaling
MediaQuery.of(context).accessibleNavigation

Performance Guidelines

Use const widgets where possible
Prefer ListView.builder for long lists
Avoid unnecessary rebuilds with const keys
Use RepaintBoundary for complex animations
Profile with Flutter DevTools regularly

This Flutter UI/UX skill transforms mobile app development into a systematic process that ensures beautiful, responsive, and performant applications with exceptional user experiences.

FAQ

What does the flutter-ui-ux skill do?

How do I install flutter-ui-ux?

Run npx skills add https://smithery.ai --skill flutter-ui-ux in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-ui-ux/ (personal) or .claude/skills/flutter-ui-ux/ (project).

Which AI agents can use flutter-ui-ux?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is flutter-ui-ux safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains flutter-ui-ux?

It is published by smithery.ai in smithery.ai. It has 386 recorded installs.

More from smithery.ai

View all →

smithery-ai-cli

smithery.ai

Find, connect, and use MCP tools and skills via the Smithery CLI. Use when the user searches for new tools or skills, wants to discover integrations, connect to an MCP, install a skill, or wants to interact with an external service (email, Slack, Discord, GitHub, Jira, Notion, databases, cloud APIs, monitoring, etc.).

Productivity & Automation8K installs

frontend-design

smithery.ai

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Frontend & Design6.4K installs

skill-creator

smithery.ai

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Gemini CLI's capabilities with specialized knowledge, workflows, or tool integrations.

AI & Agents2.6K installs

ui-ux-pro-max

smithery.ai

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

Frontend & Design1.3K installs

pdf

smithery.ai

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

Docs & Writing1.3K installs

xlsx

smithery.ai

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

Data & Databases984 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

flutter-ui-ux

Install

Install

Describe the task

Review the result

SKILL.md

Flutter UI/UX Development

Core Philosophy

Development Workflow

Phase 1: Analyze Requirements

Phase 2: Design Widget Architecture

Phase 3: Implement Core UI

Phase 4: Add Animations

Phase 5: Optimize and Test

Quick Reference

Responsive Design Patterns

Animation Types

Custom Widget Examples

Resources

Technical Stack

Accessibility (Required)

Performance Guidelines

FAQ

More from smithery.ai

Popular frontend & design skills