mirror of
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
synced 2026-10-10 21:06:15 +00:00
ef5f5ba0e6
* fix(cli): install all 7 skills via uipro init, not just the orchestrator `uipro init` rendered only the orchestrator (ui-ux-pro-max) and never delivered the 6 sibling skills (banner-design, brand, design, design-system, slides, ui-styling), so users got 1 of 7 skills (#362). - sync-assets.mjs: bundle the 6 sub-skills into cli/assets/skills/ as static copies (source of truth: .claude/skills/), with sync + check coverage. Excludes ui-styling/canvas-fonts (~5.8MB of TTF) and __pycache__/.pyc cruft — a skill registers from its SKILL.md, not its fonts — so the bundle adds ~0.9MB, not ~6.6MB. - template.ts: after rendering the orchestrator, install each bundled sub-skill as a sibling. The skills parent is derived from the platform's skillPath (skills/ for most, prompts/ for copilot, steering/ for kiro) rather than hardcoded. - uninstall.ts: remove the sub-skills too. Verified: check:assets in sync, tsc passes, and a per-platform install harness delivers all 7 skills to the correct parent dir with no fonts. Closes #362 * fix(cli): filter excluded files from target side of check:assets check:assets filtered sourceFiles with isExcludedAssetFile but not targetFiles, so a stray cli/assets/scripts/__pycache__/*.pyc (generated by a local Python run) was reported as an "extra asset file" and failed the gate. Apply the same predicate to targetFiles in both the dirsToSync and sub-skill loops. Verified: check:assets now passes with __pycache__/*.pyc present in the target tree; typecheck passes. * fix(cli): uninstall from each platform's real skills dir, not hardcoded skills/ removeSkillDir() hardcoded <folder>/skills/<name>, but the installer places skills under each platform config's skillPath parent — copilot in .github/prompts/, kiro in .kiro/steering/. So uninstall left those platforms' skills (orchestrator + sub-skills) behind. Derive the install parent from loadPlatformConfig(aiType).folderStructure (same source the installer uses), and keep the legacy <folder>/skills/ cleanup (incl. .shared/) for older installs. Deduped via a Set. Verified: typecheck passes; an install+uninstall harness removes all 7 skills with zero leftovers for claude (.claude/skills), copilot (.github/prompts) and kiro (.kiro/steering). * fix(cli): re-sync bundled sub-skills after #385 stripped ckm- names #385 merged to main and removed the ckm- prefix from the six .claude/skills/*/SKILL.md name fields. This branch's bundled copies under cli/assets/skills/ still carried the old ckm- names, so after the PR merges with main the source no longer matched the bundle and the check-asset-sync CI gate failed (stale asset file: skills/*/SKILL.md). Merge main and regenerate the bundle so cli/assets/skills matches the current .claude/skills source of truth. check:assets and typecheck pass.
237 lines
6.8 KiB
Markdown
237 lines
6.8 KiB
Markdown
# 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 |
|