binary-agents 1.0.18 → 1.0.20
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.
- package/commands/code-review.md +4 -2
- package/commands/figma-check.md +35 -9
- package/package.json +1 -1
package/commands/code-review.md
CHANGED
|
@@ -42,8 +42,10 @@ Skill은 사용자 설치에 따라 다르며 추가 리뷰 가이드라인/컨
|
|
|
42
42
|
## 작업 순서
|
|
43
43
|
|
|
44
44
|
1. **리뷰 범위 결정**
|
|
45
|
-
-
|
|
46
|
-
-
|
|
45
|
+
- **경로가 제공된 경우:** 해당 경로의 모든 파일을 리뷰
|
|
46
|
+
- **경로가 없는 경우:** 현재 작업 디렉토리 전체를 리뷰
|
|
47
|
+
|
|
48
|
+
> **중요:** git 변경사항에 제한하지 마세요. 대상 경로의 모든 파일을 리뷰합니다.
|
|
47
49
|
|
|
48
50
|
2. **사용자에게 리뷰 유형 질문** (AskUserQuestion 사용)
|
|
49
51
|
|
package/commands/figma-check.md
CHANGED
|
@@ -68,9 +68,35 @@ Glob: **/*.styles.{ts,js}
|
|
|
68
68
|
Glob: **/*.styled.{ts,js}
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
-
### 3.
|
|
71
|
+
### 3. 사용 중인 디자인 컴포넌트 기본 스타일 확인
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
코드에서 사용 중인 디자인 시스템 컴포넌트의 기본 스타일을 확인합니다.
|
|
74
|
+
|
|
75
|
+
**확인 대상:**
|
|
76
|
+
- `@3o3/mystique-components` (BottomSheet, Modal, Card 등)
|
|
77
|
+
- `@3o3/fe-components` (Layout 등)
|
|
78
|
+
- 프로젝트 내 공통 컴포넌트
|
|
79
|
+
|
|
80
|
+
**확인 방법:**
|
|
81
|
+
1. 선택된 코드에서 import된 디자인 컴포넌트 식별
|
|
82
|
+
2. 해당 컴포넌트의 기본 padding, margin, gap 등 확인
|
|
83
|
+
3. CLAUDE.md의 "Component Default Styles" 섹션 참조
|
|
84
|
+
4. 없으면 컴포넌트 소스 코드 직접 확인
|
|
85
|
+
|
|
86
|
+
**예시:**
|
|
87
|
+
```
|
|
88
|
+
BottomSheet 사용 감지 → 기본 px-6 (24px) 패딩 있음
|
|
89
|
+
→ Figma의 24px 패딩은 BottomSheet 기본값으로 처리됨
|
|
90
|
+
→ 추가 px-6 불필요
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
**주의:** Figma 스펙과 비교 시 컴포넌트 기본 스타일을 고려하여 중복 적용 방지
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
### 4. 7가지 기준으로 비교
|
|
98
|
+
|
|
99
|
+
#### 4.1 레이아웃 (Weight: 20%)
|
|
74
100
|
|
|
75
101
|
| Figma | Tailwind | CSS-in-JS |
|
|
76
102
|
|-------|----------|-----------|
|
|
@@ -79,7 +105,7 @@ Glob: **/*.styled.{ts,js}
|
|
|
79
105
|
| `primaryAxisAlignItems: "CENTER"` | `justify-center` | `justifyContent: 'center'` |
|
|
80
106
|
| `counterAxisAlignItems: "CENTER"` | `items-center` | `alignItems: 'center'` |
|
|
81
107
|
|
|
82
|
-
####
|
|
108
|
+
#### 4.2 색상 (Weight: 20%)
|
|
83
109
|
|
|
84
110
|
```
|
|
85
111
|
Figma RGBA (0-1) → CSS RGBA (0-255)
|
|
@@ -88,7 +114,7 @@ r: 0.2 → Math.round(0.2 * 255) = 51
|
|
|
88
114
|
|
|
89
115
|
**허용 오차:** ±5 (RGB 값 기준)
|
|
90
116
|
|
|
91
|
-
####
|
|
117
|
+
#### 4.3 타이포그래피 (Weight: 20%)
|
|
92
118
|
|
|
93
119
|
| 속성 | Figma | CSS |
|
|
94
120
|
|------|-------|-----|
|
|
@@ -98,7 +124,7 @@ r: 0.2 → Math.round(0.2 * 255) = 51
|
|
|
98
124
|
|
|
99
125
|
**허용 오차:** fontSize ±1px, lineHeight ±2px
|
|
100
126
|
|
|
101
|
-
####
|
|
127
|
+
#### 4.4 간격 (Weight: 15%)
|
|
102
128
|
|
|
103
129
|
| Figma | CSS |
|
|
104
130
|
|-------|-----|
|
|
@@ -107,7 +133,7 @@ r: 0.2 → Math.round(0.2 * 255) = 51
|
|
|
107
133
|
|
|
108
134
|
**허용 오차:** ±2px
|
|
109
135
|
|
|
110
|
-
####
|
|
136
|
+
#### 4.5 크기 (Weight: 15%)
|
|
111
137
|
|
|
112
138
|
| Figma | CSS |
|
|
113
139
|
|-------|-----|
|
|
@@ -115,12 +141,12 @@ r: 0.2 → Math.round(0.2 * 255) = 51
|
|
|
115
141
|
| `absoluteBoundingBox.height` | `height` |
|
|
116
142
|
| `cornerRadius` | `border-radius` |
|
|
117
143
|
|
|
118
|
-
####
|
|
144
|
+
#### 4.6 컴포넌트 구조 (Weight: 10%)
|
|
119
145
|
|
|
120
146
|
- children 개수와 순서
|
|
121
147
|
- 중첩 구조
|
|
122
148
|
|
|
123
|
-
####
|
|
149
|
+
#### 4.7 디자인 토큰 (추가 검증)
|
|
124
150
|
|
|
125
151
|
Figma Variables (`boundVariables`)와 코드 토큰 비교:
|
|
126
152
|
|
|
@@ -130,7 +156,7 @@ Figma Variables (`boundVariables`)와 코드 토큰 비교:
|
|
|
130
156
|
| `color/primary` 토큰 | `#3366FF` (하드코딩) | 🟡 토큰 미사용 |
|
|
131
157
|
| `color/primary` 토큰 | `var(--color-secondary)` | 🔴 토큰 불일치 |
|
|
132
158
|
|
|
133
|
-
###
|
|
159
|
+
### 5. 심각도 판정
|
|
134
160
|
|
|
135
161
|
- 🔴 **Critical**: 브랜드/UX에 영향, 즉시 수정 필요
|
|
136
162
|
- 🟡 **Warning**: 미세한 차이, 검토 권장
|