@oriro/orirocli 0.1.0

package/skills/craft/uipm-design-system/references/component-specs.md

@@ -0,0 +1,236 @@
+# Component Specifications
+
+Detailed specs for core components with states and variants.
+
+## Button
+
+### Variants
+
+| Variant     | Background  | Text       | Border | Use Case          |
+| ----------- | ----------- | ---------- | ------ | ----------------- |
+| default     | primary     | white      | none   | Primary actions   |
+| secondary   | gray-100    | gray-900   | none   | Secondary actions |
+| outline     | transparent | foreground | border | Tertiary actions  |
+| ghost       | transparent | foreground | none   | Subtle actions    |
+| link        | transparent | primary    | none   | Navigation        |
+| destructive | red-600     | white      | none   | Dangerous actions |
+
+### Sizes
+
+| Size    | Height | Padding X | Padding Y | Font Size | Icon Size |
+| ------- | ------ | --------- | --------- | --------- | --------- |
+| sm      | 32px   | 12px      | 6px       | 14px      | 16px      |
+| default | 40px   | 16px      | 8px       | 14px      | 18px      |
+| lg      | 48px   | 24px      | 12px      | 16px      | 20px      |
+| icon    | 40px   | 0         | 0         | -         | 18px      |
+
+### States
+
+| State    | Background | Text     | Opacity | Cursor      |
+| -------- | ---------- | -------- | ------- | ----------- |
+| default  | token      | token    | 1       | pointer     |
+| hover    | darker     | token    | 1       | pointer     |
+| active   | darkest    | token    | 1       | pointer     |
+| focus    | token      | token    | 1       | pointer     |
+| disabled | muted      | muted-fg | 0.5     | not-allowed |
+| loading  | token      | token    | 0.7     | wait        |
+
+### Anatomy
+
+```
+┌─────────────────────────────────────┐
+│  [icon]  Label Text  [icon]         │
+└─────────────────────────────────────┘
+     ↑                      ↑
+  leading icon         trailing icon
+```
+
+---
+
+## Input
+
+### Variants
+
+| Variant  | Description         |
+| -------- | ------------------- |
+| default  | Standard text input |
+| textarea | Multi-line text     |
+| select   | Dropdown selection  |
+| checkbox | Boolean toggle      |
+| radio    | Single selection    |
+| switch   | Toggle switch       |
+
+### Sizes
+
+| Size    | Height | Padding   | Font Size |
+| ------- | ------ | --------- | --------- |
+| sm      | 32px   | 8px 12px  | 14px      |
+| default | 40px   | 8px 12px  | 14px      |
+| lg      | 48px   | 12px 16px | 16px      |
+
+### States
+
+| State    | Border   | Background | Ring        |
+| -------- | -------- | ---------- | ----------- |
+| default  | gray-300 | white      | none        |
+| hover    | gray-400 | white      | none        |
+| focus    | primary  | white      | primary/20% |
+| error    | red-500  | white      | red/20%     |
+| disabled | gray-200 | gray-100   | none        |
+
+### Anatomy
+
+```
+Label (optional)
+┌─────────────────────────────────────┐
+│ [icon] Placeholder/Value   [action] │
+└─────────────────────────────────────┘
+Helper text or error message
+```
+
+---
+
+## Card
+
+### Variants
+
+| Variant     | Shadow | Border | Use Case          |
+| ----------- | ------ | ------ | ----------------- |
+| default     | sm     | 1px    | Standard card     |
+| elevated    | lg     | none   | Prominent content |
+| outline     | none   | 1px    | Subtle container  |
+| interactive | sm→md  | 1px    | Clickable card    |
+
+### Anatomy
+
+```
+┌─────────────────────────────────────┐
+│ Card Header                         │
+│   Title                             │
+│   Description                       │
+├─────────────────────────────────────┤
+│ Card Content                        │
+│   Main content area                 │
+│                                     │
+├─────────────────────────────────────┤
+│ Card Footer                         │
+│   Actions                           │
+└─────────────────────────────────────┘
+```
+
+### Spacing
+
+| Area    | Padding     |
+| ------- | ----------- |
+| header  | 24px 24px 0 |
+| content | 24px        |
+| footer  | 0 24px 24px |
+| gap     | 16px        |
+
+---
+
+## Badge
+
+### Variants
+
+| Variant     | Background  | Text       |
+| ----------- | ----------- | ---------- |
+| default     | primary     | white      |
+| secondary   | gray-100    | gray-900   |
+| outline     | transparent | foreground |
+| destructive | red-600     | white      |
+| success     | green-600   | white      |
+| warning     | yellow-500  | gray-900   |
+
+### Sizes
+
+| Size    | Padding  | Font Size | Height |
+| ------- | -------- | --------- | ------ |
+| sm      | 4px 8px  | 11px      | 20px   |
+| default | 4px 10px | 12px      | 24px   |
+| lg      | 6px 12px | 14px      | 28px   |
+
+---
+
+## Alert
+
+### Variants
+
+| Variant     | Icon    | Background | Border     |
+| ----------- | ------- | ---------- | ---------- |
+| default     | info    | gray-50    | gray-200   |
+| destructive | alert   | red-50     | red-200    |
+| success     | check   | green-50   | green-200  |
+| warning     | warning | yellow-50  | yellow-200 |
+
+### Anatomy
+
+```
+┌─────────────────────────────────────┐
+│ [icon]  Title                    [×]│
+│         Description text            │
+└─────────────────────────────────────┘
+```
+
+---
+
+## Dialog
+
+### Sizes
+
+| Size    | Max Width   | Use Case              |
+| ------- | ----------- | --------------------- |
+| sm      | 384px       | Simple confirmations  |
+| default | 512px       | Standard dialogs      |
+| lg      | 640px       | Complex forms         |
+| xl      | 768px       | Data-heavy dialogs    |
+| full    | 100% - 32px | Full-screen on mobile |
+
+### Anatomy
+
+```
+┌───────────────────────────────────────┐
+│ Dialog Header                      [×]│
+│   Title                               │
+│   Description                         │
+├───────────────────────────────────────┤
+│ Dialog Content                        │
+│   Scrollable if needed                │
+│                                       │
+├───────────────────────────────────────┤
+│ Dialog Footer                         │
+│                     [Cancel] [Confirm]│
+└───────────────────────────────────────┘
+```
+
+---
+
+## Table
+
+### Row States
+
+| State    | Background    | Use Case     |
+| -------- | ------------- | ------------ |
+| default  | white         | Normal row   |
+| hover    | gray-50       | Mouse over   |
+| selected | primary/10%   | Selected row |
+| striped  | gray-50/white | Alternating  |
+
+### Cell Alignment
+
+| Content Type | Alignment |
+| ------------ | --------- |
+| Text         | Left      |
+| Numbers      | Right     |
+| Status/Badge | Center    |
+| Actions      | Right     |
+
+### Spacing
+
+| Element                  | Value     |
+| ------------------------ | --------- |
+| cell padding             | 12px 16px |
+| header padding           | 12px 16px |
+| row height (compact)     | 40px      |
+| row height (default)     | 48px      |
+| row height (comfortable) | 56px      |

