/reflow skill
Teach your coding agent the components and the craft behind them.
Installation
Add the Reflow skill to your project so your coding agent can use its component and interaction guidance.
What it does
- Reads your stack
Identifies your Remix setup, existing components, and conventions.
- Suggests improvements
Starts with the layout, feedback, and motion your users will notice.
- Aligns your UI
Uses the Reflow components that fit and applies their shared design rules.
What it knows
The skill records the interaction rules, values, and edge cases behind the components. It covers stable label widths, fluid hover, fixed-pixel button presses, accessible form controls, theme tokens, and interruptible motion. Read it at skills/reflow/SKILL.md.
Examples
Watch each demonstration, or move your pointer inside to try it yourself.
Tabs
Active labels gain weight while neighboring tabs stay in place.
Menu
One highlight moves between the items under your pointer.
Copy field
Click anywhere in the field to copy its value.
skills/reflow/SKILL.mdButton press
The surface contracts by one pixel on every side.