warp-ui-guidelines

This skill is a growing catalog of guidelines for working on Warp's UI code. Each guideline captures a lesson that would otherwise be re-learned through review — typically because an agent or contributor reinvented a component, drifted from the design system, or bypassed a shared abstraction.

How to use this skill:

• Read through the guidelines below once at the start of any UI task, then keep them in mind while implementing. The list is short enough to scan.
• Each guideline is self-contained. Not every one will apply to every task — use judgment. But if a guideline does apply, follow it.
• When in doubt, prefer reusing an existing abstraction over introducing a new one. The Warp UI has accumulated a well-factored set of shared components and themes; new one-offs almost always drift.

New guidelines get added here over time. If you discover a recurring UI mistake that would have been caught by a written rule, add it.

Guideline: Reuse button themes

Button colors come from a shared set of ActionButtonTheme impls in app/src/view_components/action_button.rs (and the parallel Theme impls in crates/ui_components/src/button/themes.rs) — PrimaryTheme, SecondaryTheme, NakedTheme, DangerPrimaryTheme, etc. These encode the design system and keep button colors consistent across the app.

When styling a button, use one of the existing themes unchanged. The shared themes are well-established and vetted; if one looks "wrong" for your use case, the most likely explanation is that you're reaching for the wrong theme, not that the theme is buggy.