frontend-design

name	frontend-design
description	Create distinctive tokenized UI for Rails server-rendered apps using Phlex, Stimulus, and Turbo/Hotwire Native.

Frontend Design

Use this skill for new UI surfaces, redesigns, and visual refactors in a Rails-first architecture.

Architecture Baseline

• Rails server-rendered views are primary.
• Reusable UI is implemented with Phlex components.
• Stimulus provides client-side behavior.
• Turbo Drive/Frames/Streams power navigation and partial updates.
• Hotwire Native shells reuse the same routes/components via WebView.
• Tailwind + daisyUI accelerate delivery but must be layered through project semantic tokens.
• Each project defines custom brand palette, fonts, and illustration language mapped to semantic tokens.
• daisyUI themes are overrideable inputs; default themes must not ship unchanged.
• MD3 is a reference system for tokens/anatomy/interaction, not a visual skin.

Modes

Select mode first:

• fast: focused execution with minimal context load and one refinement pass
• deep: full design exploration, palette strategy, and multi-pass polish

Use assets/mode-matrix.md for mode routing.

Token Discipline

1. Load only required local context first (AGENTS.md, active sprint doc, relevant component files).
2. Load/define token sources early (tokens.css, design token config, Phlex component styles).
3. Defer heavy references/assets until blocked.
4. Ask targeted questions when critical design inputs are missing instead of loading broad docs.

Core Workflow

1. Build input coverage using assets/design-input-checklist.md.
2. If coverage is insufficient, ask one question at a time from the checklist.