ui-css-patterns
Installation
SKILL.md
Frontend UI/CSS Design Patterns
Quick reference for maintaining visual consistency across the RAPID frontend.
Action Hierarchy & Color Semantics
| Action Type | Button Variant | Outline | Examples |
|---|---|---|---|
| Submit/Create | primary |
false |
"Create", "Save", "Compare" |
| Cancel/Back | primary |
true |
"Cancel", "Back" |
| Delete/Remove | danger |
false (strong) / true (soft) |
"Delete Checklist" / inline delete |
| Alternative | secondary |
false |
"Duplicate", "Retry" |
| UI Toggle | text |
n/a | "Show More", "Expand Tree" |
| Inline Action | text + size="sm" |
n/a | Edit/Delete in tree nodes |
| Table Action | varies | true |
"View", "Download" |
Key Pattern: Outlined primary = cancel/dismiss. Filled primary = submit/create.