expressive-design

Implement Material 3 Expressive design system in Flutter applications.

Updated Feb 12, 2026
One-click install
npx skills add https://github.com/ab22593k/skills --skill expressive-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: expressive-design
Source: https://github.com/ab22593k/skills/tree/main/expressive-design
Command: npx skills add https://github.com/ab22593k/skills --skill expressive-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on implementing Google's Material 3 Expressive (M3E) design system in Flutter, enabling the creation of emotionally engaging and accessible user interfaces.

Core Features & Use Cases

  • Design System Guidance: Detailed specifications for color, typography, motion, shapes, and spacing.
  • Component Implementation: Guidelines for building expressive UI components like buttons, cards, and navigation elements.
  • Platform Support: Specific notes for Android and Linux desktop integration.
  • Use Case: A Flutter developer wants to build a new app that feels modern, vibrant, and emotionally resonant. They can use this Skill to understand and apply the M3E design principles and components to achieve that goal.

Quick Start

Follow the steps outlined in the MIGRATION.md reference to update your Flutter project's theme and components to use Material 3 Expressive.

Frequently Asked Questions about expressive-design

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

FAQPage Schema
What is Material 3 Expressive design in Flutter?

You can migrate your existing Flutter app by following the MIGRATION.md reference included with the Skill. It provides step-by-step guidance to update your project's theme and components to use Material 3 Expressive design principles and component enhancements.

Does Material 3 Expressive support Linux desktop and Android platforms?

Material 3 Expressive enhances standard M3 by adding emotionally resonant design principles and research findings. It expands component guidelines for buttons, cards, and navigation elements, while maintaining accessibility standards and introducing expressive motion specifications and shape tokens.

How do I implement color systems and typography scales for Flutter UI components?

Use the M3E design system guidance to implement detailed color systems and typography scales in Flutter. The Skill provides comprehensive specifications for foundations, spacing ramps, and component enhancements to ensure accessible and visually consistent user interfaces.

What accessibility standards does Material 3 Expressive include for Flutter apps?

Material 3 Expressive includes comprehensive accessibility standards for Flutter applications. These standards are integrated into the design system's foundations, color systems, and component guidelines to ensure UIs remain accessible while being emotionally engaging.