@adia-ai/adia-ui-factory 0.2.2 → 0.2.4
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/.claude-plugin/plugin.json +12 -3
- package/.mcp.json +1 -1
- package/CHANGELOG.md +12 -0
- package/README.md +24 -1
- package/bin/adia-scaffold +93 -13
- package/package.json +1 -1
- package/references/shell-embed.md +10 -0
- package/references/spa-architecture.md +7 -0
- package/skills/adia-ui-kit/CHANGELOG.md +41 -0
- package/skills/adia-ui-kit/SKILL.md +442 -0
- package/skills/adia-ui-kit/assets/figma-make/guidelines/Guidelines.md +87 -0
- package/skills/adia-ui-kit/assets/figma-make/guidelines/components.md +142 -0
- package/skills/adia-ui-kit/assets/figma-make/guidelines/styles.md +118 -0
- package/skills/adia-ui-kit/assets/figma-make/guidelines/tokens.md +120 -0
- package/skills/adia-ui-kit/assets/team-scaffold/archive-README.md +30 -0
- package/skills/adia-ui-kit/assets/team-scaffold/drafts-README.md +57 -0
- package/skills/adia-ui-kit/assets/team-scaffold/inbox-README.md +76 -0
- package/skills/adia-ui-kit/assets/team-scaffold/outbox-README.md +46 -0
- package/skills/adia-ui-kit/assets/team-scaffold/team-root.README.md +51 -0
- package/skills/adia-ui-kit/assets/team-scaffold/tickets-README.md +208 -0
- package/skills/adia-ui-kit/assets/team-scaffold/tickets-REGISTRY.md +81 -0
- package/skills/adia-ui-kit/assets/templates/AGENTS.template.md +128 -0
- package/skills/adia-ui-kit/assets/templates/CLAUDE.template.md +1 -0
- package/skills/adia-ui-kit/assets/templates/FEEDBACK-OMISSIONS-DEFENSE.template.md +150 -0
- package/skills/adia-ui-kit/assets/templates/FEEDBACK.template.md +213 -0
- package/skills/adia-ui-kit/assets/templates/RESPONSE.template.md +114 -0
- package/skills/adia-ui-kit/assets/templates/figma-make-guidelines.md +90 -0
- package/skills/adia-ui-kit/evals/adversarial-content-trust.json +83 -0
- package/skills/adia-ui-kit/evals/evals.json +55 -0
- package/skills/adia-ui-kit/evals/routing-corpus.json +121 -0
- package/skills/adia-ui-kit/evals/teach-routing-cases.json +92 -0
- package/skills/adia-ui-kit/references/capabilities.md +245 -0
- package/skills/adia-ui-kit/references/catalog-lookup.md +186 -0
- package/skills/adia-ui-kit/references/changelog-archive/CHANGELOG-v1.md +8 -0
- package/skills/adia-ui-kit/references/changelog-archive/CHANGELOG-v2.md +3585 -0
- package/skills/adia-ui-kit/references/changelog-archive/CHANGELOG-v3.md +1899 -0
- package/skills/adia-ui-kit/references/common-gotchas-consumer.md +522 -0
- package/skills/adia-ui-kit/references/component-literacy.md +291 -0
- package/skills/adia-ui-kit/references/composition.md +245 -0
- package/skills/adia-ui-kit/references/correction-loop.md +462 -0
- package/skills/adia-ui-kit/references/css-policy.md +343 -0
- package/skills/adia-ui-kit/references/decision-model.md +158 -0
- package/skills/adia-ui-kit/references/diagnostic-output.md +57 -0
- package/skills/adia-ui-kit/references/docs-catalog.md +239 -0
- package/skills/adia-ui-kit/references/exclusions.md +225 -0
- package/skills/adia-ui-kit/references/feedback-authoring.md +466 -0
- package/skills/adia-ui-kit/references/figma-make.md +244 -0
- package/skills/adia-ui-kit/references/flows-auth.md +307 -0
- package/skills/adia-ui-kit/references/flows-content.md +206 -0
- package/skills/adia-ui-kit/references/flows-data.md +348 -0
- package/skills/adia-ui-kit/references/flows-interaction.md +181 -0
- package/skills/adia-ui-kit/references/flows-shells.md +336 -0
- package/skills/adia-ui-kit/references/gap-detection.md +266 -0
- package/skills/adia-ui-kit/references/harness.md +284 -0
- package/skills/adia-ui-kit/references/loading-protocol.md +406 -0
- package/skills/adia-ui-kit/references/local-link.md +198 -0
- package/skills/adia-ui-kit/references/mcp.md +401 -0
- package/skills/adia-ui-kit/references/migration.md +116 -0
- package/skills/adia-ui-kit/references/mission.md +194 -0
- package/skills/adia-ui-kit/references/mode-routing.md +298 -0
- package/skills/adia-ui-kit/references/patterns-agent.md +223 -0
- package/skills/adia-ui-kit/references/patterns-data.md +1065 -0
- package/skills/adia-ui-kit/references/patterns-forms.md +223 -0
- package/skills/adia-ui-kit/references/patterns-layout.md +326 -0
- package/skills/adia-ui-kit/references/patterns-recipes.md +1416 -0
- package/skills/adia-ui-kit/references/patterns-shells.md +1097 -0
- package/skills/adia-ui-kit/references/patterns-traits.md +259 -0
- package/skills/adia-ui-kit/references/patterns-wiring.md +339 -0
- package/skills/adia-ui-kit/references/pev-rationale.md +137 -0
- package/skills/adia-ui-kit/references/reasoning-gate.md +146 -0
- package/skills/adia-ui-kit/references/reasoning-methodologies.md +112 -0
- package/skills/adia-ui-kit/references/recon.md +192 -0
- package/skills/adia-ui-kit/references/rendering-model.md +431 -0
- package/skills/adia-ui-kit/references/response-authoring.md +398 -0
- package/skills/adia-ui-kit/references/session-log-schema.md +203 -0
- package/skills/adia-ui-kit/references/session-log-template.md +118 -0
- package/skills/adia-ui-kit/references/setup.md +652 -0
- package/skills/adia-ui-kit/references/skill-hygiene.md +135 -0
- package/skills/adia-ui-kit/references/spec-to-ui-reasoning.md +394 -0
- package/skills/adia-ui-kit/references/state.md +229 -0
- package/skills/adia-ui-kit/references/teach-protocol.md +421 -0
- package/skills/adia-ui-kit/references/theme.md +142 -0
- package/skills/adia-ui-kit/references/version-check.md +69 -0
- package/skills/adia-ui-kit/scripts/audit-decision-trace.mjs +198 -0
- package/skills/adia-ui-kit/scripts/audit-kit-roster.mjs +366 -0
- package/skills/adia-ui-kit/scripts/changelog-archive.mjs +126 -0
- package/skills/adia-ui-kit/scripts/check-adia-versions.py +404 -0
- package/skills/adia-ui-kit/scripts/run-skill-evals.mjs +358 -0
- package/skills/adia-ui-kit/scripts/validate-session-log.mjs +242 -0
- package/skills/adia-ui-kit/skill.json +102 -0
- package/skills/adia-ui-migration/CHANGELOG.md +47 -0
- package/skills/adia-ui-migration/SKILL.md +381 -0
- package/skills/adia-ui-migration/skill.json +29 -0
- package/skills/adia-ui-spa/SKILL.md +1 -1
- package/skills/adia-ui-verify/SKILL.md +2 -2
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: pev-rationale
|
|
3
|
+
load-when: When you need the source citation + ecosystem-level rationale behind §Plan-Execute-Verify
|
|
4
|
+
load-size-tokens: ~600
|
|
5
|
+
required-for: [authoring §PEV revisions, defending the loop in a §Teach handoff, training a new skill on PEV]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Plan-Execute-Verify — rationale + source citation
|
|
9
|
+
|
|
10
|
+
The Plan-Execute-Verify (PEV) loop is the load-bearing closure on
|
|
11
|
+
every senior-skill invocation in the AdiaUI skill ecosystem. This file
|
|
12
|
+
captures the rationale + source citation so the skill is self-contained
|
|
13
|
+
— consumer repos don't need to reach back to the substrate's
|
|
14
|
+
`BORIS-feedback.md` or `VISION-extensibility.md` to understand why
|
|
15
|
+
PEV is the discipline.
|
|
16
|
+
|
|
17
|
+
## The principle
|
|
18
|
+
|
|
19
|
+
> "Give Claude a way to verify its work. If Claude has that feedback
|
|
20
|
+
> loop, it will 2-3x the quality."
|
|
21
|
+
>
|
|
22
|
+
> — Boris Cherny, Anthropic, 2026-05-22 (the most-cited Boris principle
|
|
23
|
+
> in the AdiaUI senior-skill ecosystem)
|
|
24
|
+
|
|
25
|
+
The principle is structural, not stylistic. A skill that *generates*
|
|
26
|
+
without *verifying* is a skill that produces plausible-looking work
|
|
27
|
+
products which may or may not be correct. Adding a verify step
|
|
28
|
+
shifts the skill's output from "looks like X" to "behaves like X" —
|
|
29
|
+
a strictly stronger guarantee, and one that the rest of the
|
|
30
|
+
authoring discipline (PR review, ticket QA, FEEDBACK pipeline)
|
|
31
|
+
relies on.
|
|
32
|
+
|
|
33
|
+
## What the loop is
|
|
34
|
+
|
|
35
|
+
**Plan** — name the verify-target up front. If you cannot name how
|
|
36
|
+
you will know you succeeded, you do not have a plan, you have a vibe.
|
|
37
|
+
The verify target must be **mechanically checkable** — a rendered
|
|
38
|
+
DOM you can snapshot, a command exit-code you can assert, an audit
|
|
39
|
+
output you can grep, an eval score you can compare against a floor.
|
|
40
|
+
|
|
41
|
+
**Execute** — do the work. The middle is the part most people
|
|
42
|
+
recognize as "the task."
|
|
43
|
+
|
|
44
|
+
**Verify** — run the output against the real product or substrate.
|
|
45
|
+
NOT against the skill's own self-checks. The skill might pass its
|
|
46
|
+
internal P1–P5 binding-points and still produce wrong output.
|
|
47
|
+
The verify step closes that gap.
|
|
48
|
+
|
|
49
|
+
## What §SelfAudit checks vs what verify checks
|
|
50
|
+
|
|
51
|
+
There are two distinct audit surfaces in the skill ecosystem, and
|
|
52
|
+
they answer different questions:
|
|
53
|
+
|
|
54
|
+
| Surface | What it checks | Where it lives |
|
|
55
|
+
|---|---|---|
|
|
56
|
+
| **§SelfAudit** (mechanical roster, `audit-kit-roster.mjs`) | Does the SKILL.md itself satisfy structural invariants? Are the H2 sections present? Is the cold-start band coherent? Is the §PEV binding in place (P1–P5)? | Substrate-level audit; runs in CI on the skill repo |
|
|
57
|
+
| **Verify** (the loop closure for a task) | Did the OUTPUT this skill just produced actually behave as intended? Does the composed UI render? Did the eval pass the floor? Did the migration land cleanly in a consumer repo? | Per-task; runs against the artifact the skill produced |
|
|
58
|
+
|
|
59
|
+
**Both are required.** §SelfAudit catches drift in the skill's own
|
|
60
|
+
shape (sections missing, frontmatter wrong, citation broken). Verify
|
|
61
|
+
catches drift in the work the skill produces (a generated UI that
|
|
62
|
+
looks right but routes wrong; a migration sweep that landed but
|
|
63
|
+
broke a downstream test).
|
|
64
|
+
|
|
65
|
+
A skill that only does §SelfAudit is a skill that grades its own
|
|
66
|
+
homework. A skill that only does verify is a skill with no
|
|
67
|
+
structural integrity. Both gates fire on every invocation.
|
|
68
|
+
|
|
69
|
+
## Why the loop is "load-bearing"
|
|
70
|
+
|
|
71
|
+
The loop is load-bearing because:
|
|
72
|
+
|
|
73
|
+
1. **It is the only thing that closes the gap between intent and outcome.**
|
|
74
|
+
Without verify, the agent's output is "I think I did the thing"
|
|
75
|
+
— a confidence claim from an LLM, not evidence.
|
|
76
|
+
2. **It is what makes the skill trustable downstream.** A consumer
|
|
77
|
+
agent that invokes adia-ui-kit and gets back markup with no
|
|
78
|
+
verify result has no basis to ship that markup. A consumer agent
|
|
79
|
+
that gets back markup PLUS a "verified by rendering against the
|
|
80
|
+
playground" handle can ship with confidence.
|
|
81
|
+
3. **It is the mechanism that converts "happy-path eval pass"
|
|
82
|
+
into actual user-facing quality.** Boris's 2-3x quality claim is
|
|
83
|
+
not about the agent being smarter — it is about the agent being
|
|
84
|
+
forced to check its own work against a real signal.
|
|
85
|
+
|
|
86
|
+
## Concrete verify-targets per skill mode
|
|
87
|
+
|
|
88
|
+
For adia-ui-kit specifically, the verify-target is mode-dependent:
|
|
89
|
+
|
|
90
|
+
- **Modes 1–4 (composition)** — render the composed surface in a
|
|
91
|
+
real demo / playground / Playwright snapshot; compare against the
|
|
92
|
+
intent or the source mock.
|
|
93
|
+
- **Mode 5 (recon / consultant)** — produce a diagnostic report
|
|
94
|
+
with verifiable findings (path + line + actual content quoted);
|
|
95
|
+
rerun the audit after any fix to confirm 0 findings.
|
|
96
|
+
- **Mode 6 (feedback authoring)** — verify the ticket lands the
|
|
97
|
+
5-block structure + the omissions-defense scan completes with
|
|
98
|
+
no open accidents.
|
|
99
|
+
- **Mode 14 (correction loop)** — verify the root cause is at the
|
|
100
|
+
correct layer (skill / codebase / substrate / spec); rerun the
|
|
101
|
+
failing case after the fix.
|
|
102
|
+
|
|
103
|
+
The verify-target table in the cold-start band names these
|
|
104
|
+
explicitly per mode.
|
|
105
|
+
|
|
106
|
+
## Anti-patterns
|
|
107
|
+
|
|
108
|
+
- **"Verify by self-checking the agent's own output"** — circular.
|
|
109
|
+
The agent is the writer; it cannot be the verifier of its own
|
|
110
|
+
pattern-matching.
|
|
111
|
+
- **"Mechanical when available, manual when not"** — degraded
|
|
112
|
+
verify is not the same as verify. If the mechanical surface is
|
|
113
|
+
unavailable, name what's missing as a P1 finding and proceed
|
|
114
|
+
with the degraded surface only after explicit user acknowledgment.
|
|
115
|
+
- **"Skip verify if the change is small"** — small changes have
|
|
116
|
+
small verify costs. Skipping verify is what produces the
|
|
117
|
+
silent-regression class that the FEEDBACK pipeline catches
|
|
118
|
+
hours/days later.
|
|
119
|
+
|
|
120
|
+
## Source
|
|
121
|
+
|
|
122
|
+
Boris's principle was articulated in his 2026-05-22 conversation
|
|
123
|
+
about Claude's coding behavior. The principle is short ("give
|
|
124
|
+
Claude a way to verify its work") but its structural implications
|
|
125
|
+
are large (every skill ecosystem needs a verify step; every
|
|
126
|
+
verify step needs a mechanically-checkable target). The AdiaUI
|
|
127
|
+
senior-skill ecosystem encodes this as:
|
|
128
|
+
|
|
129
|
+
- §PEV H2 in the cold-start band of every senior SKILL.md (P1)
|
|
130
|
+
- A verify-target table naming the per-mode target (P2)
|
|
131
|
+
- A §Teach cross-reference linking new knowledge back to PEV (P3)
|
|
132
|
+
- PEV mentioned in the cold-start band (P4)
|
|
133
|
+
- The skill.json description claiming a verify capability (P5)
|
|
134
|
+
|
|
135
|
+
These 5 binding-points are mechanically checked by
|
|
136
|
+
`scripts/skills/check-pev.mjs`. If they all pass, the skill is
|
|
137
|
+
PEV-bound; if any fails, the skill cannot ship.
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: reasoning-gate
|
|
3
|
+
load-when: Before any component output — the mandatory pre-generation reasoning gate. Covers the GenUI Plan template, the user-intent verification step, and the decomposition discipline
|
|
4
|
+
load-size-tokens: ~1,900
|
|
5
|
+
required-for:
|
|
6
|
+
- composition modes 1-4 cold-start
|
|
7
|
+
- any output the user has not pre-confirmed
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# §0 — Reasoning Gate (mandatory before any component output)
|
|
11
|
+
|
|
12
|
+
Based on `ref-gen-ui-systems` and the Generative UI Reasoning Ladder.
|
|
13
|
+
|
|
14
|
+
### Why the gate exists
|
|
15
|
+
|
|
16
|
+
LLMs naturally jump from "Build a CRM" to emitting `<card-ui>` or A2UI
|
|
17
|
+
JSON. The result is visually plausible UI that is operationally wrong —
|
|
18
|
+
missing task traces, unbound components, no decision support. The ladder
|
|
19
|
+
forces the reasoning that produces correct UI.
|
|
20
|
+
|
|
21
|
+
**A UI is a decision surface over a domain. Components and layouts are
|
|
22
|
+
the output of correct reasoning — never the starting point.**
|
|
23
|
+
|
|
24
|
+
> ⚠️ **And that reasoning includes a CATALOG SEARCH.** Once you've
|
|
25
|
+
> derived "what component fits this decision rung?", your next step is
|
|
26
|
+
> NOT to author a novel tag. Your next step is to **search
|
|
27
|
+
> `packages/web-components/components/` + `packages/web-modules/`**
|
|
28
|
+
> by keyword + intent, and confirm the catalog doesn't already cover
|
|
29
|
+
> it. The 122 primitives + 5 module clusters absorb the vast majority
|
|
30
|
+
> of real UI problems by design. See §1 (Catalog Lookup) for the
|
|
31
|
+
> prior-art-first rule and search procedure. If the catalog truly
|
|
32
|
+
> doesn't cover the case, file a FEEDBACK ticket (see §Team Tickets)
|
|
33
|
+
> instead of inventing a one-off — substrate gaps are signal, and
|
|
34
|
+
> v0.6.18's FB-10 (`text-ui` overlay attrs) is a real example of the
|
|
35
|
+
> catalog catching up to natural consumer intent.
|
|
36
|
+
|
|
37
|
+
### The 19-rung ladder (condensed)
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
0. InputContext — what's given; what's known, inferred, missing
|
|
41
|
+
1. Intent — why the UI exists
|
|
42
|
+
2. Domain — entities, relationships, metrics, rules, permissions
|
|
43
|
+
3. Role — who uses it; uiDifferentiators per role
|
|
44
|
+
4. Task — what users accomplish; requiredInformation per task
|
|
45
|
+
5. Decision — what users determine; possibleActions per decision
|
|
46
|
+
6. Posture — monitoring / acting / analyzing / configuring / creating / reviewing
|
|
47
|
+
7. IA — areas derived from tasks (not entities)
|
|
48
|
+
8. AppShell — shell pattern derived from posture
|
|
49
|
+
9. Navigation — primary / secondary / contextual; role-scoped
|
|
50
|
+
10. Surface — page / panel / drawer / modal / popover / card / toast
|
|
51
|
+
11. View — route-level composition of sections
|
|
52
|
+
12. Section — semantic group; taskIds or decisionIds required
|
|
53
|
+
13. Component — justified by task + decision + binding
|
|
54
|
+
14. DataBinding — fieldMap, refreshPolicy, cachePolicy
|
|
55
|
+
15. Interaction — label, input, permission, result, optimisticUpdate, errorPath
|
|
56
|
+
16. State — local / server / derived / route / session / optimistic / permission
|
|
57
|
+
17. Feedback — loading + empty + error per data-driven component
|
|
58
|
+
18. RenderPlan — what to emit and in what format
|
|
59
|
+
19. Validation — does the output satisfy the intent?
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### The Pre-Composition Rubric (5 gates)
|
|
63
|
+
|
|
64
|
+
Before any HTML or A2UI JSON output, emit a `### GenUI Plan` block.
|
|
65
|
+
|
|
66
|
+
**Carry-forward rule:** if the user's prompt already answers a field,
|
|
67
|
+
carry it forward directly — do not re-interrogate. Only ask about fields
|
|
68
|
+
that are genuinely missing. A prompt that says "Admin UI for Claims
|
|
69
|
+
Management loading from /api/claims" has already answered `domain`,
|
|
70
|
+
`tasks`, `bindings`, and `shell`. Only confirm missing pieces.
|
|
71
|
+
|
|
72
|
+
#### GenUI Plan (emit format)
|
|
73
|
+
|
|
74
|
+
```yaml
|
|
75
|
+
intent:
|
|
76
|
+
user_goal: "[What is the user trying to accomplish?]"
|
|
77
|
+
|
|
78
|
+
domain:
|
|
79
|
+
entities: "[Core nouns: Claim, Policy, Adjuster, Document…]"
|
|
80
|
+
metrics: "[Key numbers: open claims count, avg resolution time…]"
|
|
81
|
+
|
|
82
|
+
tasks:
|
|
83
|
+
primary: "[Verbs: Review Claim, Assign Adjuster, Approve Payout…]"
|
|
84
|
+
|
|
85
|
+
decisions:
|
|
86
|
+
key: "[What must the user determine? What action follows?]"
|
|
87
|
+
|
|
88
|
+
bindings:
|
|
89
|
+
# Carry forward any endpoints the user provided.
|
|
90
|
+
# For each: endpoint, method (GET/POST/SSE), fieldMap stub.
|
|
91
|
+
# Example: GET /api/claims → table-ui.data via data-stream-src
|
|
92
|
+
sources: "[endpoint X → which component(s) consume it]"
|
|
93
|
+
|
|
94
|
+
design_reference:
|
|
95
|
+
# If the user provided Figma boards, screenshots, or mockups:
|
|
96
|
+
# - Extract: layout intent, visual hierarchy, key component patterns
|
|
97
|
+
# - Map: design components → nearest AdiaUI primitives
|
|
98
|
+
# - Flag: anything the board shows that AdiaUI doesn't have
|
|
99
|
+
# DO NOT copy raw colors, spacing values, or font sizes from the board.
|
|
100
|
+
# Map them to the nearest --a-* token instead.
|
|
101
|
+
source: "[Figma link / screenshot / none]"
|
|
102
|
+
mapped_components: "[design component → AdiaUI equivalent]"
|
|
103
|
+
deviations: "[anything in the board AdiaUI can't express — flag for user]"
|
|
104
|
+
|
|
105
|
+
structure:
|
|
106
|
+
posture: "[monitoring | acting | analyzing | configuring | creating | reviewing]"
|
|
107
|
+
shell: "[admin-shell | chat-shell | editor-shell | simple-shell | a2ui-root]"
|
|
108
|
+
views: "[list the views/routes this UI needs — e.g. claims list, claim detail]"
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
After emitting the plan, ask: *"Does this model look correct? May I
|
|
112
|
+
proceed to generate the structure?"* — but omit questions about fields
|
|
113
|
+
the user already answered.
|
|
114
|
+
|
|
115
|
+
Only after confirmation (or in fully autonomous mode with pre-approval)
|
|
116
|
+
proceed to §1 Catalog Lookup and §2 Composition.
|
|
117
|
+
|
|
118
|
+
### Non-negotiable rules (from the ladder)
|
|
119
|
+
|
|
120
|
+
- **Component justification:** every component must trace to `taskIds` or
|
|
121
|
+
`decisionIds`. A component with no task or decision trace must be removed.
|
|
122
|
+
- **Decision actions:** every critical decision must have `possibleActions`.
|
|
123
|
+
A decision with no action is an observation, not a supported decision.
|
|
124
|
+
- **Feedback completeness:** every data-driven component requires loading,
|
|
125
|
+
empty, and error states. Not optional.
|
|
126
|
+
- **Role differentiation:** when multiple roles exist, each needs
|
|
127
|
+
`uiDifferentiators`. One interface for incompatible roles is an error.
|
|
128
|
+
- **No unbound UI:** every data-driven component needs an explicit binding
|
|
129
|
+
(source, fieldMap, refreshPolicy). An unbound component is a mockup.
|
|
130
|
+
|
|
131
|
+
### Anti-patterns (check before declaring done)
|
|
132
|
+
|
|
133
|
+
| ID | Name | Symptom |
|
|
134
|
+
|---|---|---|
|
|
135
|
+
| AP-01 | Premature Rendering | Output starts with component vocabulary |
|
|
136
|
+
| AP-02 | Generic Dashboard Syndrome | Metrics shown with no actions |
|
|
137
|
+
| AP-03 | Component-First Thinking | Reasoning starts with component names |
|
|
138
|
+
| AP-04 | Unbound UI | Components have no data source |
|
|
139
|
+
| AP-05 | Actionless Interface | Operational surface with no actions |
|
|
140
|
+
| AP-06 | Missing Feedback States | No loading, empty, or error states |
|
|
141
|
+
| AP-07 | Role Collapse | One interface for incompatible roles |
|
|
142
|
+
| AP-08 | Metric Without Decision | KPI card with empty decisionIds |
|
|
143
|
+
| AP-09 | Surface Without Task | Surface with empty taskIds |
|
|
144
|
+
| AP-10 | State Without Owner | State with no owner or reset condition |
|
|
145
|
+
|
|
146
|
+
---
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: reasoning-methodologies
|
|
3
|
+
load-when: When the user's request is ambiguous or novel — covers general-purpose reasoning priors (first-principles, root-cause, rate-limiting, decomposition over generation) that pre-empt jumping to skill-specific output
|
|
4
|
+
load-size-tokens: ~1,300
|
|
5
|
+
required-for:
|
|
6
|
+
- novel-task triage
|
|
7
|
+
- audit-mode root-cause analysis
|
|
8
|
+
- pre-output reasoning
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# §ReasoningMethodologies — General-purpose priors that pre-empt skill content
|
|
12
|
+
|
|
13
|
+
These are the reasoning postures every phase of this skill assumes you
|
|
14
|
+
bring. They are not AdiaUI-specific — they are the priors that make this
|
|
15
|
+
skill's phase map produce correct output. If you skip them, the skill
|
|
16
|
+
phases produce locally-correct steps that compose into wrong outcomes.
|
|
17
|
+
|
|
18
|
+
### 1. Decomposition over generation
|
|
19
|
+
|
|
20
|
+
**If you can't explain the problem, you can't solve it.** Before writing
|
|
21
|
+
a single component, name:
|
|
22
|
+
|
|
23
|
+
- What this UI is *for* (the user task, not "a dashboard").
|
|
24
|
+
- The first-principles decomposition (entities → tasks → decisions →
|
|
25
|
+
display + input affordances → component primitives).
|
|
26
|
+
- Which decisions are *load-bearing* (changing them rewrites everything
|
|
27
|
+
below) vs *cosmetic* (changing them is a one-line override).
|
|
28
|
+
|
|
29
|
+
Component selection is the **output** of decomposition, not the input.
|
|
30
|
+
If the user says "build a table", the table is a hint about display
|
|
31
|
+
shape, not a specification. Resolve the entity + the decisions it
|
|
32
|
+
supports before reaching for `<table-ui>` — you may find `<feed-ui>` or
|
|
33
|
+
`<kanban-ui>` was the right primitive.
|
|
34
|
+
|
|
35
|
+
### 2. Root cause analysis before patching
|
|
36
|
+
|
|
37
|
+
When a symptom appears (component renders wrong, state out of sync, CSS
|
|
38
|
+
override doesn't take, ticket from a consumer), find the *root* before
|
|
39
|
+
proposing a fix. The chain usually runs:
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
Symptom → Proximate cause → Mechanism → Root cause
|
|
43
|
+
"button "wrong --a-fg- "token wrong "consumer set
|
|
44
|
+
wrong resolves" for variant" --a-fg in :root
|
|
45
|
+
color" overriding the
|
|
46
|
+
variant scope"
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
The proximate cause justifies a workaround. The root cause justifies a
|
|
50
|
+
substrate fix or a documented convention. **Skill-authoring should fix
|
|
51
|
+
substrate or document discipline; never teach workarounds.**
|
|
52
|
+
|
|
53
|
+
### 3. Rate-limiting factors
|
|
54
|
+
|
|
55
|
+
For any system, name the *irreducible mechanic* that gates correctness
|
|
56
|
+
or performance. Examples in this skill's domain:
|
|
57
|
+
|
|
58
|
+
- The icon loader needs Phosphor installed *before* `static
|
|
59
|
+
requiredIcons` runs. Rate-limiter: install order.
|
|
60
|
+
- `<table-ui>` paired with `<table-toolbar-ui>` works because the
|
|
61
|
+
toolbar dispatches scoped events. Rate-limiter: event scoping.
|
|
62
|
+
- 9-package lockstep is enforced because internal `^MAJOR.MINOR.0` deps
|
|
63
|
+
lock to exact in npm pre-1.0. Rate-limiter: semver pre-1.0 semantics.
|
|
64
|
+
|
|
65
|
+
Whenever a recipe in this skill exists, it exists because of a
|
|
66
|
+
rate-limiting mechanic. Name the mechanic; *then* the recipe makes
|
|
67
|
+
sense and can be adapted.
|
|
68
|
+
|
|
69
|
+
### 4. First-principles audit before adopting a pattern
|
|
70
|
+
|
|
71
|
+
When the repo already has a pattern (hand-rolled skeleton, custom
|
|
72
|
+
shell, bespoke route mount), don't reflexively replace it with the
|
|
73
|
+
substrate equivalent. Audit:
|
|
74
|
+
|
|
75
|
+
- **Why does this pattern exist?** (predates substrate capability? a
|
|
76
|
+
deliberate carve-out? a workaround for a bug that's since shipped?)
|
|
77
|
+
- **What does substrate now provide?** (loading prop? slot? token?
|
|
78
|
+
primitive?)
|
|
79
|
+
- **What does replacement cost?** (1-line, 1-file, N-files, regression
|
|
80
|
+
surface, behavior delta.)
|
|
81
|
+
- **What does keeping it cost?** (drift accumulates, future agents
|
|
82
|
+
cargo-cult the workaround, doc-currency suffers.)
|
|
83
|
+
|
|
84
|
+
Adopt-or-keep is a *decision*, not a default. Document the decision in
|
|
85
|
+
the diagnostic report — see §DiagnosticOutput.
|
|
86
|
+
|
|
87
|
+
### 5. 5-way reachability check
|
|
88
|
+
|
|
89
|
+
For any artifact (component, chunk, page, primitive, token) that is
|
|
90
|
+
*supposed to be canonical*, verify it is reachable from at least these
|
|
91
|
+
five surfaces — every miss is a class of bug:
|
|
92
|
+
|
|
93
|
+
1. **Sitemap / index** — listed where consumers look.
|
|
94
|
+
2. **Corpus / search index** — discoverable by name/keyword.
|
|
95
|
+
3. **Harvester / generator output** — chunked or indexed by tooling.
|
|
96
|
+
4. **Imports / module graph** — actually loaded by something.
|
|
97
|
+
5. **Self-doc** — its own README/yaml/examples reference it.
|
|
98
|
+
|
|
99
|
+
If a "canonical" artifact is reachable from <5, it isn't canonical;
|
|
100
|
+
it's a draft, a dead branch, or a doc-currency miss. This is the gap
|
|
101
|
+
class §Recon hunts for.
|
|
102
|
+
|
|
103
|
+
### 6. Explain before you act
|
|
104
|
+
|
|
105
|
+
Before any non-trivial change (substrate edit, migration sweep,
|
|
106
|
+
diagnostic report), write the *why* in plain English. If you can't
|
|
107
|
+
write the why in two sentences, you don't understand the change well
|
|
108
|
+
enough to make it. The §0 GenUI Plan, the §Recon report, the
|
|
109
|
+
§DiagnosticOutput, and every commit message in this repo follow this
|
|
110
|
+
discipline.
|
|
111
|
+
|
|
112
|
+
---
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: recon
|
|
3
|
+
load-when: Consultant-posture inventory — landing in a brownfield consumer repo and getting the 60-second read of what shipped, what state it's in, what gaps exist
|
|
4
|
+
load-size-tokens: ~2,100
|
|
5
|
+
required-for:
|
|
6
|
+
- mode 5 (consultant) first turn
|
|
7
|
+
- audit output authoring
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# §Recon — 60-second inventory for a brownfield repo
|
|
11
|
+
|
|
12
|
+
Run this **before** §Setup any time you land in a repo you didn't author.
|
|
13
|
+
The goal is not to be exhaustive — it's to assemble enough context that
|
|
14
|
+
your subsequent edits respect the repo's existing intent, conventions,
|
|
15
|
+
and adoption state.
|
|
16
|
+
|
|
17
|
+
### Why this exists
|
|
18
|
+
|
|
19
|
+
Without recon, brownfield work produces three predictable failures:
|
|
20
|
+
|
|
21
|
+
1. **Convention violation** — you write `[data-actions]` when the repo
|
|
22
|
+
has adopted `slot="action"`, or vice versa.
|
|
23
|
+
2. **Substrate duplication** — you hand-roll a skeleton when the repo's
|
|
24
|
+
installed `@adia-ai/web-components` already ships `loading` on
|
|
25
|
+
`<stat-ui>` / `<table-ui>`.
|
|
26
|
+
3. **ADR ignorance** — you propose a legacy shell shape that ADR-0024
|
|
27
|
+
retired, because the repo's own docs hint at it without flagging the
|
|
28
|
+
retirement.
|
|
29
|
+
|
|
30
|
+
The §Recon checklist below catches all three classes in roughly 60
|
|
31
|
+
seconds of disciplined inspection.
|
|
32
|
+
|
|
33
|
+
### The Recon checklist (in order)
|
|
34
|
+
|
|
35
|
+
Each step has an exact command and a one-line interpretation rule.
|
|
36
|
+
|
|
37
|
+
**1 — Identify the repo's agent-entry file**
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
ls AGENTS.md CLAUDE.md .cursorrules 2>/dev/null
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
If present: **read it in full** before doing anything else. It usually
|
|
44
|
+
contains hard rules, peer-agent baseline, and reading-order pointers.
|
|
45
|
+
**If absent: this is itself a finding** — propose scaffolding from
|
|
46
|
+
`assets/templates/` in §DiagnosticOutput.
|
|
47
|
+
|
|
48
|
+
**2 — Identify the project tier**
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
ls package.json README.md .claude/docs/ specs/ .brain/ 2>/dev/null
|
|
52
|
+
test -d apps && echo "monorepo-app-tier" || echo "single-package"
|
|
53
|
+
test -d packages && echo "monorepo-substrate-tier" || true
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Determine: substrate repo (publishes `@adia-ai/*`), consumer app (uses
|
|
57
|
+
`@adia-ai/*`), or library (re-exports / wraps). Each implies different
|
|
58
|
+
recon depth.
|
|
59
|
+
|
|
60
|
+
**3 — Read the installed AdiaUI versions (and confirm declarations exist)**
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
# (a) What's declared in package.json?
|
|
64
|
+
node -e "const p=require('./package.json'); const deps={...p.dependencies, ...p.devDependencies}; const adia=Object.entries(deps).filter(([k])=>k.startsWith('@adia-ai/')); console.log(JSON.stringify(Object.fromEntries(adia), null, 2))"
|
|
65
|
+
|
|
66
|
+
# (b) What's installed in node_modules?
|
|
67
|
+
ls node_modules/@adia-ai/ 2>/dev/null
|
|
68
|
+
# For each: cat node_modules/@adia-ai/<pkg>/package.json | grep '"version"'
|
|
69
|
+
|
|
70
|
+
# (c) CRITICAL CHECK — do imports exist for packages that aren't declared?
|
|
71
|
+
# (This is the manifest-gap detection — see §GapDetection Gap class 0.)
|
|
72
|
+
grep -rEn "from ['\"]@adia-ai/" --include='*.ts' --include='*.js' \
|
|
73
|
+
--include='*.tsx' --include='*.jsx' --include='*.vue' --include='*.svelte' \
|
|
74
|
+
src/ 2>/dev/null | head -10
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
Note the **3-tuple**: declared / installed / latest-published. Drift
|
|
78
|
+
between any two is a gap class (see §GapDetection).
|
|
79
|
+
|
|
80
|
+
**Halt-condition (Gap class 0):** if step (c) returns matches but step
|
|
81
|
+
(a) returns `{}` empty, the manifest is gapped — source imports
|
|
82
|
+
`@adia-ai/*` but `package.json` declares nothing. Vite will fail at
|
|
83
|
+
`npm run dev` with "could not be resolved" / "Are they installed?" on
|
|
84
|
+
the bare specifiers. **Do not compose any further UI** until the
|
|
85
|
+
operator declares + installs the deps. See §GapDetection Gap class 0
|
|
86
|
+
for the remediation shape. The 2026-05-23 `claims-ui-v9` incident is
|
|
87
|
+
the canonical worked example: 5 imports against 0 declared deps,
|
|
88
|
+
vite scanner halted dev-server boot.
|
|
89
|
+
|
|
90
|
+
**4 — Read the canonical specs and ADRs**
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
ls .claude/docs/specs/ .claude/docs/ADRs/ .brain/adrs/ 2>/dev/null
|
|
94
|
+
# Read the spec INDEX if present:
|
|
95
|
+
test -f .claude/docs/specs/INDEX.md && head -80 .claude/docs/specs/INDEX.md
|
|
96
|
+
# Scan ADR titles:
|
|
97
|
+
for f in .brain/adrs/*.md .claude/docs/adrs/*.md; do head -3 "$f" 2>/dev/null; done
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Specifically look for: which ADRs *exist*, which ones *describe
|
|
101
|
+
retirement* of legacy shapes, which ones *introduce new canonical
|
|
102
|
+
shapes*. Adoption state of each is a gap candidate.
|
|
103
|
+
|
|
104
|
+
**5 — Read the most recent journal entry (if any)**
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
ls .claude/docs/journal/ .brain/journal/ 2>/dev/null
|
|
108
|
+
find .claude/docs/journal/ -name '*.md' 2>/dev/null | sort | tail -3
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The newest journal entry tells you what was last in flight, what was
|
|
112
|
+
last shipped, and what hand-offs are open. If a peer agent is mid-arc,
|
|
113
|
+
recon should pick up there.
|
|
114
|
+
|
|
115
|
+
**6 — Inventory the actual UI surface**
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
# Find all admin/editor/chat shells in use:
|
|
119
|
+
grep -rEn '<admin-shell|<editor-shell|<chat-shell|<chrome-shell' \
|
|
120
|
+
--include='*.html' --include='*.js' --include='*.jsx' \
|
|
121
|
+
--include='*.tsx' --include='*.vue' --include='*.svelte' .
|
|
122
|
+
|
|
123
|
+
# Find raw <main> / <header> / <aside> patterns (likely legacy):
|
|
124
|
+
grep -rEn '<main[ >]|<aside[ >]|<header[ >]' \
|
|
125
|
+
--include='*.html' . | head -20
|
|
126
|
+
|
|
127
|
+
# Find hand-rolled skeletons (likely substrate-replaceable):
|
|
128
|
+
grep -rEn 'skeleton|placeholder.*loading|class=".*loading"' \
|
|
129
|
+
--include='*.css' --include='*.html' . | head -20
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
These three grep families together map: **which shells exist**, **what
|
|
133
|
+
hasn't been adopted yet**, **what has been hand-rolled**. Each finding
|
|
134
|
+
is a candidate for §GapDetection.
|
|
135
|
+
|
|
136
|
+
**7 — Check for hand-rolled primitives that substrate now provides**
|
|
137
|
+
|
|
138
|
+
This is the highest-leverage finding class. Examples to look for:
|
|
139
|
+
|
|
140
|
+
| Hand-rolled symptom (grep) | Substrate replacement (since) |
|
|
141
|
+
|---|---|
|
|
142
|
+
| `class=".*toast"` + custom CSS | `<feed-ui>` toast API (v0.6.11+) |
|
|
143
|
+
| `class=".*skeleton"` + custom CSS | `loading` prop on `<stat-ui>` / `<table-ui>` (v0.6.18+) |
|
|
144
|
+
| Custom `<div role="dialog">` | `<dialog-ui>` / `<drawer-ui>` |
|
|
145
|
+
| Custom CSS / `@media` for breakpoints | `@bp` responsive attrs on `grid-ui` / `col-ui` / `row-ui` / `text-ui` / `block-ui` — `columns="2 4@md"`, `gap="2 4@md"`, `justify="start between@md"` |
|
|
146
|
+
| Inline color hex / rgb | `--a-chrome-*` / `--a-data-*` semantic tokens |
|
|
147
|
+
| Custom `<button class="primary">` | `<button-ui variant="primary">` |
|
|
148
|
+
|
|
149
|
+
Each match here is a §GapDetection capability-drift finding. **Do not
|
|
150
|
+
fix in recon** — note it for the report.
|
|
151
|
+
|
|
152
|
+
**8 — Check doc currency**
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
# When was README / .claude/docs/ last touched?
|
|
156
|
+
find README.md .claude/docs/ -name '*.md' -mtime -30 2>/dev/null | head -5
|
|
157
|
+
# Are there obvious stale references? (versions, tags, retired shapes)
|
|
158
|
+
grep -rEn 'v0\.[0-5]\.[0-9]+|@agent-ui-kit|AgentElement|--agent-' \
|
|
159
|
+
README.md .claude/docs/ 2>/dev/null | head -10
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Stale doc references usually correlate with stale code. Note them.
|
|
163
|
+
|
|
164
|
+
**9 — Run whatever verification gates exist**
|
|
165
|
+
|
|
166
|
+
```bash
|
|
167
|
+
# If the repo has its own gates, run them — they encode its conventions.
|
|
168
|
+
test -f package.json && grep -E '"check:|"verify:|"smoke:|"lint:' package.json
|
|
169
|
+
# Common shapes:
|
|
170
|
+
npm run check 2>&1 | tail -20 # if check exists
|
|
171
|
+
npm run lint 2>&1 | tail -5 # if lint exists
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
A failing gate is itself a finding. A *missing* gate (e.g. consumer has
|
|
175
|
+
no `check:lockstep` equivalent) is also a finding.
|
|
176
|
+
|
|
177
|
+
### Recon stop-conditions
|
|
178
|
+
|
|
179
|
+
Stop the inventory when you can answer all of these:
|
|
180
|
+
|
|
181
|
+
- What is this repo (tier, framework, rendering model)?
|
|
182
|
+
- What AdiaUI versions does it consume (declared / installed / latest)?
|
|
183
|
+
- Which ADRs has it adopted? Which has it not?
|
|
184
|
+
- What shells / patterns are in use? What's hand-rolled?
|
|
185
|
+
- Where is the doc currency (fresh, stale, missing)?
|
|
186
|
+
- Are there peer agents mid-arc, or open hand-offs in the journal?
|
|
187
|
+
|
|
188
|
+
Once you have answers to all six, proceed to §GapDetection. **Do not
|
|
189
|
+
proceed to §Setup or §0 until the user has confirmed your
|
|
190
|
+
§DiagnosticOutput** — otherwise you're authoring without context.
|
|
191
|
+
|
|
192
|
+
---
|