material3-ui-craft

name	material3-ui-craft
description	Design, implement, and polish Rails-first UI with Phlex, Stimulus, Turbo/Hotwire Native, and MD3-inspired token systems.

Material Design 3 UI Craft

Use this skill for cohesive Rails web + Hotwire Native UI. Use Material Design 3 for structure (tokens/anatomy/states/accessibility/motion/interaction), not visual identity.

If using M3 Expressive tactics, use assets/m3-expressive-tactics.md for hero-moment and usability guardrails.

Architecture Baseline

• Rails server-rendered HTML is the source of truth.
• Phlex renders reusable UI components.
• Stimulus + Turbo handle client behavior, navigation, and partial updates.
• Hotwire Native shells consume the same routes/components through WebView.
• Tailwind + daisyUI are implementation layers only, mapped to project semantic tokens.
• Project-owned palette/type/illustration are mapped to MD3-inspired tokens.
• Override daisyUI defaults to match project token and brand contracts.

Modes

• fast: align token contract + component states, run one screenshot polish pass
• deep: establish full token system + Phlex component inventory + multi-pass screenshot loop across web/native shells

Required Inputs

• Target surfaces/components
• Shell coverage: desktop-web / mobile-web / ios-native-shell / android-native-shell
• Archetype: saas-dense / habit-warm / game-shell
• Brand + accessibility constraints (contrast, reduced motion, focus visibility)

Guardrails

• Tokens-first always: no raw hex/px in components, no per-screen one-off styling.