Material 3 Expressive Flutter Skill

A premium agent skill for building Material 3 Expressive (M3E) applications in Flutter. This skill enables AI agents to implement physics-based motion, organic shapes, and engagement-driven components following the latest Material Design standards.

✨ Features

• 🚀 Expressive Motion: Principles and code for Spatial and Effects springs.
• 🎨 Shape System: Implementation of Stadium, Teardrop, and Squircle shapes with morphing capability.
• 📦 Component Library: 10+ reference guides for FAB menus, Button Groups, Split Buttons, and more.
• ✨ Wavy Indicators: Custom, research-backed loading animations for short-duration tasks.
• 🧠 Intelligent Directives: Integrated CLAUDE.md and modular rules for agent-led development.
• 🛠️ Scaffold Scripts: Ready-to-use dart templates for high-performance expressive components.

🏗️ Project Structure

material3-expressive-flutter/
├── SKILL.md           # Main Vercel-style skill definition
├── CLAUDE.md          # Agent directives and core principles
├── metadata.json      # Skill metadata (installable via npx skills)
├── LICENSE            # MIT License
├── rules/             # Modular design & implementation rules
│   ├── motion-physics.md
│   ├── shape-morphing.md
│   ├── color-philosophy.md
│   └── typography-editorial.md
├── scripts/           # Implementation templates
│   ├── component_template.dart
│   └── generate_theme.dart
└── references/        # Detailed component documentation
    ├── components/    # Guides for all M3E components
    └── motion-guide.md

🚀 Getting Started

Installation

This skill is designed to be installed into an AI agent's environment or used as a reference within a Flutter project.

# If installing specific skill (recommended)
npx skills add Mic-360/material3-expressive-flutter --skill material3-expressive-flutter

# If using a skill manager
npx skills add material3-expressive-flutter

Usage

Ask the agent:

• "Implement a Wavy Loading Indicator with M3E style."
• "Modernize this standard M3 app with expressive shapes."
• "Show me how to use Spatial Springs for page transitions."

📚 Core Principles

1. Physics Over Duration: Use springs (Spatial/Effects) instead of fixed durations.
2. Full Rounding: Use StadiumBorder() for primary indicators and buttons.
3. Meaningful Feedback: Always include HapticFeedback for expressive actions.
4. Editorial Typography: Use high-impact headlines for hero moments.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Build with energy, motion, and purpose. 🎨✨