rex-claude 6.0.0 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ui-craft
|
|
3
|
+
description: Premium UI execution. Enforces visual hierarchy, spatial rhythm, typography scale, and intentional aesthetics. Use when building any component or page to avoid generic bootstrap-style output.
|
|
4
|
+
user-invocable: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# UI Craft
|
|
8
|
+
|
|
9
|
+
Good UX maps the flow. This skill makes it look intentional. Use alongside `ux-flow` — one before, one during.
|
|
10
|
+
|
|
11
|
+
## Mindset
|
|
12
|
+
|
|
13
|
+
Every UI decision must be intentional:
|
|
14
|
+
- Why this spacing?
|
|
15
|
+
- Why this color?
|
|
16
|
+
- Why this font size?
|
|
17
|
+
- What does the eye land on first?
|
|
18
|
+
|
|
19
|
+
If you can't answer "why", the default is wrong.
|
|
20
|
+
|
|
21
|
+
## Visual Hierarchy
|
|
22
|
+
|
|
23
|
+
Always establish a clear reading order:
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
1. Hero/title — largest, most contrast
|
|
27
|
+
2. Supporting info — secondary size/weight
|
|
28
|
+
3. Actions — visible, but not competing with content
|
|
29
|
+
4. Metadata — smallest, lowest contrast
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Never put 3+ elements at the same visual weight. Force a hierarchy.
|
|
33
|
+
|
|
34
|
+
## Typography Scale
|
|
35
|
+
|
|
36
|
+
Use a proper scale (not arbitrary sizes):
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
xs: 12px / 0.75rem — labels, metadata, captions
|
|
40
|
+
sm: 14px / 0.875rem — body secondary, table cells
|
|
41
|
+
base: 16px / 1rem — body, paragraphs
|
|
42
|
+
lg: 18px / 1.125rem — card titles, emphasized body
|
|
43
|
+
xl: 20px / 1.25rem — section titles
|
|
44
|
+
2xl: 24px / 1.5rem — page headings
|
|
45
|
+
3xl: 30px / 1.875rem — hero titles
|
|
46
|
+
4xl: 36px / 2.25rem — landing hero
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
- **Font weight**: 400 body / 500 medium / 600 semibold / 700 bold. Never 400 for headings.
|
|
50
|
+
- **Line height**: 1.5 for body, 1.2 for headings, 1.0 for UI labels
|
|
51
|
+
- **Letter spacing**: `-0.02em` for large headings, `0.05em` for uppercase labels
|
|
52
|
+
|
|
53
|
+
## Spatial Rhythm
|
|
54
|
+
|
|
55
|
+
Use a 4px base grid. Every margin/padding should be a multiple of 4.
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
Micro: 4px — icon gaps, tag padding
|
|
59
|
+
Small: 8px — internal component spacing
|
|
60
|
+
Medium: 16px — between related elements
|
|
61
|
+
Large: 24px — between sections within a card
|
|
62
|
+
XL: 32px — between major sections
|
|
63
|
+
2XL: 48px — page sections, hero padding
|
|
64
|
+
3XL: 64px — landing page blocks
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Never mix arbitrary values like `mt-3` next to `mb-5` — keep rhythm consistent.
|
|
68
|
+
|
|
69
|
+
## Color Usage
|
|
70
|
+
|
|
71
|
+
- **Primary action**: one color, one use. Don't scatter it.
|
|
72
|
+
- **Destructive**: red, always explicit — never subtle
|
|
73
|
+
- **Success**: green, only for confirmed completion
|
|
74
|
+
- **Disabled**: 40% opacity of normal state, not a different color
|
|
75
|
+
- **Focus**: always visible, never `outline: none` without a custom replacement
|
|
76
|
+
- **Background layers**: use 3 max (page → card → elevated). More = confusion.
|
|
77
|
+
|
|
78
|
+
### Contrast rules (WCAG AA minimum)
|
|
79
|
+
- Normal text: 4.5:1
|
|
80
|
+
- Large text (18px+ bold): 3:1
|
|
81
|
+
- UI components, icons: 3:1
|
|
82
|
+
- Never rely on color alone to convey state (add icon or text)
|
|
83
|
+
|
|
84
|
+
## Component aesthetics
|
|
85
|
+
|
|
86
|
+
### Buttons
|
|
87
|
+
```tsx
|
|
88
|
+
// Primary: filled, high contrast, clear label
|
|
89
|
+
// Secondary: outlined or ghost, same padding
|
|
90
|
+
// Destructive: red, add confirmation for irreversible actions
|
|
91
|
+
// Disabled: opacity, not hidden
|
|
92
|
+
|
|
93
|
+
// Sizing: consistent across the page
|
|
94
|
+
// sm: px-3 py-1.5 text-sm
|
|
95
|
+
// md: px-4 py-2 text-sm (default)
|
|
96
|
+
// lg: px-6 py-3 text-base
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Cards
|
|
100
|
+
- Always: consistent border-radius (round-xl or round-2xl — pick one)
|
|
101
|
+
- Background: one step above page background
|
|
102
|
+
- Subtle border OR subtle shadow — not both
|
|
103
|
+
- Padding: 16px min, 24px comfortable, 32px spacious
|
|
104
|
+
|
|
105
|
+
### Forms
|
|
106
|
+
- Label above input, never placeholder-only
|
|
107
|
+
- Error message below field (not global)
|
|
108
|
+
- Success state: green border or checkmark, not just "no error"
|
|
109
|
+
- Input height: 36px sm / 40px md / 44px lg (touch-friendly minimum: 44px)
|
|
110
|
+
|
|
111
|
+
### Empty states
|
|
112
|
+
- Always: illustration or icon + title + subtitle + CTA
|
|
113
|
+
- Never: just "No data" in small gray text
|
|
114
|
+
|
|
115
|
+
## Motion
|
|
116
|
+
|
|
117
|
+
Use sparingly. Every animation must have a purpose:
|
|
118
|
+
|
|
119
|
+
- **Entrance** (fade+slide): 200ms ease-out. Only for modals, drawers, toasts.
|
|
120
|
+
- **Interaction feedback** (scale, color): 100-150ms ease. Buttons, checkboxes.
|
|
121
|
+
- **Layout shifts** (list reorder): 200ms ease-in-out. Avoid on initial load.
|
|
122
|
+
- **Page transitions**: 200-300ms. Never >400ms.
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
// With motion/react (framer-motion)
|
|
126
|
+
<motion.div
|
|
127
|
+
initial={{ opacity: 0, y: 4 }}
|
|
128
|
+
animate={{ opacity: 1, y: 0 }}
|
|
129
|
+
transition={{ duration: 0.2, ease: 'easeOut' }}
|
|
130
|
+
/>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Never animate more than 2 properties simultaneously on the same element.
|
|
134
|
+
|
|
135
|
+
## Stack conventions
|
|
136
|
+
|
|
137
|
+
- **Tailwind v4**: CSS vars over hardcoded colors, `bg-background`, `text-foreground`
|
|
138
|
+
- **dstudio-ui**: Check existing components before building from scratch
|
|
139
|
+
- **Responsive**: design mobile-first, desktop enhancement — not desktop-first + mobile afterthought
|
|
140
|
+
- **Dark mode**: use `dark:` prefix, never hardcode `#000` or `#fff`
|
|
141
|
+
|
|
142
|
+
## Self-check before shipping
|
|
143
|
+
|
|
144
|
+
- [ ] Clear visual hierarchy — one dominant element per section
|
|
145
|
+
- [ ] Typography scale consistent throughout
|
|
146
|
+
- [ ] Spacing follows 4px grid
|
|
147
|
+
- [ ] Focus states visible on all interactive elements
|
|
148
|
+
- [ ] Contrast ≥4.5:1 for text
|
|
149
|
+
- [ ] No layout breaks at 375px, 768px, 1280px
|
|
150
|
+
- [ ] Motion feels snappy, not sluggish
|
|
151
|
+
- [ ] Empty/loading/error states have visual polish too
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ui-review
|
|
3
|
+
description: Systematic UI/UX audit. Checks visual hierarchy, accessibility (WCAG AA), responsive breakpoints, component composition, and interaction quality. Read-only — reports findings with file:line refs. Use after building a component or page.
|
|
4
|
+
user-invocable: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# UI Review
|
|
8
|
+
|
|
9
|
+
Post-implementation audit. Read-only — never modify files, only report. Every finding needs a file:line reference and a concrete fix.
|
|
10
|
+
|
|
11
|
+
## Scope
|
|
12
|
+
|
|
13
|
+
Run on: a component, a page, or a full feature. Grep for relevant files first.
|
|
14
|
+
|
|
15
|
+
## Audit Checklist
|
|
16
|
+
|
|
17
|
+
### 1. Visual Hierarchy
|
|
18
|
+
|
|
19
|
+
- [ ] One dominant element per viewport section (hero, card, list item)
|
|
20
|
+
- [ ] No more than 3 visual weights in the same area
|
|
21
|
+
- [ ] Text sizes follow a consistent scale (no arbitrary px values scattered)
|
|
22
|
+
- [ ] Spacing consistent (multiples of 4px)
|
|
23
|
+
- [ ] Color not the only differentiator between states
|
|
24
|
+
|
|
25
|
+
Report: "Section X has competing visual weights between `<ComponentA>` and `<ComponentB>`"
|
|
26
|
+
|
|
27
|
+
### 2. States completeness
|
|
28
|
+
|
|
29
|
+
For every component that fetches data or handles user actions:
|
|
30
|
+
|
|
31
|
+
- [ ] **Loading state** exists and shows skeleton or spinner
|
|
32
|
+
- [ ] **Empty state** exists with message + CTA (not just blank space)
|
|
33
|
+
- [ ] **Error state** exists with human-readable message + retry option
|
|
34
|
+
- [ ] **Success feedback** shown after mutation (toast, redirect, or inline)
|
|
35
|
+
- [ ] **Disabled state** on submit button while loading (prevents double submit)
|
|
36
|
+
|
|
37
|
+
Report: "Component `UserList` (src/components/UserList.tsx:42) has no empty state"
|
|
38
|
+
|
|
39
|
+
### 3. Accessibility (WCAG AA)
|
|
40
|
+
|
|
41
|
+
- [ ] All `<img>` have descriptive `alt` (or `alt=""` if decorative)
|
|
42
|
+
- [ ] All `<input>`, `<select>`, `<textarea>` have associated `<label>` (via `htmlFor` or `aria-label`)
|
|
43
|
+
- [ ] Interactive elements have visible focus indicator (`outline`, `ring`, or custom)
|
|
44
|
+
- [ ] No `outline: none` or `outline: 0` without replacement focus style
|
|
45
|
+
- [ ] Color contrast ≥4.5:1 for body text, ≥3:1 for large text and UI elements
|
|
46
|
+
- [ ] Buttons and links have accessible names (not just icons without `aria-label`)
|
|
47
|
+
- [ ] Keyboard navigation works: Tab, Shift+Tab, Enter, Escape for modals
|
|
48
|
+
- [ ] `role` and `aria-*` used when custom elements replace semantic HTML
|
|
49
|
+
- [ ] Motion: `prefers-reduced-motion` respected for decorative animations
|
|
50
|
+
|
|
51
|
+
Report: "Input `email` (src/app/login/page.tsx:18) has no associated label"
|
|
52
|
+
|
|
53
|
+
### 4. Responsive behavior
|
|
54
|
+
|
|
55
|
+
Check at 3 breakpoints: **375px** (mobile), **768px** (tablet), **1280px** (desktop)
|
|
56
|
+
|
|
57
|
+
- [ ] No horizontal scroll at any breakpoint
|
|
58
|
+
- [ ] Text readable at all sizes (no overflow, no ellipsis on critical content)
|
|
59
|
+
- [ ] Touch targets ≥44px on mobile
|
|
60
|
+
- [ ] No fixed widths that break on small screens
|
|
61
|
+
- [ ] Tables have scroll wrapper or collapse to cards on mobile
|
|
62
|
+
- [ ] Images don't overflow containers
|
|
63
|
+
- [ ] Forms are usable on mobile (inputs not too small, labels visible)
|
|
64
|
+
|
|
65
|
+
Report: "Component `PricingTable` (src/app/pricing/page.tsx:77) has no mobile layout — fixed width 1200px"
|
|
66
|
+
|
|
67
|
+
### 5. Component composition
|
|
68
|
+
|
|
69
|
+
- [ ] No inline styles (use Tailwind classes or CSS vars)
|
|
70
|
+
- [ ] No hardcoded colors (`#000`, `#fff`, `rgb(...)`) — use design tokens
|
|
71
|
+
- [ ] No `!important` unless absolutely necessary with comment explaining why
|
|
72
|
+
- [ ] Components are self-contained (no global CSS side effects)
|
|
73
|
+
- [ ] Props have sane defaults for optional UI props
|
|
74
|
+
- [ ] No deeply nested ternaries for conditional rendering — use early returns
|
|
75
|
+
|
|
76
|
+
Report: "Component `Button` (src/components/Button.tsx:34) uses hardcoded `color: '#3b82f6'` — should use `var(--color-primary)`"
|
|
77
|
+
|
|
78
|
+
### 6. Interaction quality
|
|
79
|
+
|
|
80
|
+
- [ ] Button/link hover states exist and are distinct
|
|
81
|
+
- [ ] Loading state on actions (buttons disable during async, show spinner)
|
|
82
|
+
- [ ] Form validation errors appear inline (not just an alert)
|
|
83
|
+
- [ ] Modals/dialogs are closeable via Escape key
|
|
84
|
+
- [ ] Scroll position preserved on back navigation (if applicable)
|
|
85
|
+
- [ ] No layout shift on data load (skeleton matches final layout)
|
|
86
|
+
|
|
87
|
+
Report: "Submit button `CreateInvoiceForm` (src/components/CreateInvoiceForm.tsx:88) stays enabled during submission — double-submit possible"
|
|
88
|
+
|
|
89
|
+
### 7. Performance signals
|
|
90
|
+
|
|
91
|
+
- [ ] No unbounded lists without pagination or virtualization
|
|
92
|
+
- [ ] Images use `next/image` (for Next.js) or have explicit `width`/`height`
|
|
93
|
+
- [ ] No `useEffect` with no dependencies that runs on every render
|
|
94
|
+
- [ ] No inline function definitions in render that break memoization
|
|
95
|
+
- [ ] Heavy components lazy-loaded if not in critical path
|
|
96
|
+
|
|
97
|
+
Report: "Component `ActivityFeed` (src/components/ActivityFeed.tsx:12) renders all items without virtualization — will lag at 1000+ items"
|
|
98
|
+
|
|
99
|
+
## Output format
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
## UI Review — [Component/Page name]
|
|
103
|
+
|
|
104
|
+
### Critical (must fix before shipping)
|
|
105
|
+
- [file:line] Description + fix
|
|
106
|
+
|
|
107
|
+
### High (fix this sprint)
|
|
108
|
+
- [file:line] Description + fix
|
|
109
|
+
|
|
110
|
+
### Medium (tech debt)
|
|
111
|
+
- [file:line] Description + fix
|
|
112
|
+
|
|
113
|
+
### Low (nice to have)
|
|
114
|
+
- [file:line] Description + fix
|
|
115
|
+
|
|
116
|
+
### Passed
|
|
117
|
+
- Visual hierarchy: ✓
|
|
118
|
+
- Loading states: ✓
|
|
119
|
+
- ...
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
If everything passes, say so explicitly with the list. Don't invent problems.
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ux-flow
|
|
3
|
+
description: Map UX flows, states, and edge cases before building any feature. Forces progressive disclosure, proper error/empty/loading states, and feedback timing. Use before implementing any form, page, or user-facing feature.
|
|
4
|
+
user-invocable: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# UX Flow
|
|
8
|
+
|
|
9
|
+
Before writing a single line of code, map the full user experience. UI without flows is just decoration.
|
|
10
|
+
|
|
11
|
+
## When to use
|
|
12
|
+
|
|
13
|
+
- Building a new page, form, or feature
|
|
14
|
+
- Refactoring a user-facing flow
|
|
15
|
+
- When asked to "add a settings page", "build a checkout", "design an onboarding"
|
|
16
|
+
|
|
17
|
+
## Process
|
|
18
|
+
|
|
19
|
+
### 1. Map the flow
|
|
20
|
+
|
|
21
|
+
Identify every state a user can be in:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
Entry → [Loading] → [Empty] → [Content] → [Action] → [Feedback] → [Success | Error]
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
For every transition, ask: "What if it fails? What if it's slow? What if it's empty?"
|
|
28
|
+
|
|
29
|
+
### 2. Define all states (mandatory for every component that fetches or mutates)
|
|
30
|
+
|
|
31
|
+
| State | What to show |
|
|
32
|
+
|-------|-------------|
|
|
33
|
+
| **Loading** | Skeleton or spinner — never blank |
|
|
34
|
+
| **Empty** | Illustration + CTA — never nothing |
|
|
35
|
+
| **Error** | Human-readable message + retry — never raw error |
|
|
36
|
+
| **Success** | Confirm feedback (toast, redirect, or inline) |
|
|
37
|
+
| **Partial** | Data loaded but incomplete (e.g. 0 items in a category) |
|
|
38
|
+
|
|
39
|
+
### 3. Progressive disclosure
|
|
40
|
+
|
|
41
|
+
- Show only what the user needs right now
|
|
42
|
+
- Advanced options behind "Advanced settings" toggle
|
|
43
|
+
- Destructive actions behind confirmation ("Are you sure?")
|
|
44
|
+
- Onboarding: one thing at a time, never a wall of forms
|
|
45
|
+
|
|
46
|
+
### 4. Feedback timing
|
|
47
|
+
|
|
48
|
+
| Action | Feedback deadline |
|
|
49
|
+
|--------|------------------|
|
|
50
|
+
| Click/tap | <100ms visual response |
|
|
51
|
+
| Form submit | Immediate disabled state on button |
|
|
52
|
+
| API call | Loading indicator if >300ms |
|
|
53
|
+
| Success/Error | Visible for ≥2s before disappearing |
|
|
54
|
+
|
|
55
|
+
### 5. Error design
|
|
56
|
+
|
|
57
|
+
- **Validation errors** — inline under the field, not a global banner
|
|
58
|
+
- **Network errors** — retry button, explain what failed in plain language
|
|
59
|
+
- **Auth errors** — redirect or prompt, never silently fail
|
|
60
|
+
- **Partial failures** — show what worked, explain what didn't
|
|
61
|
+
|
|
62
|
+
### 6. Edge cases to always handle
|
|
63
|
+
|
|
64
|
+
- [ ] Empty list (0 items, first time)
|
|
65
|
+
- [ ] Single item (layout still works?)
|
|
66
|
+
- [ ] Very long content (text overflow, truncation strategy)
|
|
67
|
+
- [ ] Very short content (minimum heights, placeholder states)
|
|
68
|
+
- [ ] Concurrent actions (double submit, race condition)
|
|
69
|
+
- [ ] Offline / timeout (show status, allow retry)
|
|
70
|
+
- [ ] Permission denied (explain why, offer an alternative)
|
|
71
|
+
|
|
72
|
+
## Output format
|
|
73
|
+
|
|
74
|
+
Before implementing, write a brief state map:
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
[Feature: User invitations]
|
|
78
|
+
States: loading | empty (no invites sent) | list (invites) | error (network)
|
|
79
|
+
Actions: Send invite → optimistic add → confirm/rollback
|
|
80
|
+
Edge cases: duplicate email, max 50 invites, expired invite
|
|
81
|
+
Feedback: inline toast on send, inline error on duplicate
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Then implement. Never skip this step for user-facing features.
|
|
85
|
+
|
|
86
|
+
## Stack conventions (React/Next.js)
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
// Always initialize loading state properly
|
|
90
|
+
const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
|
|
91
|
+
|
|
92
|
+
// Never nest ternaries for state rendering — use explicit conditions
|
|
93
|
+
if (state === 'loading') return <Skeleton />
|
|
94
|
+
if (state === 'error') return <ErrorState message={error} onRetry={refetch} />
|
|
95
|
+
if (data.length === 0) return <EmptyState cta="Add your first item" />
|
|
96
|
+
return <DataList items={data} />
|
|
97
|
+
```
|