Skip to content

Commit 50120a5

Browse files
authored
Merge pull request #182 from bitovi/add-todo-to-validate-implementation-skill
2 parents 1caf964 + 98a134d commit 50120a5

File tree

5 files changed

+216
-229
lines changed

5 files changed

+216
-229
lines changed

.github/agents/generate-feature.agent.md

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,60 @@ Provide a Jira ticket number as input to this agent.
2525

2626
You are a senior software engineer implementing a feature that automates the full processing of Jira tickets using multiple MCP (Model Context Protocol) servers. Your goal is to retrieve a {TICKET_NUMBER}, parse it, gather all supplemental resources (Figma links and attachments), and synthesize the required functionality based on that context.
2727

28-
### Step 0: Read Repository Skills (Required Before All Other Steps)
28+
### Step 0: Create Feature Implementation Todo List
29+
30+
Use `manage_todo_list` to create a checklist before starting implementation.
31+
32+
```javascript
33+
manage_todo_list({
34+
todoList: [
35+
{
36+
id: 1,
37+
title: 'Read repository skills',
38+
status: 'not-started'
39+
},
40+
{
41+
id: 2,
42+
title: 'Retrieve Jira ticket',
43+
status: 'not-started'
44+
},
45+
{
46+
id: 3,
47+
title: 'Parse ticket content for Figma links and attachments',
48+
status: 'not-started'
49+
},
50+
{
51+
id: 4,
52+
title: 'Gather supplementary information (Figma/attachments)',
53+
status: 'not-started'
54+
},
55+
{
56+
id: 5,
57+
title: 'Synthesize and recreate ticket context',
58+
status: 'not-started'
59+
},
60+
{
61+
id: 6,
62+
title: 'Extract behavioral requirements table',
63+
status: 'not-started'
64+
},
65+
{
66+
id: 7,
67+
title: 'Implement ticket logic',
68+
status: 'not-started'
69+
},
70+
{
71+
id: 8,
72+
title: 'Run validation workflow',
73+
status: 'not-started'
74+
}
75+
]
76+
})
77+
```
78+
79+
Mark each task as `in-progress` before starting it, complete the work, then mark it `completed` immediately. Do not batch completion updates.
80+
81+
### Step 1: Read Repository Skills (Required Before All Other Steps)
2982

3083
Before any implementation, read all skills in `.github/skills/`.
3184

@@ -36,23 +89,23 @@ Output the following table summarizing what you found:
3689
|------------|-----------|------------------------|-------------------|
3790
| ... | ... | ... | ... |
3891

39-
**Do not proceed to Step 1 until you have output this table.**
92+
**Do not proceed to Step 2 until you have output this table.**
4093

41-
### Step 1: Retrieve the {TICKET_NUMBER}
94+
### Step 2: Retrieve the {TICKET_NUMBER}
4295

4396
1. Accept a `{TICKET_NUMBER}` as input
4497
2. Use the Atlassian MCP Server to fetch the full {TICKET_NUMBER} details, including:
4598
- Description
4699
- Metadata
47100
- Any fields that may contain Figma links or attachments
48101

49-
### Step 2: Parse the Ticket Content
102+
### Step 3: Parse the Ticket Content
50103

51104
Scan the description and comments for:
52105
- Figma links (e.g. `https://www.figma.com/file/...`)
53106
- Any references to file attachments
54107

55-
### Step 3: Gather Supplementary Information
108+
### Step 4: Gather Supplementary Information
56109

57110
**If Figma links are detected:**
58111
- Use the Figma MCP Server to retrieve the following information:
@@ -69,14 +122,14 @@ Scan the description and comments for:
69122
**If attachments are referenced:**
70123
- Use the Bitovi MCP Server to retrieve all {TICKET_NUMBER} ticket attachments
71124

72-
### Step 4: Synthesize and Recreate the Ticket Context
125+
### Step 5: Synthesize and Recreate the Ticket Context
73126

74127
1. Structure all fetched information (Figma data + attachments) into a coherent format
75128
2. Ensure attachments are inserted in the correct location in the processed ticket structure:
76129
- After relevant sections
77130
- Under specific sub-tasks/comments (if applicable)
78131

79-
### Step 4.5: Extract Behavioral Requirements
132+
### Step 6: Extract Behavioral Requirements
80133

81134
Before implementing, analyze acceptance criteria and extract interaction behaviors into a table.
82135

@@ -97,7 +150,7 @@ Output the following table:
97150
- When does data fetching occur?
98151

99152

