Skip to content

Commit 54b2e33

Browse files
gracefullightsisyphus-dev-ai
gracefullight
and
sisyphus-dev-ai
committed
docs(.agent/rules): add trigger headers to build, design-tokens, lint-format, test guides
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
1 parent b42660e commit 54b2e33

4 files changed

Lines changed: 201 additions & 22 deletions

File tree

‎.agent/rules/build-guide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
trigger: model_decision
3+
description: when working for building, running, or deploying the project
4+
---
5+
16
# Build Guide
27

38
## Quick Start

‎.agent/rules/design-tokens-guide.md‎

Lines changed: 186 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
trigger: model_decision
3+
description: when working with design tokens, colors, or theming.
4+
---
5+
16
# Design Tokens Workflow
27

38
## Source of Truth
@@ -15,15 +20,155 @@ The single source of truth for all design tokens is located in `packages/design-
1520

1621
```typescript
1722
// packages/design-tokens/src/tokens.ts
23+
export interface OklchColor {
24+
l: number; // Lightness: 0 (black) to 1 (white)
25+
c: number; // Chroma: 0 (gray) to 0.4+ (vivid)
26+
h: number; // Hue: 0-360 degrees on color wheel
27+
a?: number; // Alpha: 0-1, defaults to 1
28+
}
29+
30+
const oklch = (l: number, c: number, h: number, a?: number): OklchColor => ({
31+
l, c, h, ...(a !== undefined && { a }),
32+
});
33+
1834
export const tokens = {
1935
color: {
20-
light: { primary: { l: 0.85, c: 0.2, h: 130 }, ... },
21-
dark: { primary: { l: 0.85, c: 0.2, h: 130 }, ... },
36+
light: {
37+
// Accent colors
38+
accent: oklch(0.97, 0, 0),
39+
accentForeground: oklch(0.205, 0, 0),
40+
41+
// Background & Foreground
42+
background: oklch(1, 0, 0),
43+
foreground: oklch(0.145, 0, 0),
44+
45+
// Border & Input
46+
border: oklch(0.922, 0, 0),
47+
input: oklch(0.922, 0, 0),
48+
49+
// Card
50+
card: oklch(1, 0, 0),
51+
cardForeground: oklch(0.145, 0, 0),
52+
53+
// Chart colors
54+
chart1: oklch(0.646, 0.222, 41.116),
55+
chart2: oklch(0.6, 0.118, 184.704),
56+
chart3: oklch(0.398, 0.07, 227.392),
57+
chart4: oklch(0.828, 0.189, 84.429),
58+
chart5: oklch(0.769, 0.188, 70.08),
59+
60+
// Destructive (danger/error)
61+
destructive: oklch(0.577, 0.245, 27.325),
62+
destructiveForeground: oklch(1, 0, 0),
63+
64+
// Muted (subtle)
65+
muted: oklch(0.97, 0, 0),
66+
mutedForeground: oklch(0.556, 0, 0),
67+
68+
// Popover (dropdown/tooltip)
69+
popover: oklch(1, 0, 0),
70+
popoverForeground: oklch(0.145, 0, 0),
71+
72+
// Primary (Lime Green)
73+
primary: oklch(0.85, 0.2, 130),
74+
primaryForeground: oklch(0.205, 0, 0),
75+
ring: oklch(0.708, 0, 0),
76+
77+
// Secondary
78+
secondary: oklch(0.97, 0, 0),
79+
secondaryForeground: oklch(0.205, 0, 0),
80+
81+
// Sidebar
82+
sidebar: oklch(0.985, 0, 0),
83+
sidebarAccent: oklch(0.97, 0, 0),
84+
sidebarAccentForeground: oklch(0.205, 0, 0),
85+
sidebarBorder: oklch(0.922, 0, 0),
86+
sidebarForeground: oklch(0.145, 0, 0),
87+
sidebarPrimary: oklch(0.205, 0, 0),
88+
sidebarPrimaryForeground: oklch(0.985, 0, 0),
89+
sidebarRing: oklch(0.708, 0, 0),
90+
},
91+
dark: { /* similar structure with dark mode values */ },
92+
},
93+
94+
// Radius (pixels)
95+
radius: {
96+
base: 10,
97+
sm: 6,
98+
md: 8,
99+
lg: 10,
100+
xl: 14,
101+
},
102+
103+
// Spacing (pixels)
104+
spacing: {
105+
xs: 4,
106+
sm: 8,
107+
md: 12,
108+
base: 16,
109+
lg: 20,
110+
xl: 24,
111+
"2xl": 32,
112+
"3xl": 48,
113+
},
114+
115+
// Typography
116+
typography: {
117+
fontFamily: {
118+
sans: "Noto Sans KR",
119+
mono: "Noto Sans Mono",
120+
},
121+
fontSize: {
122+
xs: 12,
123+
sm: 14,
124+
base: 16,
125+
lg: 18,
126+
xl: 20,
127+
xl2: 24,
128+
xl3: 30,
129+
xl4: 36,
130+
xl5: 48,
131+
xl6: 60,
132+
xl7: 72,
133+
xl8: 96,
134+
},
135+
fontWeight: {
136+
regular: 400,
137+
medium: 500,
138+
bold: 700,
139+
black: 900,
140+
},
141+
lineHeight: {
142+
xs: 1.0,
143+
sm: 1.25,
144+
base: 1.5,
145+
lg: 1.75,
146+
xl: 1.75,
147+
xl2: 2.0,
148+
xl3: 2.25,
149+
xl4: 2.5,
150+
},
151+
letterSpacing: {
152+
tight: -0.5,
153+
normal: 0,
154+
wide: 0.8,
155+
},
156+
},
157+
158+
// Style
159+
style: {
160+
borderWidth: 1,
161+
disabledOpacity: 0.5,
162+
hoverDarken: 0.05,
163+
hoverLighten: 0.075,
164+
},
165+
166+
// Semantic colors (convenience layer)
167+
semantic: {
168+
info: oklch(0.6, 0.2, 260),
169+
success: oklch(0.65, 0.2, 145),
170+
warning: oklch(0.75, 0.18, 85),
22171
},
23-
radius: { base: 10, sm: 6, md: 8, lg: 10, xl: 14 },
24-
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24 },
25-
typography: { fontFamily, fontSize, fontWeight, lineHeight },
26-
style: { borderWidth: 1, disabledOpacity: 0.5 },
27172
};
28173
```
29174

@@ -54,36 +199,55 @@ mise //packages/design-tokens:dev
54199

55200
## Adding New Colors
56201

202+
### Available Color Categories
203+
204+
The token system provides these color categories:
205+
206+
- **Base Colors**: `primary`, `secondary`, `accent`, `foreground`, `background`
207+
- **Component Colors**: `card`, `popover`, `sidebar`, `input`, `border`
208+
- **Feedback Colors**: `destructive`, `muted`, `ring`
209+
- **Chart Colors**: `chart1` through `chart5` (for data visualization)
210+
- **Semantic Colors**: `info`, `success`, `warning` (convenience layer)
211+
57212
### Step 1: Add to tokens.ts
213+
58214
```typescript
59215
color: {
60216
light: {
61-
// Add new color with OKLCH values
62-
success: { l: 0.65, c: 0.2, h: 145 },
63-
successForeground: { l: 0.2, c: 0, h: 0 },
217+
// Use oklch() helper for new colors
218+
newColor: oklch(0.65, 0.2, 145),
219+
newColorForeground: oklch(0.205, 0, 0),
64220
},
65221
dark: {
66-
success: { l: 0.65, c: 0.2, h: 145 },
67-
successForeground: { l: 0.98, c: 0, h: 0 },
222+
// Add same colors with dark mode values
223+
newColor: oklch(0.65, 0.2, 145),
224+
newColorForeground: oklch(0.985, 0, 0),
68225
},
69226
}
70227
```
71228

72-
### Step 2: Update ForUI Mapping (if needed)
73-
If adding a new semantic color, update `tooling/build-forui-theme.ts`:
74-
```typescript
75-
const colorMap: Record<string, string> = {
76-
// ... existing mappings
77-
success: "success",
78-
successForeground: "successForeground",
79-
};
80-
```
81-
82-
### Step 3: Build
229+
### Step 2: Build
83230
```bash
84231
mise //packages/design-tokens:build
85232
```
86233

234+
### Step 3: Use in Code
235+
236+
**Web (CSS variable):**
237+
```css
238+
background-color: oklch(var(--color-newColor) / var(--alpha));
239+
```
240+
241+
**Mobile (Flutter theme):**
242+
```dart
243+
Color.from(
244+
colorSpace: ColorSpace.displayP3,
245+
l: tokens.newColor.l,
246+
c: tokens.newColor.c,
247+
h: tokens.newColor.h,
248+
)
249+
```
250+
87251
## OKLCH Color Guide
88252

89253
| Component | Range | Description |

‎.agent/rules/lint-format-guide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
trigger: always_on
3+
description: when working for linting and formatting.
4+
---
5+
16
# Lint & Format Guide
27

38
## Overview

‎.agent/rules/test-guide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
trigger: always_on
3+
description: when working for testing or coverage.
4+
---
5+
16
# Test Guide
27

38
## Overview

0 commit comments

Comments
 (0)