@onuraslan/sdd 1.0.5
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/LICENSE +21 -0
- package/README.md +184 -0
- package/bin/sdd.js +9 -0
- package/cli/index.js +74 -0
- package/cli/install.js +156 -0
- package/cli/prompts.js +98 -0
- package/cli/skills.js +56 -0
- package/cli/targets.js +69 -0
- package/package.json +23 -0
- package/sdd/plugin.json +10 -0
- package/sdd/skills/chicago-tdd/SKILL.md +26 -0
- package/sdd/skills/deep-spec/SKILL.md +69 -0
- package/sdd/skills/deep-spec/spec-format.md +32 -0
- package/sdd/skills/feature-implementer/SKILL.md +48 -0
- package/sdd/skills/feature-implementer/reference/task-implementer.md +5 -0
- package/sdd/skills/implementer/SKILL.md +11 -0
- package/sdd/skills/prd-test-writer/SKILL.md +86 -0
- package/sdd/skills/prd-test-writer/references/user-story-test-writer-prompt.md +12 -0
- package/sdd/skills/prd-to-task/SKILL.md +51 -0
- package/sdd/skills/prd-to-task/reference/ascii-mock-format.md +67 -0
- package/sdd/skills/prd-to-task/reference/feature-template.md +20 -0
- package/sdd/skills/prd-to-task/reference/task-template.md +63 -0
- package/sdd/skills/spec-to-prd/SKILL.md +76 -0
- package/sdd/skills/spec-to-prd/references/mapping-guide.md +95 -0
- package/sdd/skills/spec-to-prd/references/prd-format.md +122 -0
- package/sdd/skills/workflow-generator/SKILL.md +60 -0
- package/sdd/skills/workflow-generator/reference/workflow-bug-fix-backend.md +35 -0
- package/sdd/skills/workflow-generator/reference/workflow-bug-fix-frontend.md +34 -0
- package/sdd/skills/workflow-generator/reference/workflow-enhancement-backend.md +35 -0
- package/sdd/skills/workflow-generator/reference/workflow-enhancement-frontend.md +34 -0
- package/sdd/skills/workflow-generator/reference/workflow-feature-development-backend.md +105 -0
- package/sdd/skills/workflow-generator/reference/workflow-feature-frontend-development.md +78 -0
- package/sdd-backend/plugin.json +10 -0
- package/sdd-backend/skills/backend-enhancement/SKILL.md +54 -0
- package/sdd-backend/skills/bug-fix-backend/SKILL.md +21 -0
- package/sdd-backend/skills/verify-with-curl/SKILL.md +8 -0
- package/sdd-frontend/.mcp.json +8 -0
- package/sdd-frontend/plugin.json +10 -0
- package/sdd-frontend/skills/bug-fix-frontend/SKILL.md +15 -0
- package/sdd-frontend/skills/feature-e2e-verifier/SKILL.md +64 -0
- package/sdd-frontend/skills/feature-e2e-verifier/reference/e2e-verifier.md +17 -0
- package/sdd-frontend/skills/frontend-enhancement/SKILL.md +44 -0
- package/sdd-frontend/skills/git-cleanup-playwright-artifacts/SKILL.md +7 -0
- package/sdd-frontend/skills/ui-heuristic-click-audit/SKILL.md +168 -0
- package/sdd-frontend/skills/ui-heuristic-click-audit/references/checklist.md +72 -0
- package/sdd-frontend/skills/using-playwright-mcp/SKILL.md +7 -0
- package/sdd-frontend/skills/verify-with-playwright-mcp/SKILL.md +14 -0
- package/sdd-utility/plugin.json +10 -0
- package/sdd-utility/skills/ask-first/SKILL.md +30 -0
- package/sdd-utility/skills/buy-before-build/SKILL.md +11 -0
- package/sdd-utility/skills/code-slop-review/SKILL.md +134 -0
- package/sdd-utility/skills/code-slop-review/references/agent-prompt.md +110 -0
- package/sdd-utility/skills/code-slop-review/references/aggregate-and-report.md +62 -0
- package/sdd-utility/skills/code-slop-review/references/architecture-slop.md +126 -0
- package/sdd-utility/skills/code-slop-review/references/dead-code-slop.md +107 -0
- package/sdd-utility/skills/code-slop-review/references/error-handling-slop.md +101 -0
- package/sdd-utility/skills/code-slop-review/references/final-report-template.md +55 -0
- package/sdd-utility/skills/code-slop-review/references/fix-mode.md +68 -0
- package/sdd-utility/skills/code-slop-review/references/structural-slop.md +150 -0
- package/sdd-utility/skills/code-slop-review/references/test-slop.md +88 -0
- package/sdd-utility/skills/gap-analysis/SKILL.md +7 -0
- package/sdd-utility/skills/glossary-builder/SKILL.md +28 -0
- package/sdd-utility/skills/grounded-mode/SKILL.md +13 -0
- package/sdd-utility/skills/handoff/SKILL.md +67 -0
- package/sdd-utility/skills/handoff-resume/SKILL.md +15 -0
- package/sdd-utility/skills/init-feature/SKILL.md +63 -0
- package/sdd-utility/skills/init-feature/references/explorer-prompt.md +58 -0
- package/sdd-utility/skills/init-feature/references/prd-format.md +122 -0
- package/sdd-utility/skills/init-feature/references/prd-writer-prompt.md +23 -0
- package/sdd-utility/skills/using-glossary/SKILL.md +11 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sdd-frontend",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Frontend development skills for UI design, enhancement, and testing with Playwright.",
|
|
5
|
+
"author": {
|
|
6
|
+
"name":"Onur ASLAN"
|
|
7
|
+
},
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"homepage": "https://github.com/onur-aslan/sdd"
|
|
10
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: bug-fix-frontend
|
|
3
|
+
description: Fix frontend bugs by tracing the root cause and applying the smallest safe change.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
You are a senior frontend engineer. Your only job is to fix bugs — nothing else. When given a bug, trace it from symptom to root cause in the frontend codebase before touching any code, state your hypothesis in one sentence, then apply the smallest possible fix.
|
|
7
|
+
|
|
8
|
+
**Workflow:**
|
|
9
|
+
1. **Analyze** - Trace the bug to its root cause in the frontend (React components, state management, event handlers, CSS, etc.)
|
|
10
|
+
2. **Hypothesis** - State your root cause hypothesis in one sentence
|
|
11
|
+
3. **Fix** - Apply the smallest possible fix
|
|
12
|
+
4. **Verify** - After completing the changes, invoke the `verify-with-playwright-mcp` skill to validate and auto-fix any visual issues.
|
|
13
|
+
|
|
14
|
+
**Important:**
|
|
15
|
+
- If the bug involves backend API calls, verify the API response is correct before fixing frontend logic
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: feature-e2e-verifier
|
|
3
|
+
description: Executes E2E verification for each User Story by testing all its Acceptance Criteria (AC). Processes User Stories sequentially.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
You are an orchestrator agent that runs E2E verification on User Stories by testing their Acceptance Criteria. Your role is to read a list of User Stories and sequentially invoke the e2e-verifier agent for **one User Story at a time**, verifying **all ACs** within that User Story together.
|
|
7
|
+
|
|
8
|
+
# Workflow
|
|
9
|
+
|
|
10
|
+
## Step 1: Confirm Fullstack Setup and Present Verification Plan
|
|
11
|
+
|
|
12
|
+
Present the user with the following information in a single message:
|
|
13
|
+
|
|
14
|
+
1. **Fullstack Setup Confirmation**: Ask the user to confirm that the fullstack environment is running.
|
|
15
|
+
|
|
16
|
+
2. **User Stories to Verify**: Display the list of User Stories with their Acceptance Criteria.
|
|
17
|
+
|
|
18
|
+
Then ask the user to confirm if they want to proceed with the verification.
|
|
19
|
+
|
|
20
|
+
- If user confirms: Proceed to Step 2
|
|
21
|
+
- If user declines: Exit the skill
|
|
22
|
+
|
|
23
|
+
## Step 2: Find Next Pending User Story
|
|
24
|
+
|
|
25
|
+
Track which User Stories have been processed. Find the next User Story that hasn't been verified yet.
|
|
26
|
+
|
|
27
|
+
If all User Stories have been verified, report completion to the user and stop.
|
|
28
|
+
|
|
29
|
+
## Step 3: Invoke E2E-Verifier for One User Story
|
|
30
|
+
|
|
31
|
+
Spawn a fresh `general_purpose` subagent with prompt [reference/e2e-verifier.md](reference/e2e-verifier.md).
|
|
32
|
+
|
|
33
|
+
Pass the **current User Story** with **all its Acceptance Criteria** to the e2e-verifier agent.
|
|
34
|
+
|
|
35
|
+
**Example**: If verifying US-04, pass all 3 ACs from US-04 together. The e2e-verifier will test all ACs in that User Story in one run.
|
|
36
|
+
|
|
37
|
+
Wait for e2e-verifier to complete.
|
|
38
|
+
|
|
39
|
+
## Step 4: Track Results
|
|
40
|
+
|
|
41
|
+
After e2e-verifier completes:
|
|
42
|
+
1. Record the result: verified, fixed-and-verified, or unresolved issues
|
|
43
|
+
2. Record which ACs passed/failed for this User Story
|
|
44
|
+
3. Record any fixes applied
|
|
45
|
+
4. Continue to the next User Story
|
|
46
|
+
|
|
47
|
+
Repeat Steps 3-5 until all User Stories are verified.
|
|
48
|
+
|
|
49
|
+
# Principles
|
|
50
|
+
|
|
51
|
+
- **Fullstack-first**: Verify fullstack setup is running before any E2E test
|
|
52
|
+
- **AC-based verification**: Each User Story is verified by testing all its Acceptance Criteria together
|
|
53
|
+
- **One US at a time**: Process one User Story per e2e-verifier run (with all its ACs)
|
|
54
|
+
- **No parallel verifications**: Wait for each e2e-verifier to complete before starting the next
|
|
55
|
+
- **Track progress**: Keep a running list of verified User Stories and their AC results
|
|
56
|
+
|
|
57
|
+
# Input
|
|
58
|
+
- List of User Stories with their Acceptance Criteria (from context or file)
|
|
59
|
+
|
|
60
|
+
# Output
|
|
61
|
+
- Verification results for each User Story (all ACs tested together)
|
|
62
|
+
- Pass/fail status for each Acceptance Criterion
|
|
63
|
+
- List of fixes applied (if any)
|
|
64
|
+
- Final status: all User Stories verified OR unresolved issues with failure details
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
Task tool (general-purpose):
|
|
2
|
+
description: "E2E verifiy Task N: [task name]"
|
|
3
|
+
mcpServers:
|
|
4
|
+
- plugin:sdd-frontend:playwright
|
|
5
|
+
prompt:
|
|
6
|
+
You are an expert software engineer who verifies user story implementations using Playwright MCP Server. Given a user story with its Acceptance Criteria (AC) list, use Playwright MCP Server to perform E2E verification in the browser without writing any test files. You need to open a browser. When errors occur, apply fixes directly and continue verification.
|
|
7
|
+
|
|
8
|
+
**IMPORTANT**: Do NOT install any npm packages. Playwright MCP Server is already available - use its tools directly.
|
|
9
|
+
|
|
10
|
+
# Input
|
|
11
|
+
- User story with Acceptance Criteria (AC) list
|
|
12
|
+
- Frontend URL (to open in browser)
|
|
13
|
+
|
|
14
|
+
# Output
|
|
15
|
+
- Verified working feature (all ACs passed) OR
|
|
16
|
+
- Fixed issues and verified working feature OR
|
|
17
|
+
- Unresolved issues with verification failure details
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-enhancement
|
|
3
|
+
description: Guide frontend enhancement work through interview and UI planning.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Workflow
|
|
8
|
+
|
|
9
|
+
### Step 1. Interview
|
|
10
|
+
|
|
11
|
+
Announce: `Current Step: Step 1 Interview Next Step: Step 2 Enhance`
|
|
12
|
+
|
|
13
|
+
Interview me relentlessly about every aspect of this plan until we reach a shared understanding. Walk down each branch of the design tree, resolving dependencies between decisions one-by-one. Ask very detailed design questions. Expose hidden assumptions. Ask the questions one at a time. Do not use AskUserQuestion Tool. Provide Ascii Mock for each options of a question and your recommended answer.
|
|
14
|
+
|
|
15
|
+
After interview present a detailed plan in the following format:
|
|
16
|
+
|
|
17
|
+
```markdown
|
|
18
|
+
# Plan Format
|
|
19
|
+
|
|
20
|
+
## ASCII Mock Preview (Before/After)
|
|
21
|
+
|
|
22
|
+
[Visual comparison using ASCII Mock Preview]
|
|
23
|
+
|
|
24
|
+
## Components Affected
|
|
25
|
+
|
|
26
|
+
- [Component/File path 1]
|
|
27
|
+
- [Component/File path 2]
|
|
28
|
+
|
|
29
|
+
## Views Affected
|
|
30
|
+
|
|
31
|
+
- [View/Page path 1]
|
|
32
|
+
- [View/Page path 2]
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
**Wait for user confirmation** on the plan before proceeding to Step 2.
|
|
37
|
+
|
|
38
|
+
### Step 2. Enhance
|
|
39
|
+
|
|
40
|
+
Announce: `Current Step: Step 2 Enhance Next Step: Done`
|
|
41
|
+
|
|
42
|
+
Make the UI change according to plan following frontend best practices. Ensure the build passes without errors after completing the changes.
|
|
43
|
+
|
|
44
|
+
After completing the changes, invoke the `verify-with-playwright-mcp` skill to validate and auto-fix any visual issues.
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: git-cleanup-playwright-artifacts
|
|
3
|
+
description: Find and remove Playwright session artifacts safely after confirmation.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Find the playwright artifacts visible in `git diff` from this session, report them to the user, and ask before deleting. If the user confirms, remove them with `git clean` .
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ui-heuristic-click-audit
|
|
3
|
+
description: Audit the UI by discovering clickable elements and checking their behavior heuristically.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# UI Heuristic Click Audit
|
|
8
|
+
|
|
9
|
+
Three-phase pipeline: **discover** every clickable element → **capture**
|
|
10
|
+
post-click screenshots → **score** each screenshot against a fixed
|
|
11
|
+
checklist → **aggregate** into one report with fix suggestions.
|
|
12
|
+
|
|
13
|
+
Requires: subagent/Task capability (Claude Code or Cowork). Also requires
|
|
14
|
+
`playwright-mcp` **unless** the user already supplies a ready screenshot
|
|
15
|
+
directory, in which case Steps 1-2 are skipped and no browser tool is
|
|
16
|
+
needed.
|
|
17
|
+
|
|
18
|
+
## Before starting
|
|
19
|
+
|
|
20
|
+
**Check for existing screenshots first:**
|
|
21
|
+
- Look in `docs/ui-audit/images/` for any `.png` or `.jpg` files.
|
|
22
|
+
- **If screenshots exist:** Skip Step 1 and Step 2 entirely. Go straight to Step 3, scoring every image file found in that directory.
|
|
23
|
+
- **If no screenshots exist:** Ask the user for:
|
|
24
|
+
- Base URL of the running app (must already be running / reachable)
|
|
25
|
+
- Pages/routes to include or exclude
|
|
26
|
+
|
|
27
|
+
Output directory structure:
|
|
28
|
+
```
|
|
29
|
+
docs/ui-audit/
|
|
30
|
+
├── discovered_buttons.json (skip if screenshots were provided)
|
|
31
|
+
├── images/ (screenshots directory)
|
|
32
|
+
├── reports/
|
|
33
|
+
└── ui_audit_report.md (final deliverable)
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
If skipping to Step 3 (screenshots already exist), build the input list yourself:
|
|
37
|
+
for each image file in `docs/ui-audit/images/`, create an entry:
|
|
38
|
+
`{id: <filename without extension>, screenshot_path: <path>, label: <filename>, page_url: null, source_file: null}`.
|
|
39
|
+
Use this list as the input to Step 3.
|
|
40
|
+
|
|
41
|
+
## Step 1 — Discover clickable elements (one explore subagent)
|
|
42
|
+
|
|
43
|
+
**Skip this entire step if screenshots already exist in `docs/ui-audit/images/`.**
|
|
44
|
+
Go directly to Step 3.
|
|
45
|
+
|
|
46
|
+
Spawn **one** subagent (explore/general-purpose type) with this task:
|
|
47
|
+
|
|
48
|
+
> Scan the project codebase (components, pages, routes) and the rendered
|
|
49
|
+
> app if needed, and produce a JSON list of every clickable element:
|
|
50
|
+
> buttons, links styled as buttons, icon buttons, nav items, menu items.
|
|
51
|
+
> For each, capture: `id` (short slug), `label` (visible text or
|
|
52
|
+
> aria-label), `page_url` (route it appears on, relative to base URL),
|
|
53
|
+
> `selector_hint` (text content, aria-label, or data-testid — whatever is
|
|
54
|
+
> most reliable to click with Playwright), `source_file` (file:line if
|
|
55
|
+
> found in code, else null).
|
|
56
|
+
> Write the result to `docs/ui-audit/discovered_buttons.json` as a JSON array.
|
|
57
|
+
|
|
58
|
+
Wait for this subagent to finish before proceeding. If it finds 0 buttons,
|
|
59
|
+
stop and report that to the user rather than continuing.
|
|
60
|
+
|
|
61
|
+
## Step 2 — Click + screenshot each button (sequential subagents)
|
|
62
|
+
|
|
63
|
+
**Skip this entire step if screenshots already exist in `docs/ui-audit/images/`.**
|
|
64
|
+
Go directly to Step 3.
|
|
65
|
+
|
|
66
|
+
**Must run sequentially, one button at a time — never in parallel.** All
|
|
67
|
+
buttons share the same browser session/page state via playwright-mcp;
|
|
68
|
+
parallel subagents would race on the same browser and corrupt each
|
|
69
|
+
other's state.
|
|
70
|
+
|
|
71
|
+
For each entry in `docs/ui-audit/discovered_buttons.json`, in order, spawn a
|
|
72
|
+
general-purpose subagent with this task (fill in the button's fields):
|
|
73
|
+
|
|
74
|
+
> Using the playwright-mcp tool:
|
|
75
|
+
> 1. Navigate to `{base_url}{page_url}`.
|
|
76
|
+
> 2. Locate the element matching `{selector_hint}`.
|
|
77
|
+
> 3. Click it.
|
|
78
|
+
> 4. Wait briefly for the UI to settle (animations, network requests).
|
|
79
|
+
> 5. Take a screenshot and save it as `docs/ui-audit/images/{id}.png`.
|
|
80
|
+
> 6. Note in one sentence what happened after the click (navigated to new
|
|
81
|
+
> URL, opened modal, opened external link, no visible change, error).
|
|
82
|
+
> 7. If the click navigated to a new page or opened an external site,
|
|
83
|
+
> that's fine — screenshot the resulting state as-is.
|
|
84
|
+
> 8. Return a small JSON: `{id, screenshot_path, result_note, resulting_url}`.
|
|
85
|
+
>
|
|
86
|
+
> If the element can't be found or clicked, still record it with
|
|
87
|
+
> `result_note: "click failed: <reason>"` and skip the screenshot — do
|
|
88
|
+
> not stop the overall run.
|
|
89
|
+
|
|
90
|
+
Append each result to `docs/ui-audit/discovered_buttons.json` (add the result
|
|
91
|
+
fields to that button's entry) so progress is resumable.
|
|
92
|
+
|
|
93
|
+
**Resumability**: before spawning a subagent for a given button, check if
|
|
94
|
+
`docs/ui-audit/images/{id}.png` already exists — if so, skip it (already
|
|
95
|
+
done). This lets the whole pipeline be safely re-run after an
|
|
96
|
+
interruption.
|
|
97
|
+
|
|
98
|
+
## Step 3 — Score each screenshot (sequential subagents)
|
|
99
|
+
|
|
100
|
+
Read `references/checklist.md` once yourself (or pass its content into
|
|
101
|
+
each subagent's prompt) — it defines the 8 scorable criteria and the
|
|
102
|
+
scoring format.
|
|
103
|
+
|
|
104
|
+
For each screenshot in `docs/ui-audit/images/`, sequentially spawn a
|
|
105
|
+
general-purpose subagent with this task:
|
|
106
|
+
|
|
107
|
+
> View the image at `{screenshot_path}`. Score it against the checklist
|
|
108
|
+
> below. For each of the 8 criteria give `score` (0-10), `confidence`
|
|
109
|
+
> (high/medium/low), `issues` (bullets), and `fix` (concrete suggestion,
|
|
110
|
+
> referencing `{source_file}` if given). Compute `overall` as the average
|
|
111
|
+
> of the 8 scores. Identify the single lowest-scoring criterion as
|
|
112
|
+
> `top_issue`. Write the result as JSON to
|
|
113
|
+
> `docs/ui-audit/reports/{id}.json` with shape:
|
|
114
|
+
> `{id, label, page_url, overall, top_issue, criteria: [...]}`.
|
|
115
|
+
>
|
|
116
|
+
> [paste full checklist.md content here]
|
|
117
|
+
|
|
118
|
+
Screenshots can be scored sequentially or in small batches — unlike Step
|
|
119
|
+
2 there's no shared browser state, so this step can be parallelized if
|
|
120
|
+
the environment supports it well. Default to sequential unless the user
|
|
121
|
+
asks for speed and the environment handles parallel subagents reliably.
|
|
122
|
+
|
|
123
|
+
## Step 4 — Aggregate final report
|
|
124
|
+
|
|
125
|
+
After all `docs/ui-audit/reports/{id}.json` files exist, compile
|
|
126
|
+
`docs/ui-audit/ui_audit_report.md` yourself (no subagent needed — this is
|
|
127
|
+
simple aggregation):
|
|
128
|
+
|
|
129
|
+
```markdown
|
|
130
|
+
# UI Heuristic Audit Report
|
|
131
|
+
|
|
132
|
+
Generated: {date}. {N} clickable elements audited.
|
|
133
|
+
|
|
134
|
+
## Summary table
|
|
135
|
+
| Button | Page | Overall | Top issue |
|
|
136
|
+
|---|---|---|---|
|
|
137
|
+
| ... | ... | 6.4 | Color Contrast |
|
|
138
|
+
|
|
139
|
+
(sorted worst-to-best by overall score)
|
|
140
|
+
|
|
141
|
+
## Buttons that failed to click
|
|
142
|
+
- {id}: {result_note}
|
|
143
|
+
|
|
144
|
+
## Detail per button
|
|
145
|
+
### {label} ({page_url})
|
|
146
|
+

|
|
147
|
+
Overall: {overall}/10
|
|
148
|
+
|
|
149
|
+
| Criterion | Score | Confidence | Issue | Fix |
|
|
150
|
+
|---|---|---|---|---|
|
|
151
|
+
| Visual Hierarchy | 7 | high | ... | ... |
|
|
152
|
+
| ... | | | | |
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Sort the summary table worst-to-best so the user sees the biggest
|
|
158
|
+
problems first. Present the final report path to the user when done.
|
|
159
|
+
|
|
160
|
+
## Notes
|
|
161
|
+
|
|
162
|
+
- Out-of-scope heuristics (accessibility internals, form validation,
|
|
163
|
+
loading/empty states, multi-page consistency) are deliberately excluded
|
|
164
|
+
from scoring — see the note at the bottom of `references/checklist.md`.
|
|
165
|
+
Mention this limitation once in the final report, don't repeat it per
|
|
166
|
+
button.
|
|
167
|
+
- Keep a TodoList tracking buttons through discover → screenshot → score
|
|
168
|
+
so long runs (dozens of buttons) don't lose track of progress.
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# UI Heuristic Checklist (static-screenshot audit)
|
|
2
|
+
|
|
3
|
+
Core framing: for every criterion below, act like a UI/UX expert glancing
|
|
4
|
+
at the screenshot — what would they notice first, what would bother them,
|
|
5
|
+
what would they say should be different. Not a pixel-measuring tool, a
|
|
6
|
+
trained eye's first-pass judgment. Each criterion is just one angle of
|
|
7
|
+
that same expert glance.
|
|
8
|
+
|
|
9
|
+
Only criteria that are reliably scorable from a single static screenshot are
|
|
10
|
+
included. Interaction-dependent heuristics (keyboard nav, focus order,
|
|
11
|
+
inline validation, offline state, alt text) are intentionally excluded —
|
|
12
|
+
they require DOM/runtime inspection, not an image, and scoring them from a
|
|
13
|
+
screenshot produces false confidence.
|
|
14
|
+
|
|
15
|
+
For each criterion below, produce:
|
|
16
|
+
- `score`: 0-10
|
|
17
|
+
- `confidence`: high | medium | low
|
|
18
|
+
- `issues`: short bullet list of concrete problems seen in this image
|
|
19
|
+
- `fix`: concrete, actionable suggestion (component/CSS-level if possible)
|
|
20
|
+
|
|
21
|
+
## 1. Visual Hierarchy
|
|
22
|
+
Is there one clear primary focal point / primary CTA? Does the eye flow
|
|
23
|
+
logically (top-left → primary action, typical F/Z pattern)? Penalize
|
|
24
|
+
competing elements of equal visual weight.
|
|
25
|
+
|
|
26
|
+
## 2. Typography
|
|
27
|
+
≤3 font families. Clear size/weight distinction between heading and body.
|
|
28
|
+
Line length and size look readable at normal viewing distance.
|
|
29
|
+
|
|
30
|
+
## 3. Color Contrast
|
|
31
|
+
Text-to-background contrast looks like it meets WCAG AA (~4.5:1 for body
|
|
32
|
+
text, ~3:1 for large text/UI components). Status/state is not conveyed by
|
|
33
|
+
color alone (icon/label/pattern also present).
|
|
34
|
+
|
|
35
|
+
## 4. CTA Clarity
|
|
36
|
+
Primary action button uses a clear action verb ("Save changes", not
|
|
37
|
+
"Submit" or "OK" alone). No two CTAs of equal visual weight competing for
|
|
38
|
+
the same decision. Primary vs secondary buttons are visually distinct.
|
|
39
|
+
|
|
40
|
+
## 5. Layout
|
|
41
|
+
No overflow, clipped text, overlapping elements, or broken grid.
|
|
42
|
+
|
|
43
|
+
Is each component/menu/view placed where a UX expert would put it? Judge
|
|
44
|
+
like a UX reviewer: "this should be here, not there" — nav in the
|
|
45
|
+
conventional spot, controls near what they act on, nothing important
|
|
46
|
+
buried or blocking something else. Fix = say where it should move to.
|
|
47
|
+
|
|
48
|
+
## 6. Microcopy
|
|
49
|
+
Visible text is short, scannable, task-focused. No jargon or ambiguous
|
|
50
|
+
labels ("Continue" to what? "Yes" to what?).
|
|
51
|
+
|
|
52
|
+
## 7. Visual/Asset Quality
|
|
53
|
+
No broken images, pixelation, stretched/squished images, placeholder text
|
|
54
|
+
left in production ("Lorem ipsum", "TODO").
|
|
55
|
+
|
|
56
|
+
## 8. Above-the-Fold Priority
|
|
57
|
+
In the initial visible viewport (before scroll), is the primary value
|
|
58
|
+
proposition or primary CTA visible? Or is it buried below irrelevant
|
|
59
|
+
content?
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Explicitly out of scope for this audit (do not score, mark N/A)
|
|
64
|
+
Navigation flow correctness, form validation behavior, loading/empty/error
|
|
65
|
+
states, keyboard accessibility, focus indicators, alt text, multi-page
|
|
66
|
+
brand consistency (unless multiple screenshots of the same flow are
|
|
67
|
+
supplied). Note in the report that these require a separate
|
|
68
|
+
interaction-based or DOM-based audit.
|
|
69
|
+
|
|
70
|
+
## Overall score per screenshot
|
|
71
|
+
`overall = average of the 8 scores`, rounded to 1 decimal. Report
|
|
72
|
+
alongside the lowest-scoring criterion as the "top issue".
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: using-playwright-mcp
|
|
3
|
+
description: Run browser automation through Playwright MCP for user-requested UI actions.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Uses Playwright MCP tools to perform any browser automation task the user requests. This is a general-purpose Playwright automation skill - execute whatever browser actions the user needs. Test writing is out of scope.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: verify-with-playwright-mcp
|
|
3
|
+
description: >
|
|
4
|
+
Verifies work done in the current context using Playwright MCP tools. Auto-fixes
|
|
5
|
+
visual issues found. Does not write tests. Trigger when user says
|
|
6
|
+
"verify-with-playwright-mcp".
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
Verifies work done in the current context using Playwright MCP tools. Navigate to the page, take screenshots, compare against expected design, and auto-fix any visual issues discovered (layout, alignment, contrast, responsiveness). Repeat the snapshot → compare → fix loop until the UI matches the plan. This skill does NOT write tests - visual verification only.
|
|
10
|
+
|
|
11
|
+
When done, clean up screenshots:
|
|
12
|
+
```bash
|
|
13
|
+
git clean -f '*.png'
|
|
14
|
+
```
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ask-first
|
|
3
|
+
description: Maintain shared understanding through explicit approval before every task and any plan change.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# AskFirst
|
|
8
|
+
|
|
9
|
+
## Persistence
|
|
10
|
+
|
|
11
|
+
AskFirst is a persistent session mode. Once enabled, it remains active for the entire session until the user explicitly disables it (for example, by saying "stop askfirst" or "normal mode").
|
|
12
|
+
|
|
13
|
+
## While active
|
|
14
|
+
|
|
15
|
+
Before touching any file or running any state-changing command:
|
|
16
|
+
|
|
17
|
+
1. Briefly restate your understanding of the user's request.
|
|
18
|
+
2. Explain exactly what you intend to do.
|
|
19
|
+
3. Surface any assumptions, decisions, or open questions.
|
|
20
|
+
4. Wait for explicit approval before proceeding.
|
|
21
|
+
|
|
22
|
+
After approval, execute only the approved plan.
|
|
23
|
+
|
|
24
|
+
If, at any point, you determine that the approved plan must change for any reason, stop immediately, explain what changed, restate your updated understanding and overall plan, and wait for explicit approval before continuing.
|
|
25
|
+
|
|
26
|
+
Never perform work outside the last explicitly approved plan.
|
|
27
|
+
|
|
28
|
+
## Goal
|
|
29
|
+
|
|
30
|
+
Maintain a shared understanding with the user throughout the entire session. Every implementation must be based on an explicitly approved plan, and every plan change requires a new approval before proceeding.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: buy-before-build
|
|
3
|
+
description: Prefer industry best practices and proven solutions before building custom ones.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Buy Before Build
|
|
8
|
+
|
|
9
|
+
Before implementing a non-trivial feature, determine the current industry best practice for solving the problem. If a proven solution already exists, prefer adopting it over building a custom implementation unless project constraints or requirements justify otherwise. Briefly explain your reasoning.
|
|
10
|
+
|
|
11
|
+
**Principle:** Build differentiating product logic—not infrastructure that already exists.
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: code-slop-review
|
|
3
|
+
description: Review code quality across multiple layers and report issues clearly.
|
|
4
|
+
disable-model-invocation: true
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Code Slop Review
|
|
8
|
+
|
|
9
|
+
Code slop is code that compiles, passes tests, and quietly rots the codebase.
|
|
10
|
+
It looks polished — consistent naming, green CI, clean PR description — while
|
|
11
|
+
silently eroding architectural coherence.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Step 1 — Select Scan Scope
|
|
16
|
+
|
|
17
|
+
**Accepted argument formats — if the user provides any of these, use it directly:**
|
|
18
|
+
```
|
|
19
|
+
1 or "full" → full codebase
|
|
20
|
+
2 or "diff" → git diff (uncommitted changes)
|
|
21
|
+
3 or "mr" or "pr" → merge / pull request
|
|
22
|
+
4 or "commits" or "A..B" → commit range
|
|
23
|
+
A file path (e.g. src/auth.ts) → single file scope
|
|
24
|
+
A directory path (e.g. src/) → single directory scope
|
|
25
|
+
"fix" or "refactor" or "apply" → skip to Fix Mode directly
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**If no recognizable argument is given, ask exactly this before doing anything else:**
|
|
29
|
+
|
|
30
|
+
> What should I scan?
|
|
31
|
+
> 1. **Full codebase** — all source files in the project
|
|
32
|
+
> 2. **Git diff** — uncommitted changes (staged + unstaged)
|
|
33
|
+
> 3. **Merge / Pull Request** — changes introduced by a branch against its base
|
|
34
|
+
> 4. **Commit range** — changes between two specific commits
|
|
35
|
+
|
|
36
|
+
Wait for the user's answer. Do not start scanning until a scope is chosen.
|
|
37
|
+
|
|
38
|
+
**After scope is determined, produce a scope descriptor** — a concise string
|
|
39
|
+
that the explore agents will use to know what to scan. Examples:
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
scope: full codebase — all source files under ./src
|
|
43
|
+
scope: git diff HEAD — uncommitted changes
|
|
44
|
+
scope: MR diff — branch feature/auth → main (merge base: abc1234) — run: git diff abc1234..HEAD
|
|
45
|
+
scope: commits a1b2c3..d4e5f6 — run: git diff a1b2c3..d4e5f6
|
|
46
|
+
scope: single file — src/auth/login.ts
|
|
47
|
+
scope: directory — src/payments/
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## Step 2 — Prepare Output Directory
|
|
53
|
+
|
|
54
|
+
Create the output directory if it does not exist:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
mkdir -p docs/sdd/code-slop
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Determine which layers apply based on scope:
|
|
61
|
+
|
|
62
|
+
| Layer | Full | Diff (2/3/4) | Single file | Single dir |
|
|
63
|
+
|-------|------|--------------|-------------|------------|
|
|
64
|
+
| 1 — Structural | ✓ | ✓ | ✓ | ✓ |
|
|
65
|
+
| 2 — Tests | ✓ | ✓ | if test file found alongside source | ✓ |
|
|
66
|
+
| 3 — Error Handling | ✓ | ✓ | ✓ | ✓ |
|
|
67
|
+
| 4 — Architecture | ✓ | ✓ | ✗ | ✗ |
|
|
68
|
+
| 5 — Dead Code | ✓ | ✓ | ✓ | ✓ |
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Step 3 — Run Analysis
|
|
73
|
+
|
|
74
|
+
**For non-full-codebase scopes (diff, single file, directory):**
|
|
75
|
+
|
|
76
|
+
Skip explore agents. Use a single Explore task to scan for all slop types at once.
|
|
77
|
+
|
|
78
|
+
→ Read [references/agent-prompt.md](references/agent-prompt.md) and use the "For Non-Full-Codebase Scope" prompt.
|
|
79
|
+
|
|
80
|
+
Replace `<scope descriptor>` with the actual scope from Step 1 and launch the task.
|
|
81
|
+
|
|
82
|
+
Write output to: `docs/sdd/code-slop/diff-review.md`
|
|
83
|
+
|
|
84
|
+
**For full codebase scope:**
|
|
85
|
+
|
|
86
|
+
Spawn one explore agent per applicable layer. All agents run against the
|
|
87
|
+
**same scope descriptor from Step 1**. Launch all applicable agents in parallel —
|
|
88
|
+
do not wait for one to finish before starting the next.
|
|
89
|
+
|
|
90
|
+
→ Read [references/agent-prompt.md](references/agent-prompt.md) to get the prompt template.
|
|
91
|
+
|
|
92
|
+
For each applicable agent below, fill the template placeholders and launch:
|
|
93
|
+
|
|
94
|
+
| Agent | Layer Name | `<layer-reference-file>` | `<output-filename>` | Skip if |
|
|
95
|
+
|---|---|---|---|---|
|
|
96
|
+
| 1 | Structural Slop | `structural-slop.md` | `layer-1-structural.md` | — |
|
|
97
|
+
| 2 | Test Slop | `test-slop.md` | `layer-2-tests.md` | Layer 2 not applicable per Step 2. For single-file scope: check if a test file exists alongside the source before spawning. |
|
|
98
|
+
| 3 | Error Handling Slop | `error-handling-slop.md` | `layer-3-error-handling.md` | — |
|
|
99
|
+
| 4 | Architecture Slop | `architecture-slop.md` | `layer-4-architecture.md` | Layer 4 not applicable per Step 2 |
|
|
100
|
+
| 5 | Dead Code Slop | `dead-code-slop.md` | `layer-5-dead-code.md` | — |
|
|
101
|
+
|
|
102
|
+
Wait for all agents to complete before proceeding to Step 4.
|
|
103
|
+
Step 4 starts after all Task tool calls have returned — not before.
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## Step 4 — Aggregate and Produce Final Report
|
|
108
|
+
|
|
109
|
+
**For non-full-codebase scopes:**
|
|
110
|
+
Read `docs/sdd/code-slop/diff-review.md` and display the results to the user.
|
|
111
|
+
Skip aggregation — the single agent already produced the final report.
|
|
112
|
+
|
|
113
|
+
**For full codebase scope:**
|
|
114
|
+
→ Read [references/aggregate-and-report.md](references/aggregate-and-report.md) and follow its steps.
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Fix Mode
|
|
119
|
+
|
|
120
|
+
Triggered when the user says "fix", "refactor", or "apply" — either as an
|
|
121
|
+
initial argument (Step 1) or after the report is produced.
|
|
122
|
+
|
|
123
|
+
- If `docs/sdd/code-slop/report.md` exists (full codebase scan): read it and → Read [references/fix-mode.md](references/fix-mode.md).
|
|
124
|
+
- If `docs/sdd/code-slop/diff-review.md` exists (diff/file/dir scan): read it and → Read [references/fix-mode.md](references/fix-mode.md).
|
|
125
|
+
- If no report exists yet: run Steps 1–4 first to produce one, then enter Fix Mode.
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## Out of Scope
|
|
130
|
+
|
|
131
|
+
- Security vulnerability scanning — requires a dedicated audit
|
|
132
|
+
- Performance profiling — requires benchmark tooling
|
|
133
|
+
- Business logic correctness — requires domain knowledge
|
|
134
|
+
- Syntax errors — handled by linters and compilers
|