@orkestrel/scaffold 0.0.18 → 0.0.20
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/host/AGENTS.md +4 -2
- package/dist/host/CLAUDE.md +30 -12
- package/dist/host/agents/skills/enterprise-bootstrap/SKILL.md +267 -0
- package/dist/host/agents/skills/enterprise-bootstrap/agents/openai.yaml +4 -0
- package/dist/host/agents/skills/enterprise-bootstrap/references/bootstrap-reference.md +609 -0
- package/dist/host/agents/skills/enterprise-bootstrap/references/components.md +994 -0
- package/dist/host/agents/skills/enterprise-bootstrap/references/frontend-design.md +59 -0
- package/dist/host/agents/skills/enterprise-bootstrap/references/utilities.md +312 -0
- package/dist/host/agents/skills/orkestrel-align-packages/references/integration.md +4 -13
- package/dist/host/agents/skills/orkestrel-build-application/SKILL.md +78 -50
- package/dist/host/agents/skills/orkestrel-debrief/SKILL.md +91 -0
- package/dist/host/agents/skills/orkestrel-debrief/agents/openai.yaml +4 -0
- package/dist/host/agents/skills/orkestrel-debrief/references/field-testing.md +75 -0
- package/dist/host/agents/skills/orkestrel-debrief/references/instruction-audit.md +70 -0
- package/dist/host/agents/skills/orkestrel-harden-package/SKILL.md +11 -9
- package/dist/host/agents/skills/orkestrel-harden-package/references/centralization.md +44 -59
- package/dist/host/agents/skills/orkestrel-harden-package/references/hardening.md +14 -6
- package/dist/host/agents/skills/orkestrel-polish-surface/SKILL.md +113 -0
- package/dist/host/agents/skills/orkestrel-polish-surface/agents/openai.yaml +4 -0
- package/dist/host/agents/skills/orkestrel-polish-surface/references/capture-harness.md +82 -0
- package/dist/host/claude/agents/application.md +21 -17
- package/dist/host/claude/agents/builder.md +2 -0
- package/dist/host/claude/agents/codex.md +33 -26
- package/dist/host/claude/agents/grok.md +7 -0
- package/dist/host/claude/agents/implementer.md +2 -1
- package/dist/host/claude/agents/orkestrel.md +20 -15
- package/dist/host/claude/agents/planner.md +2 -1
- package/dist/host/claude/agents/researcher.md +31 -0
- package/dist/host/claude/agents/reviewer.md +6 -0
- package/dist/host/claude/agents/scout.md +25 -0
- package/dist/host/claude/rules/documentation.md +1 -0
- package/dist/host/claude/rules/names.md +5 -7
- package/dist/host/claude/rules/quality.md +7 -5
- package/dist/host/claude/rules/styles.md +1 -0
- package/dist/host/claude/rules/tests.md +1 -0
- package/dist/host/claude/rules/typescript.md +3 -10
- package/dist/host/claude/rules/workspace.md +2 -5
- package/dist/host/claude/skills/enterprise-bootstrap/SKILL.md +12 -0
- package/dist/host/claude/skills/orkestrel-debrief/SKILL.md +12 -0
- package/dist/host/claude/skills/orkestrel-polish-surface/SKILL.md +12 -0
- package/dist/host/codex/agents/analyst.toml +6 -3
- package/dist/host/codex/agents/application.toml +17 -19
- package/dist/host/codex/agents/builder.toml +3 -2
- package/dist/host/codex/agents/checker.toml +4 -2
- package/dist/host/codex/agents/grok.toml +3 -1
- package/dist/host/codex/agents/implementer.toml +4 -2
- package/dist/host/codex/agents/opus.toml +5 -3
- package/dist/host/codex/agents/orkestrel.toml +6 -5
- package/dist/host/codex/agents/planner.toml +6 -2
- package/dist/host/codex/agents/researcher.toml +22 -0
- package/dist/host/codex/agents/reviewer.toml +7 -2
- package/dist/host/codex/agents/scout.toml +18 -0
- package/dist/host/codex/config.toml +16 -4
- package/dist/host/dotfiles/prettierignore +3 -0
- package/dist/host/guides/src/scaffold.md +42 -12
- package/dist/host/manifest.json +109 -3
- package/dist/src/core/index.cjs +162 -14
- package/dist/src/core/index.cjs.map +1 -1
- package/dist/src/core/index.d.cts +17 -6
- package/dist/src/core/index.d.ts +17 -6
- package/dist/src/core/index.js +162 -15
- package/dist/src/core/index.js.map +1 -1
- package/dist/src/server/index.cjs +9 -3
- package/dist/src/server/index.cjs.map +1 -1
- package/dist/src/server/index.d.cts +2 -1
- package/dist/src/server/index.d.ts +2 -1
- package/dist/src/server/index.js +10 -4
- package/dist/src/server/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/host/agents/skills/orkestrel-build-application/references/application.md +0 -129
package/dist/host/AGENTS.md
CHANGED
|
@@ -83,6 +83,8 @@ configs/ thin target wrappers around root Vite/TypeScript configuration
|
|
|
83
83
|
|
|
84
84
|
If the user changes a type mid-task, treat it as immediately authoritative. Type failures identify implementation that has not caught up.
|
|
85
85
|
|
|
86
|
+
A defect fix inserts a failing proof before its implementation: record the exact command and its failing count, implement, then record the same command green. A test that never ran red does not bind to the defect it claims.
|
|
87
|
+
|
|
86
88
|
For comprehensive hardening, research, centralization, contract adoption, real-service integration, or cross-package alignment, follow the applicable repository skill. No current-scope requirement may end as a TODO, skipped test, deferred row, or hidden follow-up.
|
|
87
89
|
|
|
88
90
|
## Work process
|
|
@@ -96,10 +98,10 @@ For comprehensive hardening, research, centralization, contract adoption, real-s
|
|
|
96
98
|
7. **Document:** update the guide, examples, and parity contract.
|
|
97
99
|
8. **Verify:** audit discovery/deferrals/package contents as applicable, run the required gates, and read their actual output before claiming success.
|
|
98
100
|
|
|
99
|
-
Quality gates before commit, in order:
|
|
101
|
+
Quality gates before commit, in order (the acceptance gate is the non-mutating variant; run the mutating `format`/`lint` first only to converge, then prove with the checks):
|
|
100
102
|
|
|
101
103
|
```text
|
|
102
|
-
npm run format → npm run lint → npm run check → npm run build → npm test
|
|
104
|
+
npm run format:check → npm run lint:check → npm run check → npm run build → npm test
|
|
103
105
|
```
|
|
104
106
|
|
|
105
107
|
- Use scoped checks/tests during development; do not run the whole suite casually.
|
package/dist/host/CLAUDE.md
CHANGED
|
@@ -37,9 +37,12 @@ One workflow runs across both providers. Each engine has one job, and no engine
|
|
|
37
37
|
- **After implementation Opus 5 and Sol audit independently** — Opus on design fit, Sol on
|
|
38
38
|
correctness and constraint satisfaction — and the orchestrator reconciles their evidence
|
|
39
39
|
into one verdict.
|
|
40
|
-
- **Lower-cost native agents (Sonnet, Terra) do fully specified
|
|
41
|
-
evidence only.** A specified rename,
|
|
42
|
-
run
|
|
40
|
+
- **Lower-cost native agents (Sonnet, Terra) do fully specified units and read-only
|
|
41
|
+
evidence only.** A specified rename, an app-layer expansion, a conformance checklist, a
|
|
42
|
+
gate run, a bounded primary-source question, a reconnaissance sweep. They never
|
|
43
|
+
substitute for Grok, Opus 5, or Sol: `researcher` and `scout` are the native evidence
|
|
44
|
+
lanes for bounded questions and the fallback when the Grok bench is dark, never the
|
|
45
|
+
route for repository-scale absorption or judgment.
|
|
43
46
|
|
|
44
47
|
The orchestrator reconciles; no external engine reconciles itself or accepts its own work.
|
|
45
48
|
In Claude Code the orchestrator is the top-level Fable session. When Codex is primary, the
|
|
@@ -69,6 +72,8 @@ dispatch, even when the role file pins it.
|
|
|
69
72
|
| Nontrivial implementation (subjective) | `implementer` | `implementer` route `opus` | Opus 5 (native / bridge) |
|
|
70
73
|
| Fully specified mechanical unit | `builder` | `builder` | Sonnet / Terra |
|
|
71
74
|
| Fully specified app-layer unit | `application` | `application` | Sonnet / Terra |
|
|
75
|
+
| Bounded primary-source research | `researcher` | `researcher` | Sonnet / Terra |
|
|
76
|
+
| Repository reconnaissance | `scout` | `scout` | Sonnet / Terra |
|
|
72
77
|
| Mechanical conformance evidence | `checker` | `checker` | Sonnet / Terra |
|
|
73
78
|
| Gate evidence | `verifier` | `verifier` | Sonnet / Terra |
|
|
74
79
|
| Ecosystem evidence | `orkestrel` | `orkestrel` | Sonnet / Terra |
|
|
@@ -83,7 +88,7 @@ dispatch, even when the role file pins it.
|
|
|
83
88
|
otherwise its Orchestrator duties are unchanged.
|
|
84
89
|
- Opus roles use high effort; Sonnet and Terra roles use low or medium; bridge drivers use the
|
|
85
90
|
cheapest tier that can run a CLI.
|
|
86
|
-
- Role files pin engine, effort, tools, permissions,
|
|
91
|
+
- Role files pin engine, effort, tools, permissions, and charter. Claude Code
|
|
87
92
|
hot-reloads edits to existing role files.
|
|
88
93
|
|
|
89
94
|
## Permission and safety floor
|
|
@@ -150,16 +155,18 @@ absorbed.
|
|
|
150
155
|
AND engine. A unit whose work class belongs to a bench (reading-heavy → Grok; objective
|
|
151
156
|
audit or objective implementation → Sol) that is routed to a Claude-native agent without a
|
|
152
157
|
recorded bench-dark deviation is a dispatch deviation.
|
|
153
|
-
3. **Implement.** Route each nontrivial unit to `implementer`
|
|
154
|
-
writer
|
|
155
|
-
specified, taste-free unit to `builder
|
|
156
|
-
engine the unit's judgment load exceeds.
|
|
158
|
+
3. **Implement.** Route each nontrivial objective unit to the Sol `implementer` and each
|
|
159
|
+
nontrivial subjective unit to the Opus `implementer` — main checkout, one sole writer at a
|
|
160
|
+
time. Route a fully specified, taste-free unit to `builder`. Never route implementation to
|
|
161
|
+
an engine the unit's judgment load exceeds.
|
|
157
162
|
4. **Integrate.** Evaluate each distillate against its acceptance criteria; apply shared-file
|
|
158
163
|
patches serially; route cross-cutting findings.
|
|
159
164
|
5. **Audit adversarially.** Every nontrivial implementation gets `reviewer` (Opus 5, design
|
|
160
165
|
fit) and `analyst` (Sol, correctness and constraints) independently, plus `checker` for
|
|
161
|
-
mechanical conformance.
|
|
162
|
-
|
|
166
|
+
mechanical conformance. In a fix round the unit's auditor is an engine that did not write
|
|
167
|
+
it. Multi-round audits use one fixed verdict shape with a single terminal line, defined by
|
|
168
|
+
the campaign skill. Reconcile their evidence; a finding neither engine can substantiate
|
|
169
|
+
against the evidence is dropped on the record.
|
|
163
170
|
6. **Verify.** One independent `verifier` runs the authoritative gates.
|
|
164
171
|
7. **Accept.** The Orchestrator decides and reports concise outcomes, decisions, evidence, and
|
|
165
172
|
remaining risk.
|
|
@@ -202,7 +209,11 @@ Every dispatch contains:
|
|
|
202
209
|
- **Deviation contract** — required stop/report behaviour for writers.
|
|
203
210
|
- **Acceptance criteria** — independently checkable completion conditions.
|
|
204
211
|
- **Review evidence** — for `reviewer` and `checker`, the actual diff and status output;
|
|
205
|
-
omitting either is a dispatch deviation.
|
|
212
|
+
omitting either is a dispatch deviation. For any claim about a rendered or externally
|
|
213
|
+
driven surface, the capture portfolio is the review input and source is corroboration.
|
|
214
|
+
|
|
215
|
+
After reconciling findings into briefs, walk the retained finding list once: every finding
|
|
216
|
+
names the brief item that carries it. A finding with no carrier is a dropped finding.
|
|
206
217
|
|
|
207
218
|
## Bench mechanics
|
|
208
219
|
|
|
@@ -241,7 +252,11 @@ under a hard time cap, never detached from inside a bridge agent: the harness ow
|
|
|
241
252
|
lifecycle, completion re-invokes the session, and the cap kills a wedged bench loudly instead
|
|
242
253
|
of trusting the bridge to report its own failure. A wedged bridge is silent, and silence must
|
|
243
254
|
never read as progress. A stalled journal or a cap-killed exec follows the deviation ladder,
|
|
244
|
-
with the session id from the journal head as the recovery handle.
|
|
255
|
+
with the session id from the journal head as the recovery handle. Size the cap from the
|
|
256
|
+
observed high mark of comparable units plus an independently budgeted gate allowance plus
|
|
257
|
+
explicit slack, never from the estimate alone. The first use of any CLI flag, subcommand,
|
|
258
|
+
quoting form, or stdin combination happens in a throwaway probe, never inside a dispatched
|
|
259
|
+
unit.
|
|
245
260
|
|
|
246
261
|
### Cursor Grok
|
|
247
262
|
|
|
@@ -372,4 +387,7 @@ CODEX_IMPLEMENTER_EFFORT=high
|
|
|
372
387
|
before both have returned.
|
|
373
388
|
- Do not accept unreviewed implementation, unverified hypotheses, shared-tree writing races,
|
|
374
389
|
implicit engines, fixed Claude IDs, or verbose completed-work residue.
|
|
390
|
+
- A claim about a rendered or externally driven surface is evidenced by its capture or a real
|
|
391
|
+
foreign client driving it, never by source alone; where no such surface exists this law is
|
|
392
|
+
inert.
|
|
375
393
|
- Final acceptance belongs only to the Orchestrator, after independent audit and gate evidence.
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: enterprise-bootstrap
|
|
3
|
+
description: >-
|
|
4
|
+
Design and build distinctive, production-grade user interfaces with Bootstrap
|
|
5
|
+
5.3 and intentional frontend craft. Use for ANY UI work — creating, restyling,
|
|
6
|
+
reviewing, or extending pages, screens, components, layouts, app shells,
|
|
7
|
+
dashboards, admin panels, SaaS tools, data tables, filter bars, forms,
|
|
8
|
+
wizards, navigation, modals, empty/loading/error states, dark mode, marketing
|
|
9
|
+
surfaces — whenever the task touches HTML/CSS/visual design, mentions
|
|
10
|
+
Bootstrap or its components, or must look professional and avoid templated
|
|
11
|
+
defaults. Covers aesthetics, typography, color modes, design tokens,
|
|
12
|
+
accessibility (WCAG 2.2 AA), responsive layout, and enterprise app patterns.
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Enterprise Bootstrap
|
|
16
|
+
|
|
17
|
+
General-purpose guide for **intentional visual design** executed with **Bootstrap 5.3**: distinctive where it matters, disciplined everywhere else, utilities-first, accessible, and responsive.
|
|
18
|
+
|
|
19
|
+
This package is layered on purpose:
|
|
20
|
+
|
|
21
|
+
| Layer | File | Holds |
|
|
22
|
+
| -------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
|
23
|
+
| Operate | `SKILL.md` (this file) | Process, decision rules, checklists, portability |
|
|
24
|
+
| Design craft | [frontend-design.md](references/frontend-design.md) | Full aesthetic, typography, signature, copy, anti-defaults |
|
|
25
|
+
| Components | [components.md](references/components.md) | Bootstrap component markup + enterprise selection notes |
|
|
26
|
+
| Utilities | [utilities.md](references/utilities.md) | Class index, helpers, composition notes |
|
|
27
|
+
| Bootstrap deep | [bootstrap-reference.md](references/bootstrap-reference.md) | Color modes, theming/tokens, forms, JS lifecycle, a11y depth, enterprise patterns |
|
|
28
|
+
|
|
29
|
+
Open the relevant reference instead of guessing class names or watering down the craft — the class indexes exist because invented utilities (`.vw-50`, `.pointer-events-none`) ship silent no-ops.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## Portability (any project / tool / environment)
|
|
34
|
+
|
|
35
|
+
Product-agnostic. Apply the same way wherever this package is loaded.
|
|
36
|
+
|
|
37
|
+
1. **No repo assumptions.** Do not assume Vue, React, a skin library, a folder layout, or a named product. Infer stack from the workspace.
|
|
38
|
+
2. **Bootstrap contract.** Target Bootstrap **5.3.x** class names and behaviors. Compatible skins that keep `.btn`, `.card`, `.form-control`, `data-bs-*`, etc. are fine — obey the same contracts.
|
|
39
|
+
3. **Project rules win on code law.** If the repo defines conventions (`AGENTS.md`, lint rules, a design system), follow those for languages, layout, and forbidden patterns. This package owns **UI craft + Bootstrap usage**, not language law.
|
|
40
|
+
4. **Framework-neutral markup.** Prefer semantic HTML + Bootstrap classes. Wire behavior with whatever the project already uses; in SPAs prefer the framework-native Bootstrap wrappers over raw `bootstrap.*` JS (see [bootstrap-reference.md](references/bootstrap-reference.md) → JavaScript lifecycle).
|
|
41
|
+
5. **Distribution.** Keep this folder intact so relative links between files resolve. Install or vendor it wherever your tooling looks for skills/guides — paths are tooling-specific; the content is not.
|
|
42
|
+
6. **CDN or bundler.** Either is fine — see [bootstrap-reference.md](references/bootstrap-reference.md) Quick Start (5.3.8) for CDN; prefer the project's existing Bootstrap package when present.
|
|
43
|
+
7. **When to apply.** Use on UI, Bootstrap, or visual-design work matching the description above. When the user attaches or points at this package, treat it as authoritative for the visual pass.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Dual mandate
|
|
48
|
+
|
|
49
|
+
1. **Design lead** — point of view rooted in the _subject_ (audience, job-to-be-done, vernacular). One justified aesthetic risk; boldness in one place. Full text: [frontend-design.md](references/frontend-design.md).
|
|
50
|
+
2. **Bootstrap engineer** — components + utilities first; custom CSS only when the system cannot express the need; paint via `--bs-*` so light/dark survive.
|
|
51
|
+
|
|
52
|
+
**Context match:** a marketing page may open with a thesis-hero; an authenticated tool opens with clarity and scan paths. Same craft, different density — in product UI the signature lives in the chrome, never in the data ([frontend-design.md](references/frontend-design.md) → Where the signature lives).
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Process
|
|
57
|
+
|
|
58
|
+
Detail and wording live in [frontend-design.md](references/frontend-design.md). Condensed loop:
|
|
59
|
+
|
|
60
|
+
1. **Ground** — subject, audience, screen's single job (state it). Use known user preferences and prior designs as hints, not templates.
|
|
61
|
+
2. **Plan** — token system: **color** (4–6 named values), **type** (display / body / utility), **layout** (prose + ASCII if useful), **signature** (one memorable element).
|
|
62
|
+
3. **Critique the plan** — if swapping the logo would make it "any SaaS," revise. Avoid clustered AI defaults unless the brief asks: cream+#F4F1EA+serif+terracotta; near-black+acid green/vermilion; broadsheet hairlines / zero radius / dense columns. Brief wins when it pins a direction.
|
|
63
|
+
4. **Build** — Bootstrap from components/utilities; map plan tokens onto theme variables or a thin skin — no scattered one-off hex (token discipline: [bootstrap-reference.md](references/bootstrap-reference.md) → Theming & design tokens). Watch selector specificity (utility vs custom canceling).
|
|
64
|
+
5. **Critique again** — remove one accessory (Chanel). Contrast, focus, `prefers-reduced-motion`, mobile, all five states present. Critique the render, not the markup.
|
|
65
|
+
|
|
66
|
+
Brainstorm privately; show higher-confidence directions.
|
|
67
|
+
|
|
68
|
+
**Rendered proof.** A claim about a screen is settled by what the browser paints, never by the markup that was supposed to paint it — source-reading review passes a component that renders nothing. The review input is captures at both viewports and both themes plus an accessibility snapshot; source only corroborates the mechanism. For the full review-round campaign built on that evidence, use the `orkestrel-polish-surface` skill instead of improvising one here.
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Design principles
|
|
73
|
+
|
|
74
|
+
- **Subject first** — distinctive choices from the product's world, not a generic kit.
|
|
75
|
+
- **Hero / thesis when it fits** — open with the most characteristic thing. Big-number+gradient-stat blocks are the template answer — use only if truly best.
|
|
76
|
+
- **Signature + restraint** — one memorable element; quiet discipline around it.
|
|
77
|
+
- **Structure is information** — eyebrows, `01/02/03`, dividers only when order/taxonomy is real.
|
|
78
|
+
- **Typography carries personality** — deliberate pairing and scale; characterful display, restrained.
|
|
79
|
+
- **Motion with purpose** — Bootstrap transitions first; one orchestrated moment if earned; less motion often beats "AI sparkle."
|
|
80
|
+
- **Match complexity to vision** — maximalist = elaborate execution; minimal = precision.
|
|
81
|
+
- **Copy is design** — see Writing below and frontend-design.
|
|
82
|
+
|
|
83
|
+
### Writing (interface copy)
|
|
84
|
+
|
|
85
|
+
- Name what the user controls, not internals ("Notifications," not "Webhook config").
|
|
86
|
+
- Active voice; controls say what happens ("Save changes," not "Submit").
|
|
87
|
+
- Same verb across button → toast → confirm ("Publish" / "Published").
|
|
88
|
+
- Errors: what failed + how to fix; no vague apologies.
|
|
89
|
+
- Empty states: invite the next action.
|
|
90
|
+
- Plain verbs, sentence case, no filler; one job per element (label vs example).
|
|
91
|
+
- Where the surrounding context already names the object, the visible label is one word and the full phrase rides in `aria-label` — the button reads "Stop", the accessible name says what it stops.
|
|
92
|
+
- One glyph means one thing across the whole surface: a check that means "finished" here must not mean "selected" there.
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## Bootstrap operating principles
|
|
97
|
+
|
|
98
|
+
1. **Mobile first** — smallest screen first, then `sm` / `md` / `lg` / `xl` / `xxl`
|
|
99
|
+
2. **Semantic HTML** — `nav`, `main`, `section`, heading order
|
|
100
|
+
3. **Combine utilities** — spacing/flex/display before custom CSS
|
|
101
|
+
4. **Don't override** — utilities/components before bespoke styles; extend via component `--bs-*` variables or the utilities API, not high-specificity rules
|
|
102
|
+
5. **Test responsiveness** — every breakpoint you claim
|
|
103
|
+
6. **Verify against the shipped cascade** — resolve every treatment in the CSS actually loaded (Bootstrap plus every skin and dependency stylesheet the page pulls in), never against docs memory. A class with no rule of its own may still inherit one, and a token pair that passes in stock Bootstrap can fail under a compatible skin. Measure, don't assume — including the `*-subtle` / `*-emphasis` recipes, once per theme.
|
|
104
|
+
|
|
105
|
+
### Hierarchy & actions
|
|
106
|
+
|
|
107
|
+
| Intent | Typical choice |
|
|
108
|
+
| ----------- | -------------------------------------------------------- |
|
|
109
|
+
| Primary | `btn btn-primary` — **one** clear primary per region |
|
|
110
|
+
| Secondary | `btn-outline-*` matching the surface |
|
|
111
|
+
| Destructive | `btn-danger` + the confirmation ladder below |
|
|
112
|
+
| Tertiary | `btn-link` or text links |
|
|
113
|
+
| Status | `badge` / `alert` / `*-emphasis` — **never color alone** |
|
|
114
|
+
|
|
115
|
+
A status mark with **no text** is an icon glyph, never a `badge`: stock Bootstrap ships `.badge:empty { display: none }`, so an empty badge used as a dot never renders at all ([components.md](references/components.md) → Badge).
|
|
116
|
+
|
|
117
|
+
### Surfaces, color, contrast
|
|
118
|
+
|
|
119
|
+
- **Contrast bars, measured in both themes:** **≥ 4.5:1** for anything information-bearing — `small`, captions, and meta text included — and **≥ 3:1** for textless marks, state indicators, and the hover/focus chrome that carries state. Verify even Bootstrap's own palette; the docs admit some defaults fall short.
|
|
120
|
+
- `text-body-tertiary` fails the AA bar for information-bearing small text — tier such text `text-body-secondary` or better, and keep tertiary for genuinely decorative marks.
|
|
121
|
+
- Disabled controls are exempt from the bars, but a disabled **destructive** control must not keep full danger saturation — at full strength it still reads as armed. Neutralize the variant while it is disabled and carry the reason on the control with `aria-describedby` (plus `title` for pointer users), never `title` alone.
|
|
122
|
+
- Prefer `bg-body`, `bg-body-secondary`, `bg-body-tertiary` over raw `bg-white`/`bg-light` — they track `data-bs-theme`.
|
|
123
|
+
- Pairings: `text-bg-*`, `*-subtle`, `*-emphasis`, `text-body` / `text-body-secondary`. (`text-muted` is deprecated — use `text-body-secondary`.)
|
|
124
|
+
- On **dark surfaces**, scope `data-bs-theme="dark"` rather than reaching for the deprecated `*-dark` component variants; gray-on-dark outlines often fail contrast.
|
|
125
|
+
- Support `data-bs-theme="light"` and `dark` when the product offers both — drive custom paint from `var(--bs-…)`. Mechanics: [bootstrap-reference.md](references/bootstrap-reference.md) → Color modes.
|
|
126
|
+
|
|
127
|
+
### Density, layout, responsive
|
|
128
|
+
|
|
129
|
+
- Enterprise density: `table-sm`, `btn-sm` / `btn-group-sm`, compact toolbars — but keep every interactive target **≥ 24×24px** (WCAG 2.2); pad hit areas rather than shrinking them.
|
|
130
|
+
- Offer density (comfortable/compact) as a user toggle driven by one token, not ad-hoc `-sm` sprinkling.
|
|
131
|
+
- Cards earn their keep: `.card` when grouping helps; otherwise spacing + type.
|
|
132
|
+
- Prefer `gap-*` on parents over margin spam on every child.
|
|
133
|
+
- Wide data: ranked responsive strategies (priority columns → horizontal scroll → card-ify) in [bootstrap-reference.md](references/bootstrap-reference.md) → Dense data tables.
|
|
134
|
+
- Toolbars: `btn-toolbar` + `overflow-auto` — don't crush icons below target size.
|
|
135
|
+
- Below `sm`, collapse captioned buttons to their icons (accessible names retained) **before** the brand or page title starts truncating — identity survives, chrome shrinks.
|
|
136
|
+
- App frame: sidebar via responsive `offcanvas-{bp}` (inline desktop, drawer mobile) — full pattern in [bootstrap-reference.md](references/bootstrap-reference.md) → App shell.
|
|
137
|
+
- Print: chrome `d-print-none`; keep the data printable.
|
|
138
|
+
|
|
139
|
+
### States & feedback (decision rules)
|
|
140
|
+
|
|
141
|
+
- **Every data surface ships five states:** ideal, empty, loading, partial, error. Not done until all five exist.
|
|
142
|
+
- **Loading:** skeleton (`placeholder`) when the layout is known — it holds the frame; spinner for short or in-control waits (inside the button). Under ~1s show nothing; past ~10s show determinate progress.
|
|
143
|
+
- **Empty:** no-data-yet invites the first action; no-results-for-filters offers "Clear filters." Never one generic "nothing here."
|
|
144
|
+
- **Errors:** what failed + how to fix + a keyboard-reachable retry, in place — never a toast, never a wiped layout.
|
|
145
|
+
- **Channel rule:** toast = transient success; inline alert = contextual; banner = persistent page-level condition; modal = blocking decision. Full matrix: [bootstrap-reference.md](references/bootstrap-reference.md) → Feedback discipline.
|
|
146
|
+
- **Destructive ladder:** undo > confirm dialog (verb-labeled buttons, consequence restated) > type-to-confirm (only high blast radius). Prefer undoable over interrupting.
|
|
147
|
+
|
|
148
|
+
### Views & navigation
|
|
149
|
+
|
|
150
|
+
- In-page view switching → real **tabs** (`nav-tabs` / `nav-pills` / `nav-underline` + tab panes / equivalent state), not scroll-only hash links dressed as tabs.
|
|
151
|
+
- Active items: `aria-current="page"` or `aria-selected`. Exactly **one** `aria-current` per selection — per nav, per list, per table; two is no selection at all.
|
|
152
|
+
- A mark laid on a selected/active fill must survive it: a `text-bg-*`-family mark on a `.active` fill of the same color is overridden and vanishes, while `text-body-emphasis` keeps reading. Same trap for `btn-check` filter labels ([components.md](references/components.md) → Selection fills).
|
|
153
|
+
- Icon-only controls: `aria-label` (and `title` when helpful).
|
|
154
|
+
- Breadcrumbs only for real hierarchy; command palette only on top of visible nav.
|
|
155
|
+
|
|
156
|
+
### Forms (decision rules)
|
|
157
|
+
|
|
158
|
+
- Visible labels (top-aligned by default) or `.form-floating` — never placeholder-only.
|
|
159
|
+
- Validate on **blur**, re-validate error fields on input, everything on submit; keep submit **enabled**.
|
|
160
|
+
- Long forms pair a focusable error summary with inline `.invalid-feedback` per field (`aria-describedby`, `aria-invalid`).
|
|
161
|
+
- Bootstrap's client-side validation styles aren't exposed to assistive tech — accessible flows use the server-side classes or native validation. Mechanics + canonical JS: [bootstrap-reference.md](references/bootstrap-reference.md) → Forms in production.
|
|
162
|
+
- Units/money: `.input-group` + `.input-group-text` (+ `.has-validation` when feedback present).
|
|
163
|
+
- Multi-step: per-step validation, back without loss, never re-ask collected data.
|
|
164
|
+
|
|
165
|
+
### Component cheat sheet
|
|
166
|
+
|
|
167
|
+
| Problem | Start with |
|
|
168
|
+
| ------------------- | ------------------------------------------------------------------------- |
|
|
169
|
+
| App frame | `navbar` + responsive `offcanvas-{bp}` sidebar + `container-fluid` |
|
|
170
|
+
| Page sections | spaced headings or `card` |
|
|
171
|
+
| Actions | `btn`, `btn-group`, `btn-toolbar`, `d-grid gap-2` |
|
|
172
|
+
| In-page views | `nav-tabs` / `nav-pills` / `nav-underline` + panes |
|
|
173
|
+
| Data | `table` + `table-responsive` (+ patterns in the deep reference) |
|
|
174
|
+
| Filters / secondary | `offcanvas`, `dropdown`, `collapse` |
|
|
175
|
+
| Long help | `accordion` and/or scrollable `modal` |
|
|
176
|
+
| Forms | `form-control`, `form-select`, `form-floating`, `input-group`, validation |
|
|
177
|
+
| Feedback | `alert`, `toast`, `badge`, `progress`, `spinner`, `placeholder` |
|
|
178
|
+
| Steps / schemas | `list-group` / `list-group-numbered` |
|
|
179
|
+
| Value pickers | `form-select` / native inputs — never a dropdown posing as an input |
|
|
180
|
+
|
|
181
|
+
Markup: [components.md](references/components.md). Fine layout: [utilities.md](references/utilities.md).
|
|
182
|
+
|
|
183
|
+
### When custom CSS is justified
|
|
184
|
+
|
|
185
|
+
Only if Bootstrap cannot express the need — and check the extension points first: component `--bs-{component}-*` variables for restyling, the utilities API for missing utility steps ([bootstrap-reference.md](references/bootstrap-reference.md) → Theming). Then:
|
|
186
|
+
|
|
187
|
+
- Name in Bootstrap vocabulary
|
|
188
|
+
- Colors from `var(--bs-…)` / theme tokens so light and dark both work
|
|
189
|
+
- Logical properties (`margin-inline-start`, not `margin-left`) so RTL works
|
|
190
|
+
- Minimal surface area; document why
|
|
191
|
+
|
|
192
|
+
Avoid fighting utilities with high-specificity custom rules (common padding/margin cancel bugs).
|
|
193
|
+
|
|
194
|
+
### Anti-patterns
|
|
195
|
+
|
|
196
|
+
- Templated "AI" looks when the brief left the axis free (see frontend-design)
|
|
197
|
+
- Purple-gradient / glow / emoji / pill-soup decoration without subject reason
|
|
198
|
+
- Faux widgets that break focus and theme behavior — a `div` pretending to be a select, grid, or tab
|
|
199
|
+
- Hand-rolling combobox/datepicker/data-grid when native or an accessible library exists ([bootstrap-reference.md](references/bootstrap-reference.md) → When not to hand-roll)
|
|
200
|
+
- Scroll anchors posing as tabs
|
|
201
|
+
- Color-only status
|
|
202
|
+
- An empty `.badge` used as a dot — `.badge:empty { display: none }` means it never rendered
|
|
203
|
+
- Assuming an unfilled `.badge` is transparent — compatible skins may give it a default background; a muted badge states its fill (`bg-*-subtle`, `bg-transparent`)
|
|
204
|
+
- A colored mark dropped onto a selected/active fill of the same family — the fill wins and the mark disappears
|
|
205
|
+
- Disabled destructive controls left at full danger saturation
|
|
206
|
+
- Treatments accepted from docs memory instead of the compiled cascade
|
|
207
|
+
- Layout-shifting conditional chrome (bulk bars or alerts that shove the toolbar — swap in place)
|
|
208
|
+
- Nested bordered divs instead of real `card` structure
|
|
209
|
+
- Hard-coded hex that ignores `data-bs-theme`
|
|
210
|
+
- Deprecated dark variants (`navbar-dark`, `dropdown-menu-dark`, `btn-close-white`, `carousel-dark`, `text-muted`) in new code
|
|
211
|
+
- Inventing utility classes not in [utilities.md](references/utilities.md) — they fail silently
|
|
212
|
+
- Disabling submit as a validation strategy; blocking paste in password/OTP fields
|
|
213
|
+
- Errors delivered as toasts or hover tooltips
|
|
214
|
+
- One infinite stack of pastel cards for documentation (prefer accordion/sections)
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
## Accessibility baseline
|
|
219
|
+
|
|
220
|
+
- Skip link to main; landmarks; `h1` → `h2` order
|
|
221
|
+
- `aria-label` on icon-only controls; targets ≥ 24×24px
|
|
222
|
+
- `aria-current` / `aria-selected` on active nav/tabs — exactly one `aria-current` per selection
|
|
223
|
+
- `aria-expanded` / `aria-controls` for disclosure
|
|
224
|
+
- `aria-describedby` for help and errors; `aria-invalid` on failed fields
|
|
225
|
+
- Live regions match the message: an async status mark is `role="status"`; an alert-styled notice is `role="alert"`
|
|
226
|
+
- A form whose host already names the request associates with that name (`aria-labelledby`) instead of repeating the prompt as its own label
|
|
227
|
+
- Visible focus (keep Bootstrap rings; `.focus-ring` helper for custom elements — never `outline: none`)
|
|
228
|
+
- Focus not obscured by sticky chrome (`scroll-margin-top`); focus moved deliberately on SPA route change, failed submit, and row delete
|
|
229
|
+
- Meaning not by color alone; contrast verified
|
|
230
|
+
- Drag interactions have a non-drag alternative
|
|
231
|
+
- Modals: `aria-labelledby`; let Bootstrap trap/restore focus; dispose instances in SPAs on unmount
|
|
232
|
+
|
|
233
|
+
WCAG 2.2 deltas, APG pattern contracts, reduced motion, and SPA focus recipes: [bootstrap-reference.md](references/bootstrap-reference.md) → Accessibility.
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
## Production checklist
|
|
238
|
+
|
|
239
|
+
```
|
|
240
|
+
Progress:
|
|
241
|
+
- [ ] Portability: followed project code law; no wrong-stack assumptions
|
|
242
|
+
- [ ] Subject, audience, single job stated
|
|
243
|
+
- [ ] Design plan: palette, type, layout, one signature (critiqued vs AI defaults)
|
|
244
|
+
- [ ] Bootstrap shell from components.md; utilities from utilities.md (no invented classes)
|
|
245
|
+
- [ ] Plan tokens mapped to theme / --bs-* (no hex scatter); light/dark if both ship
|
|
246
|
+
- [ ] Copy: user language, consistent verbs, useful empty/error/loading
|
|
247
|
+
- [ ] Five states per data surface: ideal / empty / loading / partial / error
|
|
248
|
+
- [ ] Contrast measured in both themes: ≥ 4.5:1 information-bearing (small included), ≥ 3:1 marks and state chrome; meaning not color-alone
|
|
249
|
+
- [ ] Every treatment resolved in the shipped cascade, not from docs memory
|
|
250
|
+
- [ ] Keyboard: focus visible, not obscured, targets ≥ 24px, icon labels
|
|
251
|
+
- [ ] Reduced motion respected; drag has non-drag alternative
|
|
252
|
+
- [ ] Forms: labels visible, blur validation, error summary + inline, submit enabled
|
|
253
|
+
- [ ] Responsive spot-check (claimed breakpoints); RTL-safe (start/end only)
|
|
254
|
+
- [ ] States: hover/focus/disabled/invalid/active
|
|
255
|
+
- [ ] SPA hygiene: JS instances disposed on unmount (or framework wrappers used)
|
|
256
|
+
- [ ] Remove one unnecessary accessory
|
|
257
|
+
- [ ] Rendered proof: captures at both viewports and both themes + an accessibility snapshot
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
---
|
|
261
|
+
|
|
262
|
+
## Key takeaways
|
|
263
|
+
|
|
264
|
+
- **Layered package** — craft and Bootstrap recipes live in the reference files; this file is the decision loop.
|
|
265
|
+
- **Distinctive** = subject + one signature + restraint — in product UI, signature in the chrome, discipline in the data.
|
|
266
|
+
- **Bootstrap** = reliable shipping across breakpoints, themes, and writing directions — extend through its variables and APIs, not against them.
|
|
267
|
+
- **Done** = design critique **and** production states **and** the accessibility bar — each proven by what rendered, in any environment.
|