@sallmarta/eye-hate-agent 1.0.3 → 1.0.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/README.md +52 -28
- package/docs/templates/project-docs-template/index.md +192 -50
- package/docs/templates/project-docs-template/technical-guidelines/index.md +50 -21
- package/docs/templates/reusable-prompts/00-project-docs-bootstrap.md +26 -43
- package/docs/templates/reusable-prompts/00-project-docs-parity.md +1 -1
- package/docs/templates/reusable-prompts/00-project-docs-refresh.md +9 -7
- package/docs/templates/reusable-prompts/01-sdd-execute.md +1 -1
- package/docs/templates/reusable-prompts/02-sdd-discuss.md +1 -1
- package/docs/templates/rules/agent-rules.md +1 -1
- package/docs/templates/skills/{architecture/api-design → api-design}/SKILL.md +14 -25
- package/docs/templates/skills/{auditing/full-verification → code-audit}/SKILL.md +35 -53
- package/docs/templates/skills/db-schema-design/SKILL.md +120 -0
- package/docs/templates/skills/devops-ci-cd/SKILL.md +99 -0
- package/docs/templates/skills/observability/SKILL.md +99 -0
- package/docs/templates/skills/{auditing/parity → parity-audit}/SKILL.md +24 -50
- package/docs/templates/skills/refactor/SKILL.md +100 -0
- package/docs/templates/skills/security-audit/SKILL.md +149 -0
- package/docs/templates/skills/{architecture/system-analysis → system-analysis}/SKILL.md +19 -41
- package/docs/templates/skills/{engineering/test-authoring → system-tester}/SKILL.md +28 -222
- package/docs/templates/skills/ui-ux-design/SKILL.md +102 -0
- package/docs/templates/skills/wireframing/SKILL.md +88 -0
- package/package.json +1 -1
- package/src/engine/index.js +2 -0
- package/src/engine/install.js +1 -3
- package/src/engine/runtime-adapters.js +7 -4
- package/src/engine/skill-registry.js +37 -32
- package/docs/templates/project-docs-template/foundation/architecture.md +0 -79
- package/docs/templates/project-docs-template/foundation/changelog.md +0 -53
- package/docs/templates/project-docs-template/foundation/feature-inventory.md +0 -46
- package/docs/templates/project-docs-template/foundation/phases.md +0 -60
- package/docs/templates/project-docs-template/foundation/prd.md +0 -69
- package/docs/templates/project-docs-template/foundation/status.md +0 -57
- package/docs/templates/project-docs-template/foundation/workflow.md +0 -59
- package/docs/templates/project-docs-template/getting-started.md +0 -52
- package/docs/templates/project-docs-template/operations/ci-cd.md +0 -56
- package/docs/templates/project-docs-template/operations/compliance.md +0 -46
- package/docs/templates/project-docs-template/operations/governance.md +0 -46
- package/docs/templates/project-docs-template/operations/observability.md +0 -53
- package/docs/templates/project-docs-template/operations/production-runbook.md +0 -62
- package/docs/templates/project-docs-template/operations/security.md +0 -49
- package/docs/templates/project-docs-template/technical/api-contract.md +0 -49
- package/docs/templates/project-docs-template/technical/database.md +0 -59
- package/docs/templates/project-docs-template/technical/error-handling.md +0 -54
- package/docs/templates/project-docs-template/technical/internationalization.md +0 -46
- package/docs/templates/project-docs-template/technical/testing.md +0 -57
- package/docs/templates/project-docs-template/technical/ui-ux.md +0 -68
- package/docs/templates/skills/architecture/db-schema-design/SKILL.md +0 -14
- package/docs/templates/skills/auditing/security-audit/SKILL.md +0 -170
- package/docs/templates/skills/engineering/refactor-specialist/SKILL.md +0 -13
- package/docs/templates/skills/engineering/ui-ux-implementation/SKILL.md +0 -13
- package/docs/templates/skills/operations/ci-cd-authoring/SKILL.md +0 -13
- package/docs/templates/skills/operations/observability-setup/SKILL.md +0 -13
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
---
|
|
2
|
-
name:
|
|
2
|
+
name: "system-tester"
|
|
3
3
|
description: "Project-aware expert-role verification strategy and test authoring that reads project docs to choose the right frameworks, commands, layers, and templates. Use when deciding test scope, validating regressions, choosing verification strategy, and writing or reviewing tests across any stack."
|
|
4
4
|
argument-hint: "Describe the behavior, bug, feature, boundary, or artifact to test"
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# system-tester
|
|
8
8
|
|
|
9
9
|
Produces an **expert, project-aware verification strategy and test implementation plan** by reading the repository's documentation contract first, then selecting the correct test types, commands, and conventions for the current stack.
|
|
10
10
|
|
|
@@ -12,16 +12,13 @@ This skill is intentionally **not tied to any single stack or framework**. The s
|
|
|
12
12
|
|
|
13
13
|
This skill is **verification-strategy-first**. Its primary job is to choose the right verification boundary, check type, commands, and assertions; writing the test code is downstream of that decision when implementation is actually needed.
|
|
14
14
|
|
|
15
|
-
---
|
|
16
|
-
|
|
17
15
|
## Required Project Inputs
|
|
18
16
|
|
|
19
17
|
Read the relevant docs before proposing or writing tests.
|
|
20
18
|
|
|
21
19
|
| Document | Why it matters |
|
|
22
20
|
| --- | --- |
|
|
23
|
-
|
|
24
|
-
| `docs/project-docs/technical/testing.md` | Primary source for verification policy, commands, quality gates, and fallback rules |
|
|
21
|
+
| `docs/project-docs/development/testing.md` | Primary source for verification policy, commands, quality gates, and fallback rules |
|
|
25
22
|
| `docs/project-docs/foundation/architecture.md` | Explains runtime boundaries, architecture pattern, integrations, storage, and enforcement rules |
|
|
26
23
|
| `docs/project-docs/foundation/status.md` | Reveals current implementation state, risks, and which workstream the change belongs to |
|
|
27
24
|
| Relevant feature docs under `docs/project-docs/` or `docs/project-docs/technical-guidelines/` | Provide domain-specific behavior, API contracts, or user-flow expectations |
|
|
@@ -29,9 +26,7 @@ Read the relevant docs before proposing or writing tests.
|
|
|
29
26
|
|
|
30
27
|
If one of the required docs is missing and the task depends on it, surface that explicitly and create or update the doc instead of guessing.
|
|
31
28
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
## When To Use
|
|
29
|
+
## When to Use
|
|
35
30
|
|
|
36
31
|
| Trigger | Example request |
|
|
37
32
|
| --- | --- |
|
|
@@ -40,13 +35,8 @@ If one of the required docs is missing and the task depends on it, surface that
|
|
|
40
35
|
| Migration or persistence change | "Write a test plan for this migration change" |
|
|
41
36
|
| Documentation-only repo change | "How should I validate a reusable prompt or platform instruction surface update?" |
|
|
42
37
|
|
|
43
|
-
Use `
|
|
44
|
-
|
|
45
|
-
Use `code-audit` instead when the main question is whether the implementation is correct.
|
|
46
|
-
|
|
47
|
-
Use `analysis` instead when the task is explaining a failure or comparing technical options rather than deciding how to verify them.
|
|
48
|
-
|
|
49
|
-
---
|
|
38
|
+
Use `code-audit` instead when the main question is whether the implementation is correct.
|
|
39
|
+
Use `system-analysis` instead when the task is explaining a failure or comparing technical options.
|
|
50
40
|
|
|
51
41
|
## Procedure
|
|
52
42
|
|
|
@@ -133,8 +123,6 @@ Separate:
|
|
|
133
123
|
- what was not verified
|
|
134
124
|
- what still depends on manual review or future automation
|
|
135
125
|
|
|
136
|
-
---
|
|
137
|
-
|
|
138
126
|
### Check Selection Matrix
|
|
139
127
|
|
|
140
128
|
| Scenario | Preferred check type | Read first |
|
|
@@ -145,34 +133,27 @@ Separate:
|
|
|
145
133
|
| Interface, handler, adapter, or contract boundary | Contract or integration test | `testing.md`, API / integration docs |
|
|
146
134
|
| Interactive or end-user-visible flow | UI or end-to-end test | `testing.md`, app-flow / UI docs |
|
|
147
135
|
| Asynchronous, scheduled, staged, or event-driven processing | Integration or component test | `testing.md`, `architecture.md`, workflow docs |
|
|
148
|
-
| Rule, skill, reusable prompt, or documentation change | Consistency review
|
|
149
|
-
|
|
150
|
-
---
|
|
136
|
+
| Rule, skill, reusable prompt, or documentation change | Consistency review | EHA rules, `testing.md` |
|
|
151
137
|
|
|
152
|
-
|
|
138
|
+
### Test Patterns Reference
|
|
153
139
|
|
|
154
|
-
|
|
140
|
+
#### Pattern A: Narrow Unit Or Component Test
|
|
141
|
+
Arrange inputs/collaborators -> Act on boundary -> Assert on value/effect. Best for pure functions, mappers, validators.
|
|
155
142
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
3. the project docs consulted
|
|
159
|
-
4. whether new or changed tests are actually needed
|
|
160
|
-
5. the command(s) to run, or the reason no executable command exists
|
|
161
|
-
6. the expected assertions or behaviors to verify
|
|
162
|
-
7. any residual risks or uncovered paths
|
|
143
|
+
#### Pattern B: Persistence Or Contract Test
|
|
144
|
+
Set up environment -> Insert/send inputs -> Read/decode output -> Assert on correctness. Best for schema, migrations, API compatibility.
|
|
163
145
|
|
|
164
|
-
|
|
146
|
+
#### Pattern C: Flow Or Interaction Test
|
|
147
|
+
Start from entry point -> Drive interaction -> Wait for transition -> Assert on outcome. Best for UI flows, end-to-end boundaries.
|
|
165
148
|
|
|
166
|
-
## Quality
|
|
149
|
+
## Quality Check
|
|
167
150
|
|
|
168
151
|
- Choose the narrowest check that can falsify the current assumption
|
|
169
152
|
- Do not recommend commands before checking `testing.md`
|
|
170
153
|
- Keep the verification boundary aligned with `architecture.md`
|
|
171
154
|
- Separate what was verified from what still depends on manual review or future automation
|
|
172
155
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
## Anti-Patterns
|
|
156
|
+
## Anti-Pattern
|
|
176
157
|
|
|
177
158
|
- Hardcoding one framework's tools into the skill text when that belongs in `testing.md`
|
|
178
159
|
- Writing an end-to-end test when a narrow unit or contract test would falsify the same assumption
|
|
@@ -182,196 +163,21 @@ When using this skill, the output should include:
|
|
|
182
163
|
- Treating documentation-only repositories as if they must already have executable tests
|
|
183
164
|
- Confusing architecture examples with mandatory implementation details
|
|
184
165
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
## Natural Prompt Shapes
|
|
188
|
-
|
|
189
|
-
- "What is the right way to verify this change?"
|
|
190
|
-
- "Which tests should we add for this API or bug fix?"
|
|
191
|
-
- "Use the correct testing approach for this stack and tell me what to run."
|
|
192
|
-
- "Do we actually need new tests here, and if so at what boundary?"
|
|
166
|
+
## Output Contract
|
|
193
167
|
|
|
194
|
-
|
|
168
|
+
When using this skill, the output should include:
|
|
169
|
+
1. the recommended verification boundary
|
|
170
|
+
2. the specific check type to use
|
|
171
|
+
3. the project docs consulted
|
|
172
|
+
4. whether new or changed tests are actually needed
|
|
173
|
+
5. the command(s) to run, or the reason no executable command exists
|
|
174
|
+
6. the expected assertions or behaviors to verify
|
|
175
|
+
7. any residual risks or uncovered paths
|
|
195
176
|
|
|
196
|
-
##
|
|
177
|
+
## Neutral Prompt Shape
|
|
178
|
+
`@agent use system-tester on [Target Component/Feature] focusing on [Specific Test Boundaries].`
|
|
197
179
|
|
|
180
|
+
## Example Prompt
|
|
198
181
|
- "Choose the right verification for this repository-layer change"
|
|
199
182
|
- "What tests should cover this API contract update?"
|
|
200
183
|
- "Write a test plan for this migration change"
|
|
201
|
-
- "This repo has no code yet — how should I validate a reusable prompt or platform instruction surface update?"
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
---
|
|
205
|
-
|
|
206
|
-
# Test Patterns Reference — Project-Aware
|
|
207
|
-
|
|
208
|
-
Quick reference for common test-pattern shapes. Use these as **structural examples**, then adapt them using the repository's `testing.md`, `architecture.md`, and local conventions.
|
|
209
|
-
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
## Pattern A: Narrow Unit Or Component Test
|
|
213
|
-
|
|
214
|
-
Use when you want the fastest check at a clear boundary.
|
|
215
|
-
|
|
216
|
-
### Pattern A Skeleton
|
|
217
|
-
|
|
218
|
-
```text
|
|
219
|
-
Arrange inputs and collaborators
|
|
220
|
-
Act on one function, method, or component boundary
|
|
221
|
-
Assert on the returned value, state change, or emitted effect
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### Pattern A Good Fit
|
|
225
|
-
|
|
226
|
-
- pure functions
|
|
227
|
-
- mappers or transformers
|
|
228
|
-
- validators
|
|
229
|
-
- repository or service methods with mocked dependencies
|
|
230
|
-
- small boundary-level business logic
|
|
231
|
-
|
|
232
|
-
### Pattern A Checklist
|
|
233
|
-
|
|
234
|
-
- isolate one behavior
|
|
235
|
-
- keep collaborators fake or mocked when helpful
|
|
236
|
-
- assert on outcomes, not internal implementation noise
|
|
237
|
-
- name tests by observable behavior
|
|
238
|
-
|
|
239
|
-
---
|
|
240
|
-
|
|
241
|
-
## Pattern B: Persistence Or Contract Test
|
|
242
|
-
|
|
243
|
-
Use when you need confidence in schema, queries, serialization, or boundary compatibility.
|
|
244
|
-
|
|
245
|
-
### Pattern B Skeleton
|
|
246
|
-
|
|
247
|
-
```text
|
|
248
|
-
Set up an isolated persistence or contract environment
|
|
249
|
-
Insert or send representative inputs
|
|
250
|
-
Read back or decode the resulting output
|
|
251
|
-
Assert on correctness, constraints, and error cases
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
### Pattern B Good Fit
|
|
255
|
-
|
|
256
|
-
- database queries
|
|
257
|
-
- repository persistence rules
|
|
258
|
-
- schema evolution
|
|
259
|
-
- migration behavior
|
|
260
|
-
- request / response or message serialization
|
|
261
|
-
- interface compatibility checks
|
|
262
|
-
|
|
263
|
-
### Pattern B Checklist
|
|
264
|
-
|
|
265
|
-
- include one happy path
|
|
266
|
-
- include one invalid or edge case
|
|
267
|
-
- assert on durable outcomes, not just returned status
|
|
268
|
-
- use representative fixtures where that improves clarity
|
|
269
|
-
|
|
270
|
-
---
|
|
271
|
-
|
|
272
|
-
## Pattern C: Flow Or Interaction Test
|
|
273
|
-
|
|
274
|
-
Use when the value lies in verifying a user, operator, or system flow instead of an isolated unit.
|
|
275
|
-
|
|
276
|
-
### Pattern C Skeleton
|
|
277
|
-
|
|
278
|
-
```text
|
|
279
|
-
Start from a realistic entry point
|
|
280
|
-
Drive the interaction or workflow
|
|
281
|
-
Wait for the expected state transition
|
|
282
|
-
Assert on visible output, routed behavior, or side effects
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
### Pattern C Good Fit
|
|
286
|
-
|
|
287
|
-
- UI interactions
|
|
288
|
-
- endpoint-to-service flow
|
|
289
|
-
- command or job workflows
|
|
290
|
-
- integration boundaries
|
|
291
|
-
- navigation or routing flows
|
|
292
|
-
|
|
293
|
-
### Pattern C Checklist
|
|
294
|
-
|
|
295
|
-
- keep the flow focused on one meaningful outcome
|
|
296
|
-
- mock or isolate irrelevant external dependencies when possible
|
|
297
|
-
- assert on the behavior the caller or user experiences
|
|
298
|
-
- avoid testing multiple unrelated journeys in one case
|
|
299
|
-
|
|
300
|
-
---
|
|
301
|
-
|
|
302
|
-
## Common Assertions To Prefer
|
|
303
|
-
|
|
304
|
-
- returned values or result envelopes
|
|
305
|
-
- persisted state
|
|
306
|
-
- emitted events or messages
|
|
307
|
-
- visible UI state
|
|
308
|
-
- boundary calls that materially define behavior
|
|
309
|
-
- error category and recovery path
|
|
310
|
-
|
|
311
|
-
Prefer observable behavior over internal implementation details.
|
|
312
|
-
|
|
313
|
-
---
|
|
314
|
-
|
|
315
|
-
## Common Anti-Patterns
|
|
316
|
-
|
|
317
|
-
- testing too many branches in one test
|
|
318
|
-
- asserting on private implementation details
|
|
319
|
-
- using full integration tests when a narrow unit or contract test would falsify the same assumption
|
|
320
|
-
- naming tests after implementation rather than behavior
|
|
321
|
-
- copying framework-specific scaffolds without checking `testing.md`
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
---
|
|
325
|
-
|
|
326
|
-
# Test Type Decision Table — Project-Aware
|
|
327
|
-
|
|
328
|
-
Use this table to choose the smallest verification type that matches the actual boundary being changed. Confirm the final choice against the repository's `testing.md`.
|
|
329
|
-
|
|
330
|
-
| Scenario | Preferred check type | Why |
|
|
331
|
-
| --- | --- | --- |
|
|
332
|
-
| Pure function, mapper, validator, parser | Unit | Fastest falsifiable check with minimal setup |
|
|
333
|
-
| Internal service or repository rule | Unit or component | Verifies business behavior without unnecessary system setup |
|
|
334
|
-
| Persistence query, migration, or schema rule | Persistence / migration test | Verifies durable state and compatibility at the right boundary |
|
|
335
|
-
| Request, handler, controller, or public API contract | Contract or integration test | Verifies visible boundary behavior and schema expectations |
|
|
336
|
-
| UI or operator interaction flow | Flow / interaction test | Verifies user-visible behavior rather than isolated internals |
|
|
337
|
-
| Async job, workflow, or queue behavior | Component or integration test | Verifies sequencing, retry, and side-effect behavior |
|
|
338
|
-
| Documentation, reusable prompt, or platform instruction surfaces change | Structural consistency review | Executable tests may not exist; consistency becomes the real boundary |
|
|
339
|
-
|
|
340
|
-
---
|
|
341
|
-
|
|
342
|
-
## Test Type Summary
|
|
343
|
-
|
|
344
|
-
| Type | Best for | Typical cost | Isolation |
|
|
345
|
-
| --- | --- | --- | --- |
|
|
346
|
-
| Unit | Pure logic and narrow behavior | Lowest | Highest |
|
|
347
|
-
| Component | One internal boundary with collaborators | Low to medium | High |
|
|
348
|
-
| Persistence / contract | Durable state or schema behavior | Low to medium | Medium to high |
|
|
349
|
-
| Flow / interaction | User or system-visible path | Medium | Medium |
|
|
350
|
-
| Integration | Real dependency or end-to-end boundary | Highest | Lowest |
|
|
351
|
-
| Consistency review | Docs, reusable prompts, platform instruction surfaces, and template systems | Low | High |
|
|
352
|
-
|
|
353
|
-
---
|
|
354
|
-
|
|
355
|
-
## Selection Rules
|
|
356
|
-
|
|
357
|
-
1. Prefer the narrowest check that can prove the change is correct.
|
|
358
|
-
2. Escalate to broader tests only when the boundary truly requires it.
|
|
359
|
-
3. Use project docs to choose commands, harnesses, and file placement.
|
|
360
|
-
4. When no executable validation exists, make the structural review explicit rather than pretending the repo is fully testable.
|
|
361
|
-
|
|
362
|
-
---
|
|
363
|
-
|
|
364
|
-
## Naming Guidance
|
|
365
|
-
|
|
366
|
-
Prefer behavior-driven names such as:
|
|
367
|
-
|
|
368
|
-
- `returns empty result when no records match`
|
|
369
|
-
- `rejects invalid payload when required field is missing`
|
|
370
|
-
- `shows retry state after dependency timeout`
|
|
371
|
-
- `persists latest progress after successful update`
|
|
372
|
-
|
|
373
|
-
Avoid placeholder names such as:
|
|
374
|
-
|
|
375
|
-
- `test1`
|
|
376
|
-
- `happy path`
|
|
377
|
-
- `error case`
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: "ui-ux-design"
|
|
3
|
+
description: "Project-aware expert-role for frontend UI/UX design and implementation. Reads project docs first, enforces design systems, responsive bounds, accessibility, and visual testing constraints."
|
|
4
|
+
argument-hint: "Describe the component, page, or interaction to build or review"
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# ui-ux-design
|
|
8
|
+
|
|
9
|
+
Produces a **project-aware, expert-level frontend implementation** by reading the repository's project docs first, then applying a rigorous component-driven methodology.
|
|
10
|
+
|
|
11
|
+
This skill is reusable across any frontend framework (React, Vue, Svelte, plain HTML/CSS) or styling solution (Tailwind, CSS Modules, Styled Components).
|
|
12
|
+
|
|
13
|
+
It should **not** assume a specific component library (like Material UI) or styling engine until the project docs confirm them.
|
|
14
|
+
|
|
15
|
+
## Required Project Inputs
|
|
16
|
+
|
|
17
|
+
| Document | Why it matters |
|
|
18
|
+
| --- | --- |
|
|
19
|
+
| `docs/project-docs/development/ui-ux.md` | Defines the design system, color palette, typography, accessibility (a11y) targets, and responsive breakpoints. |
|
|
20
|
+
| `docs/project-docs/foundation/prd.md` | Clarifies the target audience and expected user flows. |
|
|
21
|
+
| `docs/project-docs/foundation/architecture.md` | Defines where state management lives versus pure presentation components. |
|
|
22
|
+
| `docs/project-docs/development/testing.md` | Defines how the UI should be validated (e.g., unit tests, visual regression, e2e). |
|
|
23
|
+
|
|
24
|
+
If the repository lacks the UI docs needed for styling or layout, call that out and create or update the missing docs instead of inventing arbitrary colors or padding values.
|
|
25
|
+
|
|
26
|
+
## When to Use
|
|
27
|
+
|
|
28
|
+
Use this skill when building or reviewing one of these boundary types:
|
|
29
|
+
|
|
30
|
+
| Boundary type | Typical artifacts |
|
|
31
|
+
| --- | --- |
|
|
32
|
+
| Presentation Component | Buttons, inputs, cards, typography components. |
|
|
33
|
+
| Layout / Page | Grid structures, responsive containers, navigation shells. |
|
|
34
|
+
| Interaction / Animation | Modals, dropdowns, transitions, hover states. |
|
|
35
|
+
| State-Connected Component | Forms, data tables, fetching wrappers. |
|
|
36
|
+
|
|
37
|
+
## Procedure
|
|
38
|
+
|
|
39
|
+
### Step 1 — Extract Design Constraints
|
|
40
|
+
Extract from `ui-ux.md`:
|
|
41
|
+
- CSS variables, Tailwind config, or design token values.
|
|
42
|
+
- Responsive breakpoints (e.g., mobile-first vs desktop-first).
|
|
43
|
+
- Required a11y standards (e.g., WCAG AA).
|
|
44
|
+
|
|
45
|
+
### Step 2 — Separate State from Presentation
|
|
46
|
+
Extract from `architecture.md`:
|
|
47
|
+
- Identify if this component is "dumb" (presentation only) or "smart" (data fetching/stateful).
|
|
48
|
+
- Do not mix complex global state logic into a simple presentational button.
|
|
49
|
+
|
|
50
|
+
### Step 3 — Design for Edge Cases
|
|
51
|
+
Before writing HTML/CSS, define:
|
|
52
|
+
- Empty states (what if the data array is empty?)
|
|
53
|
+
- Loading states (skeletons vs spinners).
|
|
54
|
+
- Error states (inline validation vs toast notifications).
|
|
55
|
+
- Overflow states (what if the text is 100 characters long?).
|
|
56
|
+
|
|
57
|
+
### Step 4 — Implement with Accessibility (A11y)
|
|
58
|
+
Ensure the implementation includes:
|
|
59
|
+
- Proper semantic HTML (`<button>` instead of `<div onClick>`).
|
|
60
|
+
- ARIA labels where semantics fall short.
|
|
61
|
+
- Keyboard navigation support (focus states).
|
|
62
|
+
- Sufficient color contrast.
|
|
63
|
+
|
|
64
|
+
### Step 5 — Verify Responsive Behavior
|
|
65
|
+
Write the code to adapt gracefully across the breakpoints defined in `ui-ux.md`. Ensure touch targets are large enough on mobile.
|
|
66
|
+
|
|
67
|
+
### Step 6 — Define Verification Requirements
|
|
68
|
+
Use `testing.md` to decide how this will be validated.
|
|
69
|
+
Examples:
|
|
70
|
+
- Component tests (e.g., React Testing Library) asserting ARIA roles.
|
|
71
|
+
- Storybook stories for visual isolation.
|
|
72
|
+
|
|
73
|
+
## Quality Check
|
|
74
|
+
|
|
75
|
+
- Does it use hardcoded hex colors or arbitrary pixel values instead of the design system tokens?
|
|
76
|
+
- Is it accessible via keyboard only?
|
|
77
|
+
- Does it break layout on mobile screens?
|
|
78
|
+
- Are loading and error states handled gracefully?
|
|
79
|
+
- Is state managed at the correct architectural layer?
|
|
80
|
+
|
|
81
|
+
## Anti-Pattern
|
|
82
|
+
|
|
83
|
+
- Inventing new colors, fonts, padding, and any other relevant values that aren't in `ui-ux.md`.
|
|
84
|
+
- Writing `<div onClick={...}>` instead of semantic interactive elements.
|
|
85
|
+
- Ignoring loading/error states in asynchronous components.
|
|
86
|
+
- Coupling global state management (like Redux or Zustand) directly into low-level UI components.
|
|
87
|
+
|
|
88
|
+
## Output Contract
|
|
89
|
+
|
|
90
|
+
When using this skill, the output should include:
|
|
91
|
+
1. the project docs consulted (specifically the design system tokens)
|
|
92
|
+
2. the component API (props/inputs)
|
|
93
|
+
3. the implementation code (separated by state vs presentation if applicable)
|
|
94
|
+
4. the edge cases handled (loading, empty, error, overflow)
|
|
95
|
+
5. accessibility and responsive verification steps
|
|
96
|
+
|
|
97
|
+
## Neutral Prompt Shape
|
|
98
|
+
`@agent use ui-ux-design on [Target Theme/Tokens] focusing on [Specific Branding/Accessibility Goal].`
|
|
99
|
+
|
|
100
|
+
## Example Prompt
|
|
101
|
+
- "Implement this presentational card component using the project design tokens."
|
|
102
|
+
- "Review this stateful component for accessibility and responsive layout issues."
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: "wireframing"
|
|
3
|
+
description: "Project-aware expert-role for wireframing and prototyping. Reads project docs first, then translates requirements into structural UI flows, low-fidelity layouts, and component hierarchies without getting bogged down in visual design details."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# wireframing
|
|
7
|
+
|
|
8
|
+
Produces a project-aware, expert-level wireframe or prototype structure by reading the repository's project docs first, then applying a user-centric structural design methodology.
|
|
9
|
+
|
|
10
|
+
This skill bridges the gap between the Product Requirements Document (PRD) and the final UI/UX implementation. It focuses on layout, information architecture, user journeys, and component structure, deferring specific styling decisions to the UI/UX phase.
|
|
11
|
+
|
|
12
|
+
## Required Project Inputs
|
|
13
|
+
|
|
14
|
+
| Document | Why it matters |
|
|
15
|
+
| --- | --- |
|
|
16
|
+
| `docs/project-docs/foundation/prd.md` | Defines the user personas, core workflows, and required data points for the interface. |
|
|
17
|
+
| `docs/project-docs/development/ui-ux.md` | Provides the baseline component vocabulary (e.g., standard layouts, navigation patterns) to reuse. |
|
|
18
|
+
| `docs/project-docs/foundation/architecture.md` | Clarifies constraints on client-side vs server-side rendering and data availability. |
|
|
19
|
+
|
|
20
|
+
If the repository lacks a PRD for the feature being wireframed, call that out and define the user goals before attempting to draw layouts.
|
|
21
|
+
|
|
22
|
+
## When to Use
|
|
23
|
+
|
|
24
|
+
Use this skill when planning the structure of a new interface before committing to high-fidelity design or code.
|
|
25
|
+
|
|
26
|
+
| Boundary type | Typical artifacts |
|
|
27
|
+
| --- | --- |
|
|
28
|
+
| Page Layout | Grid structures, navigation placement, content zones. |
|
|
29
|
+
| User Flow | Multi-step wizards, checkout processes, onboarding journeys. |
|
|
30
|
+
| Component Hierarchy | Identifying which logical components are needed on a screen. |
|
|
31
|
+
| Information Architecture | Grouping related data, defining hierarchy of importance. |
|
|
32
|
+
|
|
33
|
+
## Procedure
|
|
34
|
+
|
|
35
|
+
### Step 1 — Extract User Goals
|
|
36
|
+
Extract from `prd.md`: What is the primary objective of the user on this screen? What are the secondary actions? What data must be visible for them to make decisions?
|
|
37
|
+
|
|
38
|
+
### Step 2 — Define the Information Architecture
|
|
39
|
+
Determine the hierarchy of information. The most critical data and primary calls-to-action (CTAs) must sit prominently (e.g., above the fold or in highly accessible areas). Group related information into logical sections or cards.
|
|
40
|
+
|
|
41
|
+
### Step 3 — Draft the Component Structure
|
|
42
|
+
Without writing CSS or final HTML, outline the required components.
|
|
43
|
+
For example:
|
|
44
|
+
- Navigation Header (Logo, User Menu)
|
|
45
|
+
- Hero Section (Primary Title, Main CTA)
|
|
46
|
+
- Data Grid (List of items with specific columns)
|
|
47
|
+
- Sidebar (Filters, Categories)
|
|
48
|
+
|
|
49
|
+
### Step 4 — Map the Interaction Flow
|
|
50
|
+
Define how the user navigates between states:
|
|
51
|
+
- What happens when a button is clicked? (Modal opens, navigation occurs, inline expansion).
|
|
52
|
+
- How are empty states represented?
|
|
53
|
+
- How are loading and error states handled structurally?
|
|
54
|
+
|
|
55
|
+
### Step 5 — Produce the Wireframe Representation
|
|
56
|
+
Generate a structural representation. This could be a text-based ASCII wireframe, a markdown-based component hierarchy tree, or a Mermaid state diagram representing the flow. Keep it strictly low-fidelity.
|
|
57
|
+
|
|
58
|
+
## Quality Check
|
|
59
|
+
|
|
60
|
+
- Is the primary call-to-action immediately obvious in the structure?
|
|
61
|
+
- Does the layout follow established patterns from `ui-ux.md`?
|
|
62
|
+
- Are edge cases (empty states, errors) accounted for in the flow?
|
|
63
|
+
- Is the information hierarchy logical and aligned with the PRD?
|
|
64
|
+
- Is the structure free of distracting styling details (colors, exact fonts)?
|
|
65
|
+
|
|
66
|
+
## Anti-Pattern
|
|
67
|
+
|
|
68
|
+
- Focusing on colors, typography, or exact pixel padding during the wireframing stage.
|
|
69
|
+
- Designing layouts that assume perfect, fully populated data at all times.
|
|
70
|
+
- Creating disjointed screens without defining the navigation flow between them.
|
|
71
|
+
- Ignoring accessibility concerns regarding logical reading order.
|
|
72
|
+
|
|
73
|
+
## Output Contract
|
|
74
|
+
|
|
75
|
+
When using this skill, the output should include:
|
|
76
|
+
1. the project docs consulted and user goals assumed
|
|
77
|
+
2. the proposed information architecture and data hierarchy
|
|
78
|
+
3. a structural wireframe (ASCII, Markdown list, or Diagram)
|
|
79
|
+
4. defined interaction flows between states
|
|
80
|
+
5. identified edge cases (empty, loading, error states)
|
|
81
|
+
|
|
82
|
+
## Neutral Prompt Shape
|
|
83
|
+
`@agent use wireframing on [Target Feature/Page] focusing on [Specific User Journey].`
|
|
84
|
+
|
|
85
|
+
## Example Prompt
|
|
86
|
+
- "Create a structural wireframe for the new user dashboard."
|
|
87
|
+
- "Map out the component hierarchy and interaction flow for the checkout process."
|
|
88
|
+
- "Draft a low-fidelity layout for the data analytics page."
|
package/package.json
CHANGED
package/src/engine/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const { getWorkflow, listWorkflows } = require('./workflow-registry');
|
|
2
|
+
const { listSkills } = require('./skill-registry');
|
|
2
3
|
const { findRepoRoot, readConfig } = require('./state');
|
|
3
4
|
const { listSupportedRuntimes } = require('./runtime-adapters');
|
|
4
5
|
const { SUPPORTED_AGENT_IDS, doctor, initProject, readProjectManifest, removeProject } = require('./install');
|
|
@@ -9,6 +10,7 @@ module.exports = {
|
|
|
9
10
|
findRepoRoot,
|
|
10
11
|
getWorkflow,
|
|
11
12
|
initProject,
|
|
13
|
+
listSkills,
|
|
12
14
|
listSupportedRuntimes,
|
|
13
15
|
listWorkflows,
|
|
14
16
|
readConfig,
|
package/src/engine/install.js
CHANGED
|
@@ -4,7 +4,7 @@ const { version: EHA_PACKAGE_VERSION } = require('../../package.json');
|
|
|
4
4
|
|
|
5
5
|
const { listWorkflows } = require('./workflow-registry');
|
|
6
6
|
const { listSkills } = require('./skill-registry');
|
|
7
|
-
const { getRuntimeAdapter, listSupportedRuntimes } = require('./runtime-adapters');
|
|
7
|
+
const { getRuntimeAdapter, listSupportedRuntimes, SUPPORTED_AGENT_IDS } = require('./runtime-adapters');
|
|
8
8
|
const {
|
|
9
9
|
ensureDir,
|
|
10
10
|
getBundledAssetPath,
|
|
@@ -18,8 +18,6 @@ const {
|
|
|
18
18
|
writeText,
|
|
19
19
|
} = require('./state');
|
|
20
20
|
|
|
21
|
-
const SUPPORTED_AGENT_IDS = ['claude', 'copilot', 'antigravity'];
|
|
22
|
-
|
|
23
21
|
function resolveAgentId(agentId) {
|
|
24
22
|
const normalized = String(agentId || '').trim().toLowerCase();
|
|
25
23
|
if (!SUPPORTED_AGENT_IDS.includes(normalized)) {
|
|
@@ -5,6 +5,8 @@ const path = require('node:path');
|
|
|
5
5
|
|
|
6
6
|
const { getBundledAssetPath } = require('./state');
|
|
7
7
|
|
|
8
|
+
const SUPPORTED_AGENT_IDS = ['claude', 'copilot', 'antigravity'];
|
|
9
|
+
|
|
8
10
|
// Compact EHA rules embedded in every generated command file so the agent
|
|
9
11
|
// has all structural context without needing any external file reference.
|
|
10
12
|
const EHA_COMPACT_RULES = `## EHA Project Doc Rules
|
|
@@ -12,12 +14,12 @@ const EHA_COMPACT_RULES = `## EHA Project Doc Rules
|
|
|
12
14
|
**4-Layer Taxonomy.** All project docs live under \`docs/project-docs/\`:
|
|
13
15
|
- \`foundation/\` — prd, architecture, workflow, status, phases, changelog, feature-inventory
|
|
14
16
|
- \`operations/\` — ci-cd, production-runbook, governance, compliance, observability, security
|
|
15
|
-
- \`
|
|
17
|
+
- \`development/\` — testing, api-contract, database, ui-ux, error-handling, internationalization
|
|
16
18
|
- \`technical-guidelines/\` — domain-specific cross-cutting rules (API, database, logging, etc.)
|
|
17
19
|
|
|
18
20
|
**Legacy/Reference Docs:** Treat folders named \`archive/\`, \`docs-legacy/\`, or \`reference/\` as secondary migration input only, never as authoritative active truth.
|
|
19
21
|
|
|
20
|
-
**Mandatory core docs:** \`index.md\`, \`getting-started.md\`, \`foundation/prd.md\`, \`foundation/architecture.md\`, \`foundation/workflow.md\`, \`foundation/status.md\`, \`foundation/phases.md\`, \`operations/ci-cd.md\`, \`operations/production-runbook.md\`, \`
|
|
22
|
+
**Mandatory core docs:** \`index.md\`, \`getting-started.md\`, \`foundation/prd.md\`, \`foundation/architecture.md\`, \`foundation/workflow.md\`, \`foundation/status.md\`, \`foundation/phases.md\`, \`operations/ci-cd.md\`, \`operations/production-runbook.md\`, \`development/testing.md\`, \`development/api-contract.md\`, \`development/database.md\`, \`development/ui-ux.md\`.
|
|
21
23
|
|
|
22
24
|
**Authority order:** project docs → codebase → agent judgment. When docs conflict, the owning doc wins. When code and docs conflict and authority is unclear, surface the conflict and ask the user — do not guess.
|
|
23
25
|
|
|
@@ -27,7 +29,7 @@ const EHA_COMPACT_RULES = `## EHA Project Doc Rules
|
|
|
27
29
|
- Vision, personas, requirements → \`foundation/prd.md\`
|
|
28
30
|
- Stack and architecture → \`foundation/architecture.md\`
|
|
29
31
|
- Dev loop and PR process → \`foundation/workflow.md\`
|
|
30
|
-
- Verification commands and quality gates → \`
|
|
32
|
+
- Verification commands and quality gates → \`development/testing.md\`
|
|
31
33
|
- Execution plan and progress → \`foundation/status.md\`
|
|
32
34
|
- Sprint tracking and backlogs → \`foundation/phases.md\`
|
|
33
35
|
- Optional doc inventory → \`index.md\`
|
|
@@ -66,7 +68,7 @@ function loadRuleContent(agentId) {
|
|
|
66
68
|
let content = fs.readFileSync(rulePath, 'utf8').replace(/^\n+/, '');
|
|
67
69
|
|
|
68
70
|
if (agentId) {
|
|
69
|
-
const agentsToFilter =
|
|
71
|
+
const agentsToFilter = SUPPORTED_AGENT_IDS.filter(a => a !== agentId.toLowerCase());
|
|
70
72
|
for (const a of agentsToFilter) {
|
|
71
73
|
const regex = new RegExp(`^\\s*-\\s*\\*\\*${a}.*$\\n?`, 'gmi');
|
|
72
74
|
content = content.replace(regex, '');
|
|
@@ -316,4 +318,5 @@ function listSupportedRuntimes() {
|
|
|
316
318
|
module.exports = {
|
|
317
319
|
getRuntimeAdapter,
|
|
318
320
|
listSupportedRuntimes,
|
|
321
|
+
SUPPORTED_AGENT_IDS,
|
|
319
322
|
};
|