skills.rest
warpdotdev
warpdotdevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

gui-ui-guidelines

Provides design-system guidelines for writing GUI UI code in the Warp desktop client.

64.7k|5.5k|Updated Jul 8, 2021
Search Tags:#front-end#gui#ui guidelines#Design system#Warp#Code review#button themes
One-click install
npx skills add https://github.com/warpdotdev/warp --skill gui-ui-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gui-ui-guidelines
Source: https://github.com/warpdotdev/warp/tree/main/.agents/skills/gui-ui-guidelines
Command: npx skills add https://github.com/warpdotdev/warp --skill gui-ui-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI contributors and coding agents working on Warp's GUI desktop app often reinvent components, drift from the design system, or bypass shared abstractions, causing inconsistent buttons and themes across the app.

Core Features & Use Cases

  • Design-System Enforcement: Catalogs guidelines that direct UI work toward existing shared components and themes instead of one-off implementations.
  • Button Theme Rules: Requires reusing existing ActionButtonTheme impls (PrimaryTheme, SecondaryTheme, NakedTheme, DangerPrimaryTheme) and flags red patterns like hard-coded colors or feature-named themes.
  • Use Case: Before implementing a new dialog or button in the Warp app/ crate, read this skill so the change uses the established themes and avoids silently regressing other screens.

Quick Start

Read the gui-ui-guidelines skill before starting any UI work in the Warp GUI desktop app so the relevant guidelines shape your implementation.

Frequently Asked Questions about gui-ui-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a button in the Warp GUI desktop app?▼

Use one of the existing ActionButtonTheme implementations such as PrimaryTheme, SecondaryTheme, NakedTheme, or DangerPrimaryTheme from app/src/view_components/action_button.rs. Do not create a new theme that only tweaks one method of an existing theme.

What guidelines should I follow for UI work in the Warp client?▼

Read the gui-ui-guidelines skill before writing any UI code in the app crate. It catalogs rules for reusing shared components and themes so changes stay consistent with the design system.

Does this skill apply to the Warp TUI front-end?▼

No, it applies only to the GUI desktop front-end in the app crate. For the headless TUI front-end under crates/warp_tui, use the tui-ui-guidelines, tui-testing, and tui-verify-change skills instead.

When is it acceptable to modify a shared button theme?▼

Only when the user has explicitly confirmed the design-system component itself needs to change. Editing themes like PrimaryTheme affects every button in the app, so surface the concern to the user before making any unilateral change.

Why is hard-coding colors in Warp UI code discouraged?▼

Hard-coded ColorU values bypass the design system and cause visual drift. Use appearance.theme() accessors such as accent, font_color, and foreground so colors stay consistent across the app.

Related Skills

Explore More Software Engineering Skills→
Luohao-YanLuohao-Yan
6

warp-ui-guidelines

Provide UI guidelines for Warp client development.

Community
Intermediate
terzigoluterzigolu
37

warp-ui-guidelines

Guide UI teams to follow Warp design guidelines for visual consistency.

Community
Intermediate
SavigeSystemZSavigeSystemZ

etherweave-pyqt6-rules

Enforce PyQt6 layout and threading rules for Etherweave GUI components.

Official
Advanced
peeka-projectpeeka-project
6

peeka-tui-screenshot

Captures Peeka TUI screenshots in Omarchy/Hyprland environments via Docker and tmux.

Official
Advanced