@famgia/omnify-typescript 0.0.90 → 0.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@famgia/omnify-typescript",
-  "version": "0.0.90",
+  "version": "0.0.91",
   "description": "TypeScript type definitions generator for Omnify schemas",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -48,7 +48,7 @@
     "directory": "packages/typescript-generator"
   },
   "dependencies": {
-    "@famgia/omnify-types": "0.0.100"
+    "@famgia/omnify-types": "0.0.101"
   },
   "peerDependencies": {
     "zod": "^3.0.0"

package/stubs/ai-guides/cursor/react-design.mdc.stub

@@ -11,6 +11,11 @@ alwaysApply: false
 This design system follows **Japanese Business UI principles**: compact, functional, and minimal.
 Primary color: Violet (#7C3AED).
 
+> ⚠️ **CRITICAL RULES:**
+> 1. **ALL colors MUST come from Ant Design theme tokens** - Never hardcode colors!
+> 2. **Minimize inline styles** - Use Ant Design components and `styles` prop with tokens
+> 3. **Use 4px grid system** - All spacing must be multiples of 4px
+
 ## Design Principles
 
 ### 日本のビジネスUI (Japanese Business UI)
@@ -431,6 +436,111 @@ Required fonts:
 - Inter (English)
 - Be Vietnam Pro (Vietnamese)
 
+## 🚫 CRITICAL: Forbidden Practices
+
+### ❌ ABSOLUTELY FORBIDDEN: Custom Colors
+
+**NEVER add colors that are not from the Ant Design theme system.**
+
+```tsx
+// ❌ FORBIDDEN: Hardcoded colors
+<div style={{ color: '#333333' }}>
+<div style={{ backgroundColor: 'blue' }}>
+<div style={{ borderColor: 'rgb(200, 200, 200)' }}>
+<Text style={{ color: '#ff6b6b' }}>Error</Text>
+
+// ❌ FORBIDDEN: Tailwind color classes
+<div className="text-gray-500 bg-blue-100">
+<div className="border-red-500">
+
+// ✅ CORRECT: Use Ant Design theme tokens
+import { theme } from 'antd';
+const { token } = theme.useToken();
+
+<div style={{ color: token.colorText }}>
+<div style={{ backgroundColor: token.colorBgContainer }}>
+<div style={{ borderColor: token.colorBorder }}>
+<Text type="danger">Error</Text>  // Use Ant Design's built-in types
+```
+
+**Available Ant Design Color Tokens:**
+
+| Token | Usage |
+|-------|-------|
+| `token.colorPrimary` | Primary brand color |
+| `token.colorSuccess` | Success states |
+| `token.colorWarning` | Warning states |
+| `token.colorError` | Error states |
+| `token.colorText` | Primary text |
+| `token.colorTextSecondary` | Secondary text |
+| `token.colorTextTertiary` | Tertiary/disabled text |
+| `token.colorBgContainer` | Container background |
+| `token.colorBgLayout` | Layout background |
+| `token.colorBorder` | Borders |
+| `token.colorBorderSecondary` | Subtle borders |
+
+### ❌ FORBIDDEN: Excessive Inline Styles
+
+**Minimize `style` prop usage. Prefer Ant Design's component API.**
+
+```tsx
+// ❌ BAD: Inline styles everywhere
+<Card style={{ padding: 24, margin: 16, borderRadius: 8 }}>
+  <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+    <span style={{ fontSize: 14, fontWeight: 500 }}>Title</span>
+  </div>
+</Card>
+
+// ✅ GOOD: Use Ant Design component props
+<Card 
+  styles={{ body: { padding: token.paddingLG } }}
+  style={{ marginBottom: token.marginLG }}  // Only when necessary
+>
+  <Flex gap="middle" align="center">
+    <Typography.Text strong>Title</Typography.Text>
+  </Flex>
+</Card>
+```
+
+**When to use inline styles:**
+
+| Situation | Allowed? | Alternative |
+|-----------|----------|-------------|
+| Component layout (flex, grid) | ⚠️ Limited | Use `<Flex>`, `<Space>`, `<Row>`/`<Col>` |
+| Colors | ❌ NO | Use theme tokens or component types |
+| Typography | ❌ NO | Use `<Typography.Text>`, `<Typography.Title>` |
+| Spacing | ⚠️ Limited | Use Ant Design `styles` prop with tokens |
+| Responsive | ❌ NO | Use Ant Design Grid or CSS modules |
+
+**Allowed inline style patterns:**
+
+```tsx
+// ✅ Allowed: Token-based values only
+<div style={{ marginBottom: token.marginLG }}>
+<div style={{ padding: token.paddingMD }}>
+
+// ✅ Allowed: Layout properties
+<div style={{ flex: 1 }}>
+<div style={{ width: '100%', maxWidth: 800 }}>
+
+// ✅ Allowed: Component-specific overrides via styles prop
+<Table styles={{ header: { background: token.colorBgLayout } }} />
+<Card styles={{ body: { padding: 0 } }} />
+```
+
+### ❌ FORBIDDEN: CSS-in-JS Libraries for Styling
+
+```tsx
+// ❌ FORBIDDEN: Don't use styled-components, emotion, etc. for colors/spacing
+const StyledCard = styled.div`
+  background: #f5f5f5;  // NO!
+  padding: 20px;        // NO!
+`;
+
+// ✅ CORRECT: Use Ant Design components + theme
+<Card styles={{ body: { padding: token.paddingLG } }}>
+```
+
 ## 🚨 Common Spacing Mistakes
 
 ### ❌ Mistake 1: Inconsistent Base Unit
@@ -499,20 +609,26 @@ gap: 16px;      /* 4 × 4 */
 
 ### ✅ Do
 
-- Use 4px grid (4, 8, 12, 16, 24, 32...)
+- **Colors**: Use ONLY `token.*` from `theme.useToken()`
+- **Spacing**: Use 4px grid (4, 8, 12, 16, 24, 32...)
+- **Layout**: Use Ant Design `<Flex>`, `<Space>`, `<Row>`/`<Col>`
+- **Typography**: Use `<Typography.Text>`, `<Typography.Title>`
+- **Styles**: Use component `styles` prop with tokens
 - Use compact spacing (8-16px for components)
 - Use `gap` for flex/grid layouts
 - Decrease spacing as you nest deeper
 - Maintain consistent spacing ratios
-- Use design tokens from ConfigProvider
 - Keep shadows minimal or none
 - Use subtle border radius (2-6px)
 - Maintain high information density
 - Use locale-specific fonts
-- Follow HSL color harmony
 
-### ❌ Don't
+### ❌ Don't (FORBIDDEN)
 
+- **NEVER** use hardcoded colors (`#333`, `blue`, `rgb()`)
+- **NEVER** use Tailwind color classes (`text-gray-500`)
+- **NEVER** create custom styled-components for basic styling
+- **AVOID** excessive inline `style` props
 - Use random pixel values (13px, 17px, etc.)
 - Use excessive padding (>24px on components)
 - Use margins on flex children (use gap instead)
@@ -522,7 +638,6 @@ gap: 16px;      /* 4 × 4 */
 - Use large border radius (>10px)
 - Leave large empty spaces without purpose
 - Mix warm and cool grays
-- Use colors outside the harmony system
 
 ## Quick Reference