skills/material3-expressive-flutter/CLAUDE.md

Material 3 Expressive Flutter Skill

This skill allows the agent to build premium Flutter UIs following the Material 3 Expressive (M3E) specification.

Core Directives

• Motion: Always prefer Curves.elasticOut or Cubic(0.34, 1.56, 0.64, 1) for movement. Avoid linear easing.
• Shapes: High-importance components should use StadiumBorder() (Pill shape).
• Haptics: Always call HapticFeedback.lightImpact() on primary action taps.
• Typography: Use Theme.of(context).textTheme.displayLarge for emphasized headers.

Directory Structure

• rules/: Modular design guidelines (Motion, Shapes, Color, Typography).
• scripts/: Implementation templates like component_template.dart.
• references/: Detailed documentation and component guides.

Component Implementation

When asked to implement a component:

1. Reference the specific guide in references/components/.
2. Apply the relevant rules from rules/.
3. Use scripts/component_template.dart as the code foundation.

Trigger Phrases

• "Implement a [component] with M3 Expressive style"
• "Audit this Flutter code for M3 Expressive principles"
• "Add physics-based motion to this button"
• "Create a wavy loading indicator"