package/skills/craft/uipm-design-system/references/component-tokens.md

@@ -0,0 +1,214 @@
+# Component Tokens
+
+Component-specific tokens referencing semantic layer.
+
+## Button Tokens
+
+```css
+:root {
+  /* Default (Primary) */
+  --button-bg: var(--color-primary);
+  --button-fg: var(--color-primary-foreground);
+  --button-hover-bg: var(--color-primary-hover);
+  --button-active-bg: var(--color-primary-active);
+
+  /* Secondary */
+  --button-secondary-bg: var(--color-secondary);
+  --button-secondary-fg: var(--color-secondary-foreground);
+  --button-secondary-hover-bg: var(--color-secondary-hover);
+
+  /* Outline */
+  --button-outline-border: var(--color-border);
+  --button-outline-fg: var(--color-foreground);
+  --button-outline-hover-bg: var(--color-accent);
+
+  /* Ghost */
+  --button-ghost-fg: var(--color-foreground);
+  --button-ghost-hover-bg: var(--color-accent);
+
+  /* Destructive */
+  --button-destructive-bg: var(--color-destructive);
+  --button-destructive-fg: var(--color-destructive-foreground);
+  --button-destructive-hover-bg: var(--color-destructive-hover);
+
+  /* Sizing */
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --button-padding-x-sm: var(--space-3);
+  --button-padding-y-sm: var(--space-1-5);
+  --button-padding-x-lg: var(--space-6);
+  --button-padding-y-lg: var(--space-3);
+
+  /* Shape */
+  --button-radius: var(--radius-md);
+  --button-font-size: var(--font-size-sm);
+  --button-font-weight: var(--font-weight-medium);
+}
+```
+
+## Input Tokens
+
+```css
+:root {
+  /* Background & Border */
+  --input-bg: var(--color-background);
+  --input-border: var(--color-input);
+  --input-fg: var(--color-foreground);
+
+  /* Placeholder */
+  --input-placeholder: var(--color-muted-foreground);
+
+  /* Focus */
+  --input-focus-border: var(--color-ring);
+  --input-focus-ring: var(--color-ring);
+
+  /* Error */
+  --input-error-border: var(--color-error);
+  --input-error-fg: var(--color-error);
+
+  /* Disabled */
+  --input-disabled-bg: var(--color-muted);
+  --input-disabled-fg: var(--color-muted-foreground);
+
+  /* Sizing */
+  --input-padding-x: var(--space-3);
+  --input-padding-y: var(--space-2);
+  --input-radius: var(--radius-md);
+  --input-font-size: var(--font-size-sm);
+}
+```
+
+## Card Tokens
+
+```css
+:root {
+  /* Background & Border */
+  --card-bg: var(--color-card);
+  --card-fg: var(--color-card-foreground);
+  --card-border: var(--color-border);
+
+  /* Shadow */
+  --card-shadow: var(--shadow-default);
+  --card-shadow-hover: var(--shadow-md);
+
+  /* Spacing */
+  --card-padding: var(--space-6);
+  --card-padding-sm: var(--space-4);
+  --card-gap: var(--space-4);
+
+  /* Shape */
+  --card-radius: var(--radius-lg);
+}
+```
+
+## Badge Tokens
+
+```css
+:root {
+  /* Default */
+  --badge-bg: var(--color-primary);
+  --badge-fg: var(--color-primary-foreground);
+
+  /* Secondary */
+  --badge-secondary-bg: var(--color-secondary);
+  --badge-secondary-fg: var(--color-secondary-foreground);
+
+  /* Outline */
+  --badge-outline-border: var(--color-border);
+  --badge-outline-fg: var(--color-foreground);
+
+  /* Destructive */
+  --badge-destructive-bg: var(--color-destructive);
+  --badge-destructive-fg: var(--color-destructive-foreground);
+
+  /* Sizing */
+  --badge-padding-x: var(--space-2-5);
+  --badge-padding-y: var(--space-0-5);
+  --badge-radius: var(--radius-full);
+  --badge-font-size: var(--font-size-xs);
+}
+```
+
+## Alert Tokens
+
+```css
+:root {
+  /* Default */
+  --alert-bg: var(--color-background);
+  --alert-fg: var(--color-foreground);
+  --alert-border: var(--color-border);
+
+  /* Destructive */
+  --alert-destructive-bg: var(--color-destructive);
+  --alert-destructive-fg: var(--color-destructive-foreground);
+
+  /* Spacing */
+  --alert-padding: var(--space-4);
+  --alert-radius: var(--radius-lg);
+}
+```
+
+## Dialog/Modal Tokens
+
+```css
+:root {
+  /* Overlay */
+  --dialog-overlay-bg: rgb(0 0 0 / 0.5);
+
+  /* Content */
+  --dialog-bg: var(--color-background);
+  --dialog-fg: var(--color-foreground);
+  --dialog-border: var(--color-border);
+  --dialog-shadow: var(--shadow-lg);
+
+  /* Spacing */
+  --dialog-padding: var(--space-6);
+  --dialog-radius: var(--radius-lg);
+  --dialog-max-width: 32rem;
+}
+```
+
+## Table Tokens
+
+```css
+:root {
+  /* Header */
+  --table-header-bg: var(--color-muted);
+  --table-header-fg: var(--color-muted-foreground);
+
+  /* Body */
+  --table-row-bg: var(--color-background);
+  --table-row-hover-bg: var(--color-muted);
+  --table-row-fg: var(--color-foreground);
+
+  /* Border */
+  --table-border: var(--color-border);
+
+  /* Spacing */
+  --table-cell-padding-x: var(--space-4);
+  --table-cell-padding-y: var(--space-3);
+}
+```
+
+## Usage Example
+
+```css
+.button {
+  background: var(--button-bg);
+  color: var(--button-fg);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  border-radius: var(--button-radius);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  transition: background var(--duration-fast);
+}
+
+.button:hover {
+  background: var(--button-hover-bg);
+}
+
+.button.secondary {
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-fg);
+}
+```