100-
### Step 5: Implement the Ticket Logic
153+
### Step 7: Implement the Ticket Logic
101154

102155
Implement the functionality described in the enriched ticket content while following these guidelines:
103156

@@ -115,13 +168,13 @@ Implement the functionality described in the enriched ticket content while follo
115168
- Replicate the structure and spacing as shown, using raw HTML elements if necessary instead of forcing design system components
116169
- Do not add containers, headers, wrappers, or other elements not present in the design reference
117170

118-
### Step 6: Validation Before Completion
171+
### Step 8: Validation Before Completion
119172

120-
Before marking complete, validate the implementation following the validation skill workflow.
173+
Read `.github/skills/validate-implementation/SKILL.md` and execute its workflow.
121174

122175
## Expected Output
123176

124-
1. A skills assessment table (Step 0)
177+
1. A skills assessment table (Step 1)
125178
2. Complete ticket details with all gathered resources
126179
3. Implemented functionality matching the ticket requirements
127180
4. Code that follows project conventions and architecture patterns
Lines changed: 116 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
name: validate-implementation
3-
description: Validate implementations for runtime errors, accessibility, and API compliance. Use when reviewing implementations, syncing designs, or auditing visual accuracy before committing code.
3+
description: Validate implementations for runtime errors and proper functionality. Use when reviewing implementations, syncing designs, or auditing before committing code.
44
---
55

66
# Skill: Validate Implementation
77

8-
This skill validates code implementations before marking features complete to catch runtime errors, accessibility issues, and API violations.
8+
This skill validates code implementations before marking features complete to catch runtime errors, test failures, and browser console issues.
99

1010
## When to Use
1111

@@ -18,11 +18,72 @@ Use before committing feature implementations, especially:
1818
## What This Skill Does
1919

2020
1. Runs static analysis (TypeScript and ESLint)
21-
2. Checks browser console for runtime errors and warnings
22-
3. Identifies common runtime errors automatically
23-
4. Checks accessibility compliance for dialogs, selects, and forms
24-
5. Runs automated test suite (unit and E2E)
25-
6. Validates API usage patterns
21+
2. Runs automated test suite
22+
3. Uses Playwright MCP to validate implementation in the browser
23+
4. Checks browser console for runtime errors and warnings
24+
25+
## Step 0: Create Validation Todo List
26+
27+
Use `manage_todo_list` to create a checklist before starting validation.
28+
29+
```javascript
30+
manage_todo_list({
31+
todoList: [
32+
{
33+
id: 1,
34+
title: 'Run TypeScript type checking',
35+
status: 'not-started'
36+
},
37+
{
38+
id: 2,
39+
title: 'Run ESLint checks',
40+
status: 'not-started'
41+
},
42+
{
43+
id: 3,
44+
title: 'Run unit tests',
45+
status: 'not-started'
46+
},
47+
{
48+
id: 4,
49+
title: 'Activate Playwright MCP tools',
50+
status: 'not-started'
51+
},
52+
{
53+
id: 5,
54+
title: 'Navigate to feature page',
55+
status: 'not-started'
56+
},
57+
{
58+
id: 6,
59+
title: 'Take accessibility snapshot',
60+
status: 'not-started'
61+
},
62+
{
63+
id: 7,
64+
title: 'Test user interactions',
65+
status: 'not-started'
66+
},
67+
{
68+
id: 8,
69+
title: 'Verify expected behavior',
70+
status: 'not-started'
71+
},
72+
{
73+
id: 9,
74+
title: 'Check browser console messages',
75+
status: 'not-started'
76+
},
77+
{
78+
id: 10,
79+
title: 'Document validation results',
80+
status: 'not-started'
81+
}
82+
]
83+
})
84+
```
85+
86+
Mark each task as `in-progress` before starting it, complete the work, then mark it `completed` immediately. Do not batch completion updates.
2687

2788
## Validation Steps
2889

@@ -36,44 +97,44 @@ npm run lint
3697

3798
Fix any errors before proceeding.
3899

39-
### 2. Browser Console Check
100+
### 2. Automated Tests
40101

41-
Start dev server and check console:
102+
Run unit tests:
42103
```bash
43-
npm run dev
104+
npm test
44105
```
45106

46-
1. Open browser DevTools Console
47-
2. Navigate to the feature
48-
3. Check for errors (red), warnings (yellow), or unexpected logs
49-
4. Fix any errors found before proceeding
107+
Fix any test failures before proceeding.
50108

