@fr0mpy/component-system 2.0.0 → 2.1.0
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/README.md +79 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# @fr0mpy/component-system
|
|
2
|
+
|
|
3
|
+
Claude Code UI styling system with design tokens, 36 component recipes, and visual preview harness.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npx @fr0mpy/component-system
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## What's Included
|
|
12
|
+
|
|
13
|
+
- **skills/** - Styling skill for consistent UI generation
|
|
14
|
+
- **component-recipes/** - 36 pre-built component templates (button, card, modal, toast, etc.)
|
|
15
|
+
- **commands/** - `/setup-styling` and `/component-harness`
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
### Design Tokens
|
|
20
|
+
|
|
21
|
+
Run `/setup-styling` to configure your design system interactively. Generates `styling-config.json` with:
|
|
22
|
+
|
|
23
|
+
- Colors (primary, secondary, destructive, muted, etc.)
|
|
24
|
+
- Border radius
|
|
25
|
+
- Shadows
|
|
26
|
+
- Spacing
|
|
27
|
+
- Typography
|
|
28
|
+
|
|
29
|
+
### Component Recipes
|
|
30
|
+
|
|
31
|
+
36 component recipes organized by category:
|
|
32
|
+
|
|
33
|
+
- **Form** (10): button, input, textarea, select, combobox, checkbox, radio, switch, slider, label
|
|
34
|
+
- **Layout** (6): card, separator, collapsible, accordion, tabs, table
|
|
35
|
+
- **Navigation** (5): navigation-menu, breadcrumb, pagination, dropdown-menu, context-menu
|
|
36
|
+
- **Overlay** (6): modal, dialog, drawer, popover, hover-card, tooltip
|
|
37
|
+
- **Feedback** (5): alert, toast, progress, skeleton, spinner
|
|
38
|
+
- **Display** (4): badge, avatar, carousel, toggle-group
|
|
39
|
+
|
|
40
|
+
### Component Harness
|
|
41
|
+
|
|
42
|
+
Run `/component-harness` to scaffold a Vite + React development environment for visual component preview.
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
# Initialize
|
|
48
|
+
npx @fr0mpy/component-system
|
|
49
|
+
|
|
50
|
+
# With options
|
|
51
|
+
npx @fr0mpy/component-system --force # Overwrite existing
|
|
52
|
+
npx @fr0mpy/component-system --merge # Add to existing .claude
|
|
53
|
+
npx @fr0mpy/component-system --remove # Remove installation
|
|
54
|
+
|
|
55
|
+
# Selective updates
|
|
56
|
+
npx @fr0mpy/component-system --update-skills
|
|
57
|
+
npx @fr0mpy/component-system --update-recipes
|
|
58
|
+
npx @fr0mpy/component-system --update-commands
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Getting Started
|
|
62
|
+
|
|
63
|
+
1. Install: `npx @fr0mpy/component-system`
|
|
64
|
+
2. Configure: Use `/setup-styling` to set up your design tokens
|
|
65
|
+
3. Preview: Use `/component-harness` to launch visual preview
|
|
66
|
+
|
|
67
|
+
## Integration with Prompt System
|
|
68
|
+
|
|
69
|
+
For auto-triggering styling rules when you mention UI/styling keywords, also install:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npx @fr0mpy/prompt-system
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
When both packages are installed, the component system injects a `styling.json` trigger into the prompt system's `triggers.d/` directory.
|
|
76
|
+
|
|
77
|
+
## License
|
|
78
|
+
|
|
79
|
+
MIT
|