package/skills/craft/uipm-design-system/references/primitive-tokens.md

@@ -0,0 +1,199 @@
+# Primitive Tokens
+
+Raw design values - foundation of the design system.
+
+## Color Scales
+
+### Gray Scale
+
+```css
+:root {
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+}
+```
+
+### Primary Colors (Blue)
+
+```css
+:root {
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+}
+```
+
+### Status Colors
+
+```css
+:root {
+  /* Success - Green */
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+
+  /* Warning - Yellow */
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+
+  /* Error - Red */
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+
+  /* Info - Blue */
+  --color-info: var(--color-blue-500);
+}
+```
+
+## Spacing Scale
+
+4px base unit system.
+
+```css
+:root {
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0-5: 0.125rem; /* 2px */
+  --space-1: 0.25rem; /* 4px */
+  --space-1-5: 0.375rem; /* 6px */
+  --space-2: 0.5rem; /* 8px */
+  --space-2-5: 0.625rem; /* 10px */
+  --space-3: 0.75rem; /* 12px */
+  --space-3-5: 0.875rem; /* 14px */
+  --space-4: 1rem; /* 16px */
+  --space-5: 1.25rem; /* 20px */
+  --space-6: 1.5rem; /* 24px */
+  --space-7: 1.75rem; /* 28px */
+  --space-8: 2rem; /* 32px */
+  --space-9: 2.25rem; /* 36px */
+  --space-10: 2.5rem; /* 40px */
+  --space-12: 3rem; /* 48px */
+  --space-14: 3.5rem; /* 56px */
+  --space-16: 4rem; /* 64px */
+  --space-20: 5rem; /* 80px */
+  --space-24: 6rem; /* 96px */
+}
+```
+
+## Typography Scale
+
+```css
+:root {
+  /* Font Sizes */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem; /* 36px */
+  --font-size-5xl: 3rem; /* 48px */
+
+  /* Line Heights */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Letter Spacing */
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+}
+```
+
+## Border Radius
+
+```css
+:root {
+  --radius-none: 0;
+  --radius-sm: 0.125rem; /* 2px */
+  --radius-default: 0.25rem; /* 4px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+}
+```
+
+## Shadows
+
+```css
+:root {
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+```
+
+## Motion / Duration
+
+```css
+:root {
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Semantic durations */
+  --duration-fast: var(--duration-150);
+  --duration-normal: var(--duration-200);
+  --duration-slow: var(--duration-300);
+}
+```
+
+## Z-Index Scale
+
+```css
+:root {
+  --z-auto: auto;
+  --z-0: 0;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal: 1200;
+  --z-popover: 1300;
+  --z-tooltip: 1400;
+}
+```