51-
### 3. Accessibility Checks
109+
### 3. Playwright MCP Browser Validation
52110

53-
#### Dialog/Modal Components
54-
Verify:
55-
- DialogTitle is present (or wrapped with VisuallyHidden)
56-
- DialogDescription is present (or aria-describedby attribute)
57-
- Proper ARIA labels for screen readers
111+
Activate Playwright MCP tools and validate the feature in the browser:
58112

59-
#### Select Components
60-
Verify:
61-
- No empty string values in options
62-
- Use placeholder for "no selection" state
63-
- All selects have proper labels
113+
1. Activate web interaction tools if not already available
114+
2. Navigate to the feature page
115+
3. Interact with the implementation (click, type, select, etc.)
116+
4. Verify expected behavior occurs
117+
5. Document any issues found
118+
119+
Example workflow:
120+
```
121+
1. Navigate to feature page
122+
2. Take accessibility snapshot to understand page structure
123+
3. Perform user interactions (click buttons, fill forms, etc.)
124+
4. Verify state changes and UI updates
125+
5. Take screenshot if needed for documentation
126+
```
64127

65-
#### Form Inputs
66-
Verify:
67-
- All inputs have labels (visible or aria-label)
68-
- Error messages are accessible
128+
### 4. Browser Console Check
69129

70-
### 4. Automated Tests
130+
Check console for errors and warnings:
71131

72-
Run tests and fix failures:
73-
```bash
74-
npm test
75-
npm run test:e2e
76-
```
132+
1. Use Playwright MCP `mcp_playwright_browser_console_messages` with level "info"
133+
2. Review output for:
134+
- Errors (red): Critical issues that must be fixed
135+
- Warnings (yellow): Issues that should be addressed
136+
- Unexpected logs: Debug statements that should be removed
137+
3. Fix any errors found before proceeding
77138

78139
## Quick Checklist
79140

@@ -82,51 +143,34 @@ Complete steps in order. Cannot proceed to next step until previous step is docu
82143
```markdown
83144
- [ ] npm run typecheck passes
84145
- [ ] npm run lint passes
85-
- [ ] npm run dev started
86-
- [ ] Browser console opened and checked
146+
- [ ] npm test passes
147+
- [ ] Playwright MCP browser validation completed:
148+
Feature page: ___
149+
User interactions tested: ___
150+
Expected behavior verified: ___
151+
- [ ] Browser console checked via Playwright MCP
87152
- [ ] Browser console output documented:
88153
Errors (red): ___
89154
Warnings (yellow): ___
90155
- [ ] Zero browser console errors
91-
- [ ] npm test passes
92-
- [ ] npm run test:e2e passes (if applicable)
93156
```
94157

95158
Validation is complete only when all items above are checked in sequence.
96159

97-
## Examples
98-
99-
### Missing DialogTitle
160+
## Example Usage
100161

101-
Before:
102-
```tsx
103-
<Dialog open={open} onOpenChange={onOpenChange}>
104-
<DialogHeader type="Close Only" onClose={() => onOpenChange(false)} />
105-
<FiltersList filters={filters} title={title} className="w-full" />
106-
</Dialog>
107-
```
108-
109-
After:
110-
```tsx
111-
<Dialog open={open} onOpenChange={onOpenChange}>
112-
<DialogHeader type="Close Only" onClose={() => onOpenChange(false)} />
113-
<DialogTitle className="sr-only">{title}</DialogTitle>
114-
<DialogDescription>
115-
Filter the list by selecting options below and clicking Apply.
116-
</DialogDescription>
117-
<FiltersList filters={filters} title={title} className="w-full" />
118-
</Dialog>
119-
```
162+
### Validating a Dialog Component
120163

121-
### Empty String in Select
122-
123-
Before:
124-
```tsx
125-
options: [{ value: '', label: 'None selected' }, { value: 'a', label: 'Option A' }]
126-
```
127-
128-
After:
129-
```tsx
130-
options: [{ value: 'a', label: 'Option A' }]
131-
<SelectValue placeholder="None selected" />
164+
```markdown
165+
Validation for FilterDialog component:
166+
167+
- [x] npm run typecheck passes
168+
- [x] npm run lint passes
169+
- [x] npm test passes
170+
- [x] Playwright MCP browser validation completed
171+
- [x] Browser console checked via Playwright MCP
172+
- [x] Browser console output documented:
173+
Errors (red): 0
174+
Warnings (yellow): 0
175+
- [x] Zero browser console errors
132176
```

0 commit comments

Comments
 (0)