design-guidelisted

M3 Expressive base rules and component reference for Flutter screen design using the Pencil library. Used as the base layer for project-specific design skills; not directly invocable.
noory-code/noory-ai · ★ 0 · Web & Frontend · score 75

Install: claude install-skill noory-code/noory-ai

# Design Guide — M3 Expressive (Base) > Before executing this workflow, read and apply `../HOST_CONTRACT.md`. This skill serves two purposes: 1. **Direct use**: the active Claude Code or Codex host assembles screens via Pencil MCP 2. **Base layer**: Project-specific `design` skills inherit these rules to generate Pencil AI prompts --- ## M3 Rules (Base) Project `design` skills inherit this section as-is. ### Component Usage Principles | Component | Rule | |---------|------| | **Buttons** | Only 1 Filled per screen. Hierarchy: Filled > FilledTonal > Elevated > Outlined > Text | | **FAB** | Only 1 per screen. Use only for the single most important action | | **NavigationBar** | Mobile 2–5 destinations. Always fixed at the bottom of the screen | | **NavigationRail** | Tablet/desktop only | | **NavigationDrawer** | When there are 5 or more destinations | | **TextFields** | Default is Filled. Use Outlined only on complex backgrounds | | **Cards** | Elevated: flat backgrounds, Filled: subtle grouping, Outlined: complex backgrounds | | **Chips** | Assist: suggested actions, Filter: filtering, Input: user input values, Suggestion: dynamic options | | **Selection** | Checkbox: multiple selection, Radio: single selection, Switch: On/Off toggle | | **Snackbar** | Simple non-intrusive messages. Use Dialog for important decisions | | **Colors** | Always use Color Role variables ($primary, $surface, etc.). Never hardcode | ### Component ID Reference (material-design-guide.lib.pen)