@decantr/cli 1.1.1 → 1.2.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/dist/bin.js +1 -2
- package/dist/chunk-2F6Q5S5W.js +5283 -0
- package/dist/{heal-4DWU7BJS.js → heal-ZG5VJZ5J.js} +0 -2
- package/dist/index.js +1 -2
- package/dist/{upgrade-3YL3NFOG.js → upgrade-ZSLT32KN.js} +0 -1
- package/package.json +1 -1
- package/src/bundled/blueprints/default.json +1 -1
- package/src/bundled/themes/default.json +10 -1
- package/src/templates/DECANTR.md.template +48 -476
- package/src/templates/essence-summary.md.template +2 -2
- package/src/templates/task-add-page.md.template +24 -19
- package/src/templates/task-modify.md.template +12 -9
- package/src/templates/task-scaffold.md.template +11 -8
- package/dist/chunk-3RG5ZIWI.js +0 -10
- package/dist/chunk-LXOY447U.js +0 -2422
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"name": "Decantr Default",
|
|
7
7
|
"description": "Minimal starter blueprint for offline scaffolding. Visit decantr.ai/registry for more options.",
|
|
8
8
|
"tags": ["starter", "minimal", "offline"],
|
|
9
|
-
"compose": [
|
|
9
|
+
"compose": [],
|
|
10
10
|
"theme": {
|
|
11
11
|
"style": "default",
|
|
12
12
|
"mode": "system",
|
|
@@ -44,5 +44,14 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"modes": ["light", "dark", "system"],
|
|
47
|
-
"shapes": ["rounded", "sharp", "pill"]
|
|
47
|
+
"shapes": ["rounded", "sharp", "pill"],
|
|
48
|
+
"typography_hints": {
|
|
49
|
+
"scale": "modular",
|
|
50
|
+
"heading_weight": 600,
|
|
51
|
+
"body_weight": 400
|
|
52
|
+
},
|
|
53
|
+
"motion_hints": {
|
|
54
|
+
"preference": "subtle",
|
|
55
|
+
"reduce_motion_default": true
|
|
56
|
+
}
|
|
48
57
|
}
|
|
@@ -6,65 +6,48 @@ This project uses **Decantr** for design intelligence. Read this file before gen
|
|
|
6
6
|
|
|
7
7
|
## What is Decantr?
|
|
8
8
|
|
|
9
|
-
Decantr is a design intelligence layer that sits between you (the AI code generator) and the code you produce. It provides
|
|
10
|
-
|
|
11
|
-
- **Structured schemas** — The `decantr.essence.json` file is the source of truth for this project's design
|
|
12
|
-
- **Reusable building blocks** — Patterns, archetypes, blueprints, and themes from the registry
|
|
13
|
-
- **Drift prevention** — Guard rules that validate your code against the spec
|
|
14
|
-
- **Design methodology** — The 7-stage Design Pipeline
|
|
9
|
+
Decantr is a design intelligence layer that sits between you (the AI code generator) and the code you produce. It provides structured schemas, guard rules, and a two-layer model (DNA + Blueprint) that ensures consistent, production-quality output.
|
|
15
10
|
|
|
16
11
|
**Decantr does NOT generate code.** You generate the code. Decantr ensures it remains coherent and consistent.
|
|
17
12
|
|
|
18
|
-
|
|
13
|
+
---
|
|
19
14
|
|
|
20
|
-
|
|
15
|
+
## Two-Layer Model
|
|
21
16
|
|
|
22
|
-
|
|
23
|
-
- New pages are added without declaring them in the structure
|
|
24
|
-
- Layout order is changed because "it looks better this way"
|
|
25
|
-
- Spacing values are tweaked ad-hoc instead of following the density profile
|
|
17
|
+
### DNA (Design Axioms)
|
|
26
18
|
|
|
27
|
-
|
|
19
|
+
DNA defines the foundational design rules. **DNA violations are errors** -- they must never happen without updating the essence first.
|
|
28
20
|
|
|
29
|
-
|
|
21
|
+
DNA axioms include: Theme (style, mode, recipe, shape), Spacing (density, content gap), Typography (scale, weights), Color (palette, accent count), Radius (philosophy, base), Elevation (system, levels), Motion (preference, reduce-motion), Accessibility (WCAG level, focus-visible), and Personality traits.
|
|
30
22
|
|
|
31
|
-
|
|
23
|
+
### Blueprint (Structural Layout)
|
|
32
24
|
|
|
33
|
-
|
|
25
|
+
Blueprint defines sections, pages, routes, features, and pattern layouts. **Blueprint deviations are warnings** -- they should be corrected but do not block generation.
|
|
34
26
|
|
|
35
|
-
|
|
36
|
-
|-------|------|--------------|
|
|
37
|
-
| 1 | **Intent** | User describes what they want to build |
|
|
38
|
-
| 2 | **Interpret** | Parse intent into structured form |
|
|
39
|
-
| 3 | **Decompose** | Split into theme, structure, features |
|
|
40
|
-
| 4 | **Specify** | Write `decantr.essence.json` |
|
|
41
|
-
| 5 | **Compose** | Resolve layouts from patterns and recipes |
|
|
42
|
-
| 6 | **Generate** | You generate code from the composition |
|
|
43
|
-
| 7 | **Guard** | Validate every change against the spec |
|
|
44
|
-
|
|
45
|
-
The essence file captures stages 1-5. Your code generation is stage 6. The guard rules enforce stage 7.
|
|
27
|
+
Blueprint includes: Sections (grouped by archetype with role, shell, and scoped features), Page definitions with layouts and pattern references, Routes (URL mapping), and Features (resolved from archetype union + blueprint overrides).
|
|
46
28
|
|
|
47
29
|
---
|
|
48
30
|
|
|
49
31
|
## Guard Rules
|
|
50
32
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
|
54
|
-
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
33
|
+
| # | Rule | Layer | What It Checks |
|
|
34
|
+
|---|------|-------|----------------|
|
|
35
|
+
| 1 | Style | DNA (error) | Code uses the theme specified in DNA |
|
|
36
|
+
| 2 | Recipe | DNA (error) | Decorations match the DNA recipe |
|
|
37
|
+
| 3 | Density | DNA (error) | Spacing follows the density profile |
|
|
38
|
+
| 4 | Accessibility | DNA (error) | Code meets the WCAG level |
|
|
39
|
+
| 5 | Theme-mode | DNA (error) | Theme/mode combination is valid |
|
|
40
|
+
| 6 | Structure | Blueprint (warn) | Pages exist in the blueprint sections |
|
|
41
|
+
| 7 | Layout | Blueprint (warn) | Pattern order matches the layout spec |
|
|
42
|
+
| 8 | Pattern existence | Blueprint (warn) | Patterns referenced exist in the registry |
|
|
60
43
|
|
|
61
44
|
### Enforcement Tiers
|
|
62
45
|
|
|
63
|
-
| Tier | When Used | Rules
|
|
64
|
-
|
|
65
|
-
| **Creative** | New project scaffolding |
|
|
66
|
-
| **Guided** | Adding pages or features |
|
|
67
|
-
| **Strict** | Modifying existing code |
|
|
46
|
+
| Tier | When Used | DNA Rules | Blueprint Rules |
|
|
47
|
+
|------|-----------|-----------|-----------------|
|
|
48
|
+
| **Creative** | New project scaffolding | Off | Off |
|
|
49
|
+
| **Guided** | Adding pages or features | Error | Off |
|
|
50
|
+
| **Strict** | Modifying existing code | Error | Warn |
|
|
68
51
|
|
|
69
52
|
This project uses **{{GUARD_MODE}}** mode.
|
|
70
53
|
|
|
@@ -73,461 +56,50 @@ This project uses **{{GUARD_MODE}}** mode.
|
|
|
73
56
|
When a user request would violate guard rules:
|
|
74
57
|
|
|
75
58
|
```
|
|
76
|
-
1. STOP
|
|
77
|
-
2. EXPLAIN
|
|
78
|
-
3. OFFER
|
|
79
|
-
4. WAIT
|
|
59
|
+
1. STOP -- Do not proceed with code that violates DNA rules
|
|
60
|
+
2. EXPLAIN -- Tell the user which rule would be violated and why
|
|
61
|
+
3. OFFER -- Suggest using decantr_update_essence to update the spec
|
|
62
|
+
4. WAIT -- Only proceed after the essence is updated
|
|
80
63
|
```
|
|
81
64
|
|
|
82
65
|
**Never make "just this once" exceptions.** If the user insists, update the essence first.
|
|
83
66
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
## This Project
|
|
87
|
-
|
|
88
|
-
{{PROJECT_SUMMARY}}
|
|
89
|
-
|
|
90
|
-
### Essence Overview
|
|
91
|
-
|
|
92
|
-
```json
|
|
93
|
-
{
|
|
94
|
-
"theme": "{{THEME_STYLE}}",
|
|
95
|
-
"mode": "{{THEME_MODE}}",
|
|
96
|
-
"guard": "{{GUARD_MODE}}",
|
|
97
|
-
"target": "{{TARGET}}"
|
|
98
|
-
}
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### Theme Quick Reference
|
|
102
|
-
|
|
103
|
-
{{THEME_QUICK_REFERENCE}}
|
|
104
|
-
|
|
105
|
-
**To fetch complete theme and recipe specs:**
|
|
106
|
-
```bash
|
|
107
|
-
npx @decantr/cli get theme {{THEME_STYLE}}
|
|
108
|
-
npx @decantr/cli get recipe {{THEME_RECIPE}}
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
{{ACCESSIBILITY_SECTION}}
|
|
112
|
-
|
|
113
|
-
{{SEO_SECTION}}
|
|
114
|
-
|
|
115
|
-
### Pages
|
|
116
|
-
|
|
117
|
-
{{PAGES_TABLE}}
|
|
67
|
+
### MCP Tools for Drift Management
|
|
118
68
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
69
|
+
- `decantr_check_drift` -- Check if planned changes violate rules
|
|
70
|
+
- `decantr_accept_drift` -- Accept a detected drift as intentional
|
|
71
|
+
- `decantr_update_essence` -- Update the essence spec to match desired changes
|
|
122
72
|
|
|
123
73
|
---
|
|
124
74
|
|
|
125
|
-
##
|
|
126
|
-
|
|
127
|
-
**Always check these before generating UI code:**
|
|
128
|
-
|
|
129
|
-
### Quick Commands
|
|
130
|
-
|
|
131
|
-
```bash
|
|
132
|
-
# Get full theme spec (colors, palette, modes)
|
|
133
|
-
npx @decantr/cli get theme {{THEME_STYLE}}
|
|
134
|
-
|
|
135
|
-
# Get recipe decorators and effects
|
|
136
|
-
npx @decantr/cli get recipe {{THEME_RECIPE}}
|
|
137
|
-
|
|
138
|
-
# Get pattern structure and presets
|
|
139
|
-
npx @decantr/cli get pattern <pattern-name>
|
|
140
|
-
|
|
141
|
-
# Search for patterns
|
|
142
|
-
npx @decantr/cli search <query>
|
|
143
|
-
```
|
|
75
|
+
## How To Use This Project
|
|
144
76
|
|
|
145
|
-
###
|
|
77
|
+
### Source of truth
|
|
146
78
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
1. `decantr_read_essence` — Load the current essence
|
|
150
|
-
2. `decantr_check_drift` — Verify your planned changes won't violate rules
|
|
151
|
-
3. `decantr_resolve_pattern` — Get pattern details before implementing
|
|
152
|
-
4. `decantr_suggest_patterns` — Find appropriate patterns for new sections
|
|
153
|
-
|
|
154
|
-
### Without MCP Tools or CLI
|
|
155
|
-
|
|
156
|
-
1. Read `decantr.essence.json` in the project root
|
|
157
|
-
2. Verify the page you're editing exists in `structure[]`
|
|
158
|
-
3. Check the page's `layout[]` for required pattern order
|
|
159
|
-
4. Follow the `theme.style` and `theme.recipe` specifications
|
|
160
|
-
5. Use spacing tokens from `density.content_gap`
|
|
161
|
-
|
|
162
|
-
### Checklist
|
|
163
|
-
|
|
164
|
-
Before writing any UI code:
|
|
165
|
-
|
|
166
|
-
- [ ] Is this page in the essence structure?
|
|
167
|
-
- [ ] Am I using the correct theme ({{THEME_STYLE}})?
|
|
168
|
-
- [ ] Am I following the correct mode ({{THEME_MODE}})?
|
|
169
|
-
- [ ] Does my pattern order match the layout spec?
|
|
170
|
-
- [ ] Am I using the correct spacing tokens?
|
|
171
|
-
|
|
172
|
-
If any answer is "no" — **STOP and ask the user to update the essence.**
|
|
173
|
-
|
|
174
|
-
---
|
|
79
|
+
`decantr.essence.json` is the structural spec. Tools and guards read this.
|
|
175
80
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
### Self-Check
|
|
179
|
-
|
|
180
|
-
After generating code, verify:
|
|
181
|
-
|
|
182
|
-
1. **Theme consistency** — All colors, typography, and effects match the theme
|
|
183
|
-
2. **Pattern structure** — Components follow the pattern's layout spec
|
|
184
|
-
3. **Spacing consistency** — Gap values use tokens, not arbitrary pixels
|
|
185
|
-
4. **Page declaration** — The page exists in the essence structure
|
|
186
|
-
|
|
187
|
-
### Drift Validation
|
|
188
|
-
|
|
189
|
-
Run validation to check for violations:
|
|
190
|
-
|
|
191
|
-
```bash
|
|
192
|
-
npx @decantr/cli validate
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
Or use the MCP tool:
|
|
196
|
-
|
|
197
|
-
```
|
|
198
|
-
decantr_check_drift(page_id="{{page}}", theme_used="{{theme}}")
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
---
|
|
202
|
-
|
|
203
|
-
## Pattern Quality Rules
|
|
204
|
-
|
|
205
|
-
When implementing patterns, follow these rules:
|
|
206
|
-
|
|
207
|
-
### 1. One Elevation
|
|
208
|
-
|
|
209
|
-
Each pattern section should have a single visual elevation level. Don't nest cards within cards or create competing visual hierarchies.
|
|
210
|
-
|
|
211
|
-
```
|
|
212
|
-
// Good: Single elevation
|
|
213
|
-
<section class="pattern-section">
|
|
214
|
-
<h2>Title</h2>
|
|
215
|
-
<div class="content">...</div>
|
|
216
|
-
</section>
|
|
217
|
-
|
|
218
|
-
// Bad: Nested elevations
|
|
219
|
-
<Card>
|
|
220
|
-
<Card>...</Card>
|
|
221
|
-
</Card>
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### 2. Containment Decision
|
|
225
|
-
|
|
226
|
-
Decide upfront whether a pattern is:
|
|
227
|
-
- **Contained** — Has visible boundaries (card, panel)
|
|
228
|
-
- **Inline** — Flows with content, no boundaries
|
|
229
|
-
|
|
230
|
-
Don't mix containment within a pattern.
|
|
231
|
-
|
|
232
|
-
### 3. Component Consistency
|
|
233
|
-
|
|
234
|
-
Use the same component variants throughout a pattern. If buttons are `primary` style in one place, they should be `primary` everywhere in that pattern.
|
|
235
|
-
|
|
236
|
-
---
|
|
237
|
-
|
|
238
|
-
## CSS Implementation
|
|
239
|
-
|
|
240
|
-
This project uses **@decantr/css** for layout atoms and the generated CSS files for theme tokens and recipe decorators.
|
|
241
|
-
|
|
242
|
-
### Setup
|
|
243
|
-
|
|
244
|
-
```javascript
|
|
245
|
-
// 1. Import the atoms runtime
|
|
246
|
-
import { css } from '@decantr/css';
|
|
247
|
-
|
|
248
|
-
// 2. Import generated CSS files (created by decantr init)
|
|
249
|
-
import './styles/tokens.css'; // Theme tokens (--d-primary, --d-surface, etc.)
|
|
250
|
-
import './styles/decorators.css'; // Recipe decorators ({{THEME_RECIPE}}-card, etc.)
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
### HTML Setup
|
|
254
|
-
|
|
255
|
-
Your `index.html` MUST have theme and mode attributes:
|
|
256
|
-
|
|
257
|
-
```html
|
|
258
|
-
<!DOCTYPE html>
|
|
259
|
-
<html lang="en" data-theme="{{THEME_STYLE}}" data-mode="{{THEME_MODE}}">
|
|
260
|
-
<head>
|
|
261
|
-
<meta name="color-scheme" content="{{THEME_MODE}}">
|
|
262
|
-
...
|
|
263
|
-
</head>
|
|
264
|
-
</html>
|
|
265
|
-
```
|
|
81
|
+
### Initial scaffolding
|
|
266
82
|
|
|
267
|
-
|
|
268
|
-
- `data-theme` enables theme switching via JS without reloading CSS
|
|
269
|
-
- `data-mode` enables light/dark toggle
|
|
270
|
-
- `color-scheme` tells the browser to style native controls (scrollbars, inputs) correctly
|
|
83
|
+
Read `.decantr/context/scaffold.md` for the full app overview, topology, and route map.
|
|
271
84
|
|
|
272
|
-
###
|
|
85
|
+
### Working on a section
|
|
273
86
|
|
|
274
|
-
|
|
87
|
+
Read `.decantr/context/section-{name}.md` for that section's complete context. Each section file contains guard rules, theme tokens, decorator classes, pattern specs with code examples, zone context, and routes. **Everything you need is in that one file.**
|
|
275
88
|
|
|
276
|
-
|
|
277
|
-
// Layout atoms
|
|
278
|
-
<div className={css('_flex _col _gap4 _p4')}>
|
|
279
|
-
<h1 className={css('_heading1')}>Title</h1>
|
|
280
|
-
<p className={css('_textsm _fgmuted')}>Description</p>
|
|
281
|
-
</div>
|
|
89
|
+
### Validation
|
|
282
90
|
|
|
283
|
-
|
|
284
|
-
<div className={css('_gc1 _sm:gc2 _lg:gc4')}>
|
|
285
|
-
{/* 1 col -> 2 cols at 640px -> 4 cols at 1024px */}
|
|
286
|
-
</div>
|
|
91
|
+
Run `decantr check` to validate code against the spec.
|
|
287
92
|
|
|
288
|
-
|
|
289
|
-
<button className={css('_bgprimary _h:bgprimary/80')}>
|
|
290
|
-
Hover me
|
|
291
|
-
</button>
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
### Common Atoms
|
|
295
|
-
|
|
296
|
-
| Category | Atoms | Description |
|
|
297
|
-
|----------|-------|-------------|
|
|
298
|
-
| Display | `_flex`, `_grid`, `_block`, `_none` | Display types |
|
|
299
|
-
| Flexbox | `_col`, `_row`, `_wrap`, `_flex1` | Flex direction/behavior |
|
|
300
|
-
| Alignment | `_aic`, `_jcc`, `_jcsb` | Align/justify content |
|
|
301
|
-
| Spacing | `_gap{n}`, `_p{n}`, `_m{n}`, `_px{n}` | Gap, padding, margin |
|
|
302
|
-
| Sizing | `_wfull`, `_hfull`, `_w{n}`, `_h{n}` | Width, height |
|
|
303
|
-
| Typography | `_textsm`, `_textlg`, `_heading1`-`_heading6` | Font sizes |
|
|
304
|
-
| Colors | `_bgprimary`, `_bgsurface`, `_fgmuted` | Background, foreground |
|
|
305
|
-
|
|
306
|
-
### CSS Architecture
|
|
307
|
-
|
|
308
|
-
The CSS is organized into two parts:
|
|
309
|
-
|
|
310
|
-
1. **Atoms (@decantr/css)** - Layout utilities injected at runtime into `@layer d.atoms`
|
|
311
|
-
2. **Generated CSS files** - Theme tokens and recipe decorators created during scaffold
|
|
312
|
-
|
|
313
|
-
```
|
|
314
|
-
src/styles/
|
|
315
|
-
tokens.css # :root { --d-primary: #...; --d-surface: #...; }
|
|
316
|
-
decorators.css # .{{THEME_RECIPE}}-card { ... }
|
|
317
|
-
```
|
|
318
|
-
|
|
319
|
-
### Variable Naming Convention
|
|
320
|
-
|
|
321
|
-
| Prefix | Purpose | Example |
|
|
322
|
-
|--------|---------|---------|
|
|
323
|
-
| `--d-` | Core Decantr tokens | `--d-primary`, `--d-bg` |
|
|
324
|
-
| `--d-gap-{n}` | Spacing tokens | `--d-gap-4`, `--d-gap-8` |
|
|
325
|
-
| `--d-radius` | Border radius | `--d-radius`, `--d-radius-lg` |
|
|
326
|
-
|
|
327
|
-
### Theme Switching (JavaScript)
|
|
328
|
-
|
|
329
|
-
```javascript
|
|
330
|
-
// Switch theme
|
|
331
|
-
document.documentElement.dataset.theme = 'newTheme';
|
|
332
|
-
|
|
333
|
-
// Switch mode
|
|
334
|
-
document.documentElement.dataset.mode = 'light';
|
|
335
|
-
document.querySelector('meta[name="color-scheme"]').content = 'light';
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
### Get Full Theme/Recipe Specs
|
|
93
|
+
### Quick Commands
|
|
339
94
|
|
|
340
95
|
```bash
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
## Spatial Guidelines
|
|
348
|
-
|
|
349
|
-
### Personality to Density Mapping
|
|
350
|
-
|
|
351
|
-
| Personality | Suggested Density | Content Gap |
|
|
352
|
-
|-------------|-------------------|-------------|
|
|
353
|
-
| professional | comfortable | `_gap4` |
|
|
354
|
-
| playful | spacious | `_gap6` |
|
|
355
|
-
| premium | spacious | `_gap8` |
|
|
356
|
-
| minimal | compact | `_gap2` |
|
|
357
|
-
| bold | comfortable | `_gap4` |
|
|
358
|
-
|
|
359
|
-
This project uses: **{{PERSONALITY}}** personality with **{{DENSITY}}** density.
|
|
360
|
-
|
|
361
|
-
### The 50% Rule
|
|
362
|
-
|
|
363
|
-
Pattern content should occupy roughly 50% of its container width on desktop. This creates breathing room and prevents wall-of-text layouts.
|
|
364
|
-
|
|
365
|
-
### Spacing Tokens
|
|
366
|
-
|
|
367
|
-
Use these tokens instead of arbitrary pixel values:
|
|
368
|
-
|
|
369
|
-
| Token | Value | Use Case |
|
|
370
|
-
|-------|-------|----------|
|
|
371
|
-
| `_gap1` | 4px | Tight spacing within components |
|
|
372
|
-
| `_gap2` | 8px | Compact layouts |
|
|
373
|
-
| `_gap3` | 12px | Default inline spacing |
|
|
374
|
-
| `_gap4` | 16px | Comfortable content gap |
|
|
375
|
-
| `_gap6` | 24px | Section spacing |
|
|
376
|
-
| `_gap8` | 32px | Major section breaks |
|
|
377
|
-
| `_gap12` | 48px | Page section spacing |
|
|
378
|
-
|
|
379
|
-
---
|
|
380
|
-
|
|
381
|
-
## Shells (Page Layouts)
|
|
382
|
-
|
|
383
|
-
A shell is the page-level layout container. This project uses **{{DEFAULT_SHELL}}** as the default shell.
|
|
384
|
-
|
|
385
|
-
### Available Shells
|
|
386
|
-
|
|
387
|
-
| Shell | Description | Use Case |
|
|
388
|
-
|-------|-------------|----------|
|
|
389
|
-
| `sidebar-main` | Collapsible sidebar + main content | Dashboards, admin panels |
|
|
390
|
-
| `top-nav-main` | Horizontal nav + full-width content | Marketing, content sites |
|
|
391
|
-
| `centered` | Centered card on background | Auth flows, focused tasks |
|
|
392
|
-
| `full-bleed` | No persistent nav, scroll-driven | Landing pages, portfolios |
|
|
393
|
-
| `minimal-header` | Slim header + centered content | Checkout, wizards |
|
|
394
|
-
| `sidebar-aside` | Three columns (nav + main + aside) | IDE-style, email clients |
|
|
395
|
-
|
|
396
|
-
### Shell Structure
|
|
397
|
-
|
|
398
|
-
```
|
|
399
|
-
{{SHELL_STRUCTURE}}
|
|
96
|
+
decantr status # Project health
|
|
97
|
+
decantr check # Detect drift violations
|
|
98
|
+
decantr get pattern X # Fetch a pattern spec from registry
|
|
99
|
+
decantr get recipe X # Fetch recipe decorators
|
|
100
|
+
decantr search <query> # Search the registry
|
|
400
101
|
```
|
|
401
102
|
|
|
402
103
|
---
|
|
403
104
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
For detailed instructions based on what you're doing, see:
|
|
407
|
-
|
|
408
|
-
| Task | Context File |
|
|
409
|
-
|------|--------------|
|
|
410
|
-
| Scaffolding new pages | `.decantr/context/task-scaffold.md` |
|
|
411
|
-
| Adding pages/features | `.decantr/context/task-add-page.md` |
|
|
412
|
-
| Modifying existing code | `.decantr/context/task-modify.md` |
|
|
413
|
-
|
|
414
|
-
These files contain tier-specific rules and checklists.
|
|
415
|
-
|
|
416
|
-
---
|
|
417
|
-
|
|
418
|
-
## Quick Reference
|
|
419
|
-
|
|
420
|
-
### Essence Schema (Simplified)
|
|
421
|
-
|
|
422
|
-
```json
|
|
423
|
-
{
|
|
424
|
-
"version": "2.0.0",
|
|
425
|
-
"theme": {
|
|
426
|
-
"style": "theme-id",
|
|
427
|
-
"mode": "dark | light | auto",
|
|
428
|
-
"recipe": "recipe-id",
|
|
429
|
-
"shape": "pill | rounded | sharp"
|
|
430
|
-
},
|
|
431
|
-
"personality": ["trait1", "trait2"],
|
|
432
|
-
"structure": [
|
|
433
|
-
{
|
|
434
|
-
"id": "page-id",
|
|
435
|
-
"shell": "shell-id",
|
|
436
|
-
"layout": ["pattern-1", "pattern-2"]
|
|
437
|
-
}
|
|
438
|
-
],
|
|
439
|
-
"features": ["auth", "search"],
|
|
440
|
-
"guard": {
|
|
441
|
-
"enforce_style": true,
|
|
442
|
-
"enforce_recipe": true,
|
|
443
|
-
"mode": "strict | guided | creative"
|
|
444
|
-
},
|
|
445
|
-
"density": {
|
|
446
|
-
"level": "compact | comfortable | spacious",
|
|
447
|
-
"content_gap": "_gap4"
|
|
448
|
-
},
|
|
449
|
-
"target": "react | vue | svelte | html"
|
|
450
|
-
}
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
### Common Violations
|
|
454
|
-
|
|
455
|
-
| Violation | Fix |
|
|
456
|
-
|-----------|-----|
|
|
457
|
-
| "Page not in structure" | Add page to `structure[]` in essence |
|
|
458
|
-
| "Theme mismatch" | Use the theme from `theme.style` |
|
|
459
|
-
| "Pattern order wrong" | Reorder to match `layout[]` |
|
|
460
|
-
| "Unknown recipe" | Use recipe from `theme.recipe` |
|
|
461
|
-
| "Spacing inconsistent" | Use tokens from `density.content_gap` |
|
|
462
|
-
|
|
463
|
-
### Troubleshooting
|
|
464
|
-
|
|
465
|
-
**"I need to add a new page"**
|
|
466
|
-
1. Update `structure[]` in essence with the new page
|
|
467
|
-
2. Specify the shell and layout patterns
|
|
468
|
-
3. Then generate the code
|
|
469
|
-
|
|
470
|
-
**"I want to change the theme"**
|
|
471
|
-
1. Update `theme.style` in essence
|
|
472
|
-
2. Update `theme.recipe` if needed
|
|
473
|
-
3. Regenerate affected components
|
|
474
|
-
|
|
475
|
-
**"The guard is blocking me"**
|
|
476
|
-
1. Check which rule is being violated
|
|
477
|
-
2. Update the essence to reflect the desired change
|
|
478
|
-
3. Then proceed with code generation
|
|
479
|
-
|
|
480
|
-
**"I don't know which pattern to use"**
|
|
481
|
-
1. Use `decantr_suggest_patterns` with a description
|
|
482
|
-
2. Or check the patterns in `.decantr/cache/patterns/`
|
|
483
|
-
3. Or search the registry with `npx @decantr/cli search <query>`
|
|
484
|
-
|
|
485
|
-
---
|
|
486
|
-
|
|
487
|
-
## Registry Content
|
|
488
|
-
|
|
489
|
-
This project has access to the following content:
|
|
490
|
-
|
|
491
|
-
### Patterns
|
|
492
|
-
{{AVAILABLE_PATTERNS}}
|
|
493
|
-
|
|
494
|
-
### Themes
|
|
495
|
-
{{AVAILABLE_THEMES}}
|
|
496
|
-
|
|
497
|
-
### Shells
|
|
498
|
-
{{AVAILABLE_SHELLS}}
|
|
499
|
-
|
|
500
|
-
---
|
|
501
|
-
|
|
502
|
-
## Updating the Essence
|
|
503
|
-
|
|
504
|
-
When the user wants to change the design spec:
|
|
505
|
-
|
|
506
|
-
1. Read the current `decantr.essence.json`
|
|
507
|
-
2. Make the requested changes
|
|
508
|
-
3. Validate with `npx @decantr/cli validate`
|
|
509
|
-
4. Write the updated file
|
|
510
|
-
5. Regenerate `DECANTR.md` if structure changed significantly
|
|
511
|
-
|
|
512
|
-
Or use the MCP tool:
|
|
513
|
-
|
|
514
|
-
```
|
|
515
|
-
decantr_update_essence(operation="add_page", payload={...})
|
|
516
|
-
```
|
|
517
|
-
|
|
518
|
-
---
|
|
519
|
-
|
|
520
|
-
## Summary
|
|
521
|
-
|
|
522
|
-
1. **Read the essence** before generating code
|
|
523
|
-
2. **Check guard rules** before proceeding
|
|
524
|
-
3. **Never violate** — update the essence instead
|
|
525
|
-
4. **Use patterns** from the layout spec
|
|
526
|
-
5. **Follow the theme** exactly
|
|
527
|
-
6. **Validate after** generating code
|
|
528
|
-
|
|
529
|
-
The essence is the source of truth. When in doubt, consult it.
|
|
530
|
-
|
|
531
|
-
---
|
|
532
|
-
|
|
533
|
-
*Generated by Decantr CLI v{{VERSION}}*
|
|
105
|
+
{{CSS_APPROACH}}
|
|
@@ -35,8 +35,8 @@ Auto-generated summary of `decantr.essence.json`.
|
|
|
35
35
|
| Property | Value |
|
|
36
36
|
|----------|-------|
|
|
37
37
|
| Mode | {{GUARD_MODE}} |
|
|
38
|
-
|
|
|
39
|
-
|
|
|
38
|
+
| DNA Enforcement | {{DNA_ENFORCEMENT}} |
|
|
39
|
+
| Blueprint Enforcement | {{BLUEPRINT_ENFORCEMENT}} |
|
|
40
40
|
|
|
41
41
|
## Density
|
|
42
42
|
|