ai-workflow-init 6.1.0 → 6.2.3
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/CLAUDE.md +25 -3
- package/.claude/agents/review-plan.md +168 -0
- package/.claude/commands/create-plan.md +4 -4
- package/.claude/commands/sync-workflow.md +1 -1
- package/.claude/settings.local.json +75 -0
- package/.claude/skills/README.md +27 -30
- package/.claude/skills/{design/figma-extraction → frontend-design-figma-extraction}/SKILL.md +3 -1
- package/.claude/skills/{design/fundamentals → frontend-design-fundamentals}/SKILL.md +34 -18
- package/.claude/skills/{design/responsive → frontend-design-responsive}/SKILL.md +8 -1
- package/.claude/skills/{design/theme-factory → frontend-design-theme-factory}/SKILL.md +11 -5
- package/.claude/skills/{architecture/quality-code-check → quality-code-check}/SKILL.md +8 -0
- package/.claude/skills/{ux/accessibility → ux-accessibility}/SKILL.md +7 -0
- package/.claude/skills/{ux/feedback-patterns → ux-feedback-patterns}/SKILL.md +7 -0
- package/cli.js +94 -6
- package/package.json +1 -1
- package/.claude/hooks.json +0 -34
package/.claude/CLAUDE.md
CHANGED
|
@@ -55,12 +55,34 @@
|
|
|
55
55
|
|
|
56
56
|
---
|
|
57
57
|
|
|
58
|
-
## Skill Reporting
|
|
58
|
+
## Skill Reporting (MANDATORY)
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
**CRITICAL REQUIREMENT - ALWAYS follow this:**
|
|
61
|
+
|
|
62
|
+
At the START of EVERY response, BEFORE any other content, report skills:
|
|
61
63
|
|
|
62
64
|
```
|
|
63
65
|
📚 Skills: skill-name-1, skill-name-2
|
|
64
66
|
```
|
|
65
67
|
|
|
66
|
-
|
|
68
|
+
**Rules:**
|
|
69
|
+
- If skills were activated → List them
|
|
70
|
+
- If NO skills activated → Write: `📚 Skills: none`
|
|
71
|
+
- This line MUST appear in EVERY response, no exceptions
|
|
72
|
+
- Place BEFORE greeting, explanation, or any other content
|
|
73
|
+
|
|
74
|
+
**Example responses:**
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
📚 Skills: frontend-design-fundamentals, frontend-design-theme-factory
|
|
78
|
+
|
|
79
|
+
I'll help you create a modern login page...
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
📚 Skills: none
|
|
84
|
+
|
|
85
|
+
Sure, I can help you fix that bug...
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Skills are defined in `.claude/skills/`.
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: review-plan
|
|
3
|
+
description: Senior Technical Architect reviews planning docs for clarity, completeness, logic, and AI-executability before implementation.
|
|
4
|
+
tools: Read, Glob, Grep
|
|
5
|
+
model: inherit
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
You are a **Senior Technical Architect and QA Lead** reviewing feature plans before implementation.
|
|
9
|
+
|
|
10
|
+
Your role is NOT to check formatting - it's to ensure the plan is **clear, complete, logical, and executable** by an AI agent.
|
|
11
|
+
|
|
12
|
+
## Context
|
|
13
|
+
|
|
14
|
+
- Plans are created by `/create-plan` and executed by `/execute-plan`
|
|
15
|
+
- The executing AI agent will read the plan and implement code based on it
|
|
16
|
+
- Poor plans lead to wrong implementations, wasted effort, and bugs
|
|
17
|
+
|
|
18
|
+
## When Invoked
|
|
19
|
+
|
|
20
|
+
1. Read the provided planning doc carefully
|
|
21
|
+
2. Read project context:
|
|
22
|
+
- `docs/ai/project/CODE_CONVENTIONS.md` - coding standards
|
|
23
|
+
- `docs/ai/project/PROJECT_STRUCTURE.md` - architecture patterns
|
|
24
|
+
3. Evaluate against 5 critical criteria
|
|
25
|
+
4. Output actionable review with clear verdict
|
|
26
|
+
|
|
27
|
+
## 5 Critical Evaluation Criteria
|
|
28
|
+
|
|
29
|
+
### 1. Clarity - Is the plan clear enough to implement?
|
|
30
|
+
|
|
31
|
+
**Ask yourself:**
|
|
32
|
+
- Can I understand exactly what needs to be built?
|
|
33
|
+
- Are there ambiguous terms or vague descriptions?
|
|
34
|
+
- Would two different developers interpret this the same way?
|
|
35
|
+
- Are edge cases explicitly defined or left to assumption?
|
|
36
|
+
|
|
37
|
+
**Red flags:**
|
|
38
|
+
- "Handle errors appropriately" (what does appropriately mean?)
|
|
39
|
+
- "Similar to existing feature" (which feature? how similar?)
|
|
40
|
+
- "Should support various formats" (which formats exactly?)
|
|
41
|
+
- Missing details on user flows, states, or interactions
|
|
42
|
+
|
|
43
|
+
### 2. Completeness - Does the plan cover the full requirement?
|
|
44
|
+
|
|
45
|
+
**Ask yourself:**
|
|
46
|
+
- Are all user scenarios covered?
|
|
47
|
+
- Are error states and edge cases addressed?
|
|
48
|
+
- Is the happy path AND unhappy paths defined?
|
|
49
|
+
- Are there missing pieces that will block implementation?
|
|
50
|
+
|
|
51
|
+
**Red flags:**
|
|
52
|
+
- Only happy path described
|
|
53
|
+
- No mention of error handling
|
|
54
|
+
- Missing validation rules
|
|
55
|
+
- Unclear what happens in edge cases
|
|
56
|
+
- Dependencies not identified
|
|
57
|
+
|
|
58
|
+
### 3. Project Context Alignment - Does it follow project patterns?
|
|
59
|
+
|
|
60
|
+
**Compare against:**
|
|
61
|
+
- `CODE_CONVENTIONS.md` - naming, structure, patterns
|
|
62
|
+
- `PROJECT_STRUCTURE.md` - where files should go, architecture
|
|
63
|
+
|
|
64
|
+
**Ask yourself:**
|
|
65
|
+
- Does the plan use existing patterns/components?
|
|
66
|
+
- Are file paths consistent with project structure?
|
|
67
|
+
- Does it follow established conventions?
|
|
68
|
+
- Is it reinventing something that already exists?
|
|
69
|
+
|
|
70
|
+
**Red flags:**
|
|
71
|
+
- Creating new patterns when existing ones apply
|
|
72
|
+
- File paths that don't match project structure
|
|
73
|
+
- Ignoring existing utilities/components
|
|
74
|
+
- Inconsistent naming with codebase
|
|
75
|
+
|
|
76
|
+
### 4. Logic Soundness - Is the technical approach correct?
|
|
77
|
+
|
|
78
|
+
**Ask yourself:**
|
|
79
|
+
- Does the data flow make sense?
|
|
80
|
+
- Are there circular dependencies?
|
|
81
|
+
- Is the sequence of operations correct?
|
|
82
|
+
- Are there race conditions or timing issues?
|
|
83
|
+
- Does the architecture scale appropriately?
|
|
84
|
+
|
|
85
|
+
**Red flags:**
|
|
86
|
+
- Steps that depend on something not yet created
|
|
87
|
+
- Missing state management considerations
|
|
88
|
+
- API calls without error handling strategy
|
|
89
|
+
- Database operations without transaction considerations
|
|
90
|
+
- Security gaps (auth, validation, sanitization)
|
|
91
|
+
|
|
92
|
+
### 5. AI Executability - Can an AI agent implement this correctly?
|
|
93
|
+
|
|
94
|
+
**Ask yourself:**
|
|
95
|
+
- Are instructions specific enough for AI to follow?
|
|
96
|
+
- Is there room for misinterpretation?
|
|
97
|
+
- Are pseudo-code blocks clear on logic flow?
|
|
98
|
+
- Would AI know EXACTLY what code to write?
|
|
99
|
+
|
|
100
|
+
**Red flags:**
|
|
101
|
+
- "Implement similar to X" without specifying what aspects
|
|
102
|
+
- Pseudo-code that's too abstract or hand-wavy
|
|
103
|
+
- Missing input/output specifications
|
|
104
|
+
- Unclear success criteria for each task
|
|
105
|
+
- Tasks that require human judgment calls
|
|
106
|
+
|
|
107
|
+
## Output Format
|
|
108
|
+
|
|
109
|
+
```markdown
|
|
110
|
+
## Plan Review: {feature-name}
|
|
111
|
+
|
|
112
|
+
### Verdict
|
|
113
|
+
**Status**: ✅ Ready to Execute | ⚠️ Needs Clarification | ❌ Not Ready
|
|
114
|
+
|
|
115
|
+
**Confidence**: High / Medium / Low
|
|
116
|
+
(How confident that AI agent will implement correctly)
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
### 1. Clarity Assessment
|
|
121
|
+
**Score**: ✅ Clear | ⚠️ Some Ambiguity | ❌ Too Vague
|
|
122
|
+
|
|
123
|
+
[Specific findings - what's clear, what's not]
|
|
124
|
+
|
|
125
|
+
### 2. Completeness Assessment
|
|
126
|
+
**Score**: ✅ Complete | ⚠️ Gaps Found | ❌ Major Missing Pieces
|
|
127
|
+
|
|
128
|
+
[What's covered, what's missing]
|
|
129
|
+
|
|
130
|
+
### 3. Project Context Alignment
|
|
131
|
+
**Score**: ✅ Aligned | ⚠️ Minor Deviations | ❌ Misaligned
|
|
132
|
+
|
|
133
|
+
[How well it follows conventions and structure]
|
|
134
|
+
|
|
135
|
+
### 4. Logic Soundness
|
|
136
|
+
**Score**: ✅ Sound | ⚠️ Minor Issues | ❌ Flawed Logic
|
|
137
|
+
|
|
138
|
+
[Technical concerns, if any]
|
|
139
|
+
|
|
140
|
+
### 5. AI Executability
|
|
141
|
+
**Score**: ✅ Executable | ⚠️ Risky Areas | ❌ Likely Misimplementation
|
|
142
|
+
|
|
143
|
+
[Areas where AI might go wrong]
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
### Critical Issues (Must Fix)
|
|
148
|
+
1. [Issue] → [Suggested fix]
|
|
149
|
+
|
|
150
|
+
### Warnings (Should Fix)
|
|
151
|
+
1. [Issue] → [Suggested fix]
|
|
152
|
+
|
|
153
|
+
### Suggestions (Nice to Have)
|
|
154
|
+
1. [Improvement idea]
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
### Recommendation
|
|
159
|
+
[Clear next action: proceed / revise specific sections / major rework needed]
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Review Mindset
|
|
163
|
+
|
|
164
|
+
- Think like you're preventing bugs BEFORE they're written
|
|
165
|
+
- Assume the AI agent is literal - it will do exactly what's written
|
|
166
|
+
- Ambiguity = AI will guess = likely wrong implementation
|
|
167
|
+
- Your review saves hours of debugging and rework
|
|
168
|
+
- Be specific and actionable - vague feedback is useless
|
|
@@ -145,7 +145,7 @@ Generate a single planning doc at `docs/ai/planning/feature-{name}.md` using the
|
|
|
145
145
|
|
|
146
146
|
**Trigger:** User mentions "figma", "design file", "mockup", or provides Figma URL (detected in Step 1).
|
|
147
147
|
|
|
148
|
-
**Use `
|
|
148
|
+
**Use `frontend-design-figma-extraction` skill to:**
|
|
149
149
|
- Validate Figma MCP connection
|
|
150
150
|
- Extract design tokens (colors, typography, spacing, shadows, border radius)
|
|
151
151
|
- Extract component specs (states, variants, dimensions, hierarchies)
|
|
@@ -170,9 +170,9 @@ Generate a single planning doc at `docs/ai/planning/feature-{name}.md` using the
|
|
|
170
170
|
**Trigger:** Step 4 skipped (no Figma) AND user has NOT provided detailed design description/screenshot.
|
|
171
171
|
|
|
172
172
|
**Use design skills to guide design decisions:**
|
|
173
|
-
- `design-fundamentals`: Core principles (spacing, typography, color, hierarchy)
|
|
174
|
-
- `theme-factory`: Interactive theme selection based on brand personality
|
|
175
|
-
- `design-responsive`: Mobile-first responsive patterns and breakpoints
|
|
173
|
+
- `frontend-design-fundamentals`: Core principles (spacing, typography, color, hierarchy)
|
|
174
|
+
- `frontend-design-theme-factory`: Interactive theme selection based on brand personality
|
|
175
|
+
- `frontend-design-responsive`: Mobile-first responsive patterns and breakpoints
|
|
176
176
|
|
|
177
177
|
**Expected workflow:**
|
|
178
178
|
1. Ask about brand personality/preferences if needed
|
|
@@ -672,7 +672,7 @@ After writing, verify:
|
|
|
672
672
|
#### OpenCode Skills (.opencode/skill/)
|
|
673
673
|
- [x] figma-extraction/SKILL.md - CREATED
|
|
674
674
|
- [x] quality-code-check/SKILL.md - CREATED
|
|
675
|
-
- [x] design-fundamentals/SKILL.md - CREATED
|
|
675
|
+
- [x] frontend-design-fundamentals/SKILL.md - CREATED
|
|
676
676
|
- [x] ux-accessibility/SKILL.md - CREATED
|
|
677
677
|
|
|
678
678
|
#### OpenCode Agents (.opencode/agent/)
|
|
@@ -11,5 +11,80 @@
|
|
|
11
11
|
],
|
|
12
12
|
"deny": [],
|
|
13
13
|
"ask": []
|
|
14
|
+
},
|
|
15
|
+
"hooks": {
|
|
16
|
+
"SessionStart": [
|
|
17
|
+
{
|
|
18
|
+
"matcher": "startup|resume|clear",
|
|
19
|
+
"hooks": [
|
|
20
|
+
{
|
|
21
|
+
"type": "command",
|
|
22
|
+
"command": "echo '⚠️ REMINDER: Start EVERY response with: 📚 Skills: [list] or 📚 Skills: none'"
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
"PostToolUse": [
|
|
28
|
+
{
|
|
29
|
+
"matcher": "Write",
|
|
30
|
+
"hooks": [
|
|
31
|
+
{
|
|
32
|
+
"type": "prompt",
|
|
33
|
+
"prompt": "If the file path contains 'docs/ai/planning/feature-' and ends with '.md', validate this planning document has all required sections: 1. Goal & Acceptance Criteria, 2. Risks & Assumptions, 3. Definition of Done, 4. Implementation Plan (with Summary and Phases), 5. Follow-ups. Return JSON: {\"valid\": true/false, \"missing\": [list of missing sections], \"message\": \"brief validation result\"}. If file path doesn't match, return {\"valid\": true, \"message\": \"skipped - not a planning doc\"}"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"matcher": "Edit",
|
|
39
|
+
"hooks": [
|
|
40
|
+
{
|
|
41
|
+
"type": "command",
|
|
42
|
+
"command": "if echo \"$TOOL_INPUT\" | grep -q 'docs/ai/planning/feature-'; then echo \"[$(date '+%Y-%m-%d %H:%M:%S')] Task updated in planning doc\" >> .claude/feature-progress.log; fi"
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
"PreToolUse": [
|
|
48
|
+
{
|
|
49
|
+
"matcher": "Bash",
|
|
50
|
+
"hooks": [
|
|
51
|
+
{
|
|
52
|
+
"type": "prompt",
|
|
53
|
+
"prompt": "GIT SAFETY CHECK: If command contains 'git ' (git commands like git add, git commit, git push, git pull, git checkout, git branch, git merge, git rebase, git reset, git stash, etc.): Check the ORIGINAL USER PROMPT - did the user EXPLICITLY request git operations? Keywords indicating user wants git: 'commit', 'push', 'git', 'version control', 'save changes', 'create branch'. If user did NOT explicitly request git operations, BLOCK with message 'Git operations require explicit user request. Ask user first.' Return JSON: {\"allow\": true/false, \"reason\": \"explanation\"}. If command does not contain git, return {\"allow\": true, \"reason\": \"not a git command\"}"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"matcher": "Write|Edit",
|
|
59
|
+
"hooks": [
|
|
60
|
+
{
|
|
61
|
+
"type": "prompt",
|
|
62
|
+
"prompt": "SECURITY CHECK: If file path matches any sensitive pattern: '.env', '.env.*', 'credentials', 'secrets', 'api_key', 'apikey', 'password', 'private_key', 'token', '.pem', '.key', 'auth.json', 'config/prod': WARN user with message '⚠️ SENSITIVE FILE: [filename] - Are you sure you want to modify this file?'. Return JSON: {\"isSensitive\": true/false, \"warning\": \"message if sensitive\", \"allow\": true}. Always allow but warn for sensitive files."
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
],
|
|
67
|
+
"Stop": [
|
|
68
|
+
{
|
|
69
|
+
"matcher": "",
|
|
70
|
+
"hooks": [
|
|
71
|
+
{
|
|
72
|
+
"type": "command",
|
|
73
|
+
"command": "if command -v notify-send &>/dev/null; then notify-send -i dialog-information 'Claude Code' '✅ Task completed' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Task completed', 'Claude Code', 'OK', 'Information')\" 2>/dev/null; elif command -v osascript &>/dev/null; then osascript -e 'display notification \"Task completed\" with title \"Claude Code\"' 2>/dev/null; fi; exit 0"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
"Notification": [
|
|
79
|
+
{
|
|
80
|
+
"matcher": "permission_prompt",
|
|
81
|
+
"hooks": [
|
|
82
|
+
{
|
|
83
|
+
"type": "command",
|
|
84
|
+
"command": "if command -v notify-send &>/dev/null; then notify-send -u critical -i dialog-warning 'Claude Code' '⚠️ Permission required - check terminal' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Permission required - check terminal', 'Claude Code', 'OK', 'Warning')\" 2>/dev/null; fi; exit 0"
|
|
85
|
+
}
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
]
|
|
14
89
|
}
|
|
15
90
|
}
|
package/.claude/skills/README.md
CHANGED
|
@@ -12,19 +12,15 @@ Version: 2.0.0
|
|
|
12
12
|
.claude/skills/
|
|
13
13
|
├── README.md (this file)
|
|
14
14
|
│
|
|
15
|
-
├── design/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
│ ├── figma-extraction/
|
|
20
|
-
│ └── theme-factory/
|
|
15
|
+
├── frontend-design-fundamentals/ # Core design principles
|
|
16
|
+
├── frontend-design-responsive/ # Mobile-first, breakpoints
|
|
17
|
+
├── frontend-design-figma-extraction/ # Extract Figma specs
|
|
18
|
+
├── frontend-design-theme-factory/ # Generate themes
|
|
21
19
|
│
|
|
22
|
-
├── ux/
|
|
23
|
-
|
|
24
|
-
│ └── accessibility/
|
|
20
|
+
├── ux-feedback-patterns/ # Loading, success, error states
|
|
21
|
+
├── ux-accessibility/ # Keyboard, screen readers, WCAG
|
|
25
22
|
│
|
|
26
|
-
└──
|
|
27
|
-
└── quality-code-check/
|
|
23
|
+
└── quality-code-check/ # Linting, type checking, builds
|
|
28
24
|
```
|
|
29
25
|
|
|
30
26
|
---
|
|
@@ -170,31 +166,32 @@ skill-name/
|
|
|
170
166
|
|
|
171
167
|
## 🎨 Current Skills
|
|
172
168
|
|
|
173
|
-
| Skill |
|
|
174
|
-
|
|
175
|
-
| design-fundamentals |
|
|
176
|
-
| design-responsive |
|
|
177
|
-
|
|
|
178
|
-
| theme-factory |
|
|
179
|
-
| ux-feedback-patterns |
|
|
180
|
-
| ux-accessibility |
|
|
181
|
-
| quality-code-check |
|
|
169
|
+
| Skill | Purpose |
|
|
170
|
+
|-------|---------|
|
|
171
|
+
| frontend-design-fundamentals | Spacing, typography, color, visual hierarchy |
|
|
172
|
+
| frontend-design-responsive | Mobile-first, breakpoints, fluid layouts |
|
|
173
|
+
| frontend-design-figma-extraction | Extract complete Figma design specs |
|
|
174
|
+
| frontend-design-theme-factory | Generate themes when no design provided |
|
|
175
|
+
| ux-feedback-patterns | Loading, success, error states |
|
|
176
|
+
| ux-accessibility | Keyboard, screen readers, WCAG |
|
|
177
|
+
| quality-code-check | Linting, type checking, builds |
|
|
182
178
|
|
|
183
|
-
**Total:**
|
|
179
|
+
**Total:** 7 skills
|
|
184
180
|
|
|
185
181
|
---
|
|
186
182
|
|
|
187
|
-
## 🎮 Manual Skill
|
|
183
|
+
## 🎮 Manual Skill Invocation
|
|
184
|
+
|
|
185
|
+
Skills auto-trigger based on keywords in your prompt. Manual invocation:
|
|
188
186
|
|
|
189
187
|
```bash
|
|
190
|
-
/
|
|
191
|
-
/
|
|
192
|
-
/
|
|
193
|
-
/
|
|
194
|
-
/
|
|
195
|
-
/
|
|
196
|
-
/
|
|
197
|
-
/skill:quality # Load quality-code-check
|
|
188
|
+
/frontend-design-fundamentals # Core design principles
|
|
189
|
+
/frontend-design-responsive # Mobile-first responsive
|
|
190
|
+
/frontend-design-figma-extraction # Extract from Figma
|
|
191
|
+
/frontend-design-theme-factory # Generate theme
|
|
192
|
+
/ux-feedback-patterns # Loading/error states
|
|
193
|
+
/ux-accessibility # WCAG, keyboard nav
|
|
194
|
+
/quality-code-check # Linting, type checks
|
|
198
195
|
```
|
|
199
196
|
|
|
200
197
|
---
|
package/.claude/skills/{design/figma-extraction → frontend-design-figma-extraction}/SKILL.md
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name:
|
|
2
|
+
name: frontend-design-figma-extraction
|
|
3
3
|
description: |
|
|
4
4
|
Complete Figma design extraction for pixel-perfect implementation.
|
|
5
5
|
Extracts design tokens, component specs, layouts, and responsive behavior systematically.
|
|
@@ -19,6 +19,8 @@ description: |
|
|
|
19
19
|
- Responsive: mobile/tablet/desktop differences explicitly documented
|
|
20
20
|
- Assets: icons (names, sizes), images (dimensions, alt text), illustrations
|
|
21
21
|
|
|
22
|
+
Keywords: Figma, design file, mockup, extract, MCP, design system, specs
|
|
23
|
+
|
|
22
24
|
Goal: Extract ONCE completely during planning phase. Implementation should never
|
|
23
25
|
need to re-fetch from Figma MCP. Focus on exact values only - no approximations,
|
|
24
26
|
no guessing. Completeness prevents re-work and design inconsistencies.
|
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: design-fundamentals
|
|
2
|
+
name: frontend-design-fundamentals
|
|
3
3
|
description: |
|
|
4
|
-
Core design principles for
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
- Creating
|
|
9
|
-
- Building
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
4
|
+
Core design principles for implementing beautiful, professional UIs.
|
|
5
|
+
Ensures consistent quality through spacing, typography, colors, and visual hierarchy.
|
|
6
|
+
|
|
7
|
+
ALWAYS load when implementing UI/frontend code:
|
|
8
|
+
- Creating or modifying components, pages, screens
|
|
9
|
+
- Building landing pages, dashboards, forms, cards, buttons
|
|
10
|
+
- Any frontend work: HTML, CSS, styling, layouts
|
|
11
|
+
- Adding new UI elements or updating existing ones
|
|
12
|
+
- Modern, stunning, elegant, sleek interfaces
|
|
13
|
+
- Animation, transition, hover effects, motion, interactive elements
|
|
14
|
+
|
|
15
|
+
Keywords: UI, frontend, component, page, styling, CSS, layout, button, form,
|
|
16
|
+
card, dashboard, animation, transition, hover, effect, motion,
|
|
17
|
+
modern, beautiful, stunning, elegant, sleek, professional,
|
|
18
|
+
interactive, visual, aesthetic, design, attractive, impressive
|
|
19
|
+
|
|
20
|
+
Purpose: Ensure ALL UI implementation follows design best practices for:
|
|
21
|
+
- Consistent spacing scale (not arbitrary values)
|
|
22
|
+
- Typography hierarchy (readable, professional)
|
|
23
|
+
- Color contrast (accessible, WCAG compliant)
|
|
24
|
+
- Visual hierarchy (clear, intentional)
|
|
25
|
+
- Avoiding generic AI aesthetics
|
|
26
|
+
|
|
27
|
+
Do NOT load for:
|
|
28
|
+
- Backend-only code (APIs, database, server logic)
|
|
29
|
+
- Pure logic/algorithm work without UI
|
|
30
|
+
- DevOps, infrastructure, CLI tools
|
|
31
|
+
|
|
32
|
+
Works with other skills:
|
|
33
|
+
- theme-factory: When user needs help CHOOSING colors/theme
|
|
34
|
+
- figma-design-extraction: When Figma file provided
|
|
35
|
+
- design-responsive: For mobile/tablet/responsive specifics
|
|
36
|
+
- ux-accessibility: For keyboard/screen reader specifics
|
|
21
37
|
---
|
|
22
38
|
|
|
23
39
|
# Design Fundamentals
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: design-responsive
|
|
2
|
+
name: frontend-design-responsive
|
|
3
3
|
description: |
|
|
4
4
|
Mobile-first responsive design for beautiful, multi-device UIs. Breakpoints, fluid layouts,
|
|
5
5
|
touch optimization, and creative responsive patterns for distinctive experiences across screens.
|
|
@@ -13,6 +13,13 @@ description: |
|
|
|
13
13
|
|
|
14
14
|
Keywords: responsive, mobile-first, mobile, tablet, desktop, breakpoints, touch, multi-device
|
|
15
15
|
|
|
16
|
+
Do NOT load for:
|
|
17
|
+
- Desktop-only applications without responsive needs
|
|
18
|
+
- Figma extraction (use figma-design-extraction)
|
|
19
|
+
- Accessibility-only questions (use ux-accessibility)
|
|
20
|
+
- Theme/color selection (use theme-factory)
|
|
21
|
+
- Code quality checks (use quality-code-check)
|
|
22
|
+
|
|
16
23
|
Mobile-first approach: Design for mobile constraints first, enhance progressively.
|
|
17
24
|
Integrates with design-fundamentals: Apply spacing, typography, color systems responsively.
|
|
18
25
|
---
|
|
@@ -1,21 +1,27 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: theme-factory
|
|
2
|
+
name: frontend-design-theme-factory
|
|
3
3
|
description: |
|
|
4
4
|
Interactive UI theme generation when user needs help choosing colors/fonts.
|
|
5
5
|
Generates cohesive themes based on brand personality using color harmony theory.
|
|
6
6
|
|
|
7
|
-
Use when user
|
|
7
|
+
Use ONLY when user is UNCERTAIN about colors/theme and asks for help:
|
|
8
8
|
- "What theme should I use?" "Help me pick colors" "Generate theme"
|
|
9
9
|
- "What colors work well together?" "Suggest color palette"
|
|
10
10
|
- User uncertain about design direction, needs aesthetic suggestions
|
|
11
|
-
- Building UI
|
|
11
|
+
- Building UI with no design specs AND no color preference
|
|
12
12
|
|
|
13
|
-
Keywords: theme, color palette, colors, fonts, brand personality, color harmony
|
|
13
|
+
Keywords: theme, color palette, colors, fonts, brand personality, color harmony,
|
|
14
|
+
aesthetic, style, visual style, look and feel, beautiful, attractive
|
|
14
15
|
|
|
15
16
|
Interactive workflow: Ask personality → Present options → Generate custom theme.
|
|
16
17
|
References pre-defined themes in .claude/themes/.
|
|
17
18
|
|
|
18
|
-
Do NOT load for:
|
|
19
|
+
Do NOT load for:
|
|
20
|
+
- User already has clear colors/aesthetic in mind (use design-fundamentals)
|
|
21
|
+
- Figma/design file provided (use figma-design-extraction)
|
|
22
|
+
- User just needs to apply existing theme
|
|
23
|
+
- Responsive layout questions (use design-responsive)
|
|
24
|
+
|
|
19
25
|
Integrates with design-fundamentals: Generates themes following design principles.
|
|
20
26
|
---
|
|
21
27
|
|
|
@@ -18,6 +18,14 @@ description: |
|
|
|
18
18
|
- Java (Gradle, Maven)
|
|
19
19
|
|
|
20
20
|
Focuses on detecting issues early through systematic automated checks.
|
|
21
|
+
|
|
22
|
+
Keywords: lint, linting, type check, typecheck, build, quality, validation, eslint, tsc
|
|
23
|
+
|
|
24
|
+
Do NOT load for:
|
|
25
|
+
- Visual design work (use frontend-design-fundamentals, frontend-design-responsive)
|
|
26
|
+
- UX patterns (use ux-feedback-patterns, ux-accessibility)
|
|
27
|
+
- Initial development before implementation is stable
|
|
28
|
+
- Figma extraction (use frontend-design-figma-extraction)
|
|
21
29
|
---
|
|
22
30
|
|
|
23
31
|
# Quality Code Check
|
|
@@ -14,6 +14,13 @@ description: |
|
|
|
14
14
|
|
|
15
15
|
Keywords: accessible, accessibility, WCAG, keyboard, screen reader, ARIA, contrast, a11y
|
|
16
16
|
|
|
17
|
+
Do NOT load for:
|
|
18
|
+
- Visual design/styling only (use frontend-design-fundamentals)
|
|
19
|
+
- Theme/color selection (use frontend-design-theme-factory)
|
|
20
|
+
- Responsive layout (use frontend-design-responsive)
|
|
21
|
+
- Figma extraction (use frontend-design-figma-extraction)
|
|
22
|
+
- Code quality checks (use quality-code-check)
|
|
23
|
+
|
|
17
24
|
Focus on making UI usable via keyboard, screen readers, assistive technologies.
|
|
18
25
|
---
|
|
19
26
|
|
|
@@ -13,6 +13,13 @@ description: |
|
|
|
13
13
|
|
|
14
14
|
Keywords: loading, success, error, form, validation, async, feedback, toast, empty state
|
|
15
15
|
|
|
16
|
+
Do NOT load for:
|
|
17
|
+
- Visual design/styling (use frontend-design-fundamentals)
|
|
18
|
+
- Responsive layout (use frontend-design-responsive)
|
|
19
|
+
- Figma extraction (use frontend-design-figma-extraction)
|
|
20
|
+
- Accessibility-only questions (use ux-accessibility)
|
|
21
|
+
- Code quality checks (use quality-code-check)
|
|
22
|
+
|
|
16
23
|
Focus on WHEN to show feedback, WHAT type (toast/inline/modal), HOW LONG (timing).
|
|
17
24
|
---
|
|
18
25
|
|
package/cli.js
CHANGED
|
@@ -397,12 +397,100 @@ function installClaudeCode() {
|
|
|
397
397
|
}
|
|
398
398
|
}
|
|
399
399
|
|
|
400
|
-
//
|
|
401
|
-
step("🚚
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
400
|
+
// Create settings.json with hooks (project-level, shareable with team)
|
|
401
|
+
step("🚚 Setting up Claude Code hooks (.claude/settings.json)...");
|
|
402
|
+
const claudeSettingsPath = ".claude/settings.json";
|
|
403
|
+
if (existsSync(claudeSettingsPath)) {
|
|
404
|
+
skip(`Skipping (already exists): ${claudeSettingsPath}`);
|
|
405
|
+
} else {
|
|
406
|
+
const claudeSettings = {
|
|
407
|
+
hooks: {
|
|
408
|
+
SessionStart: [
|
|
409
|
+
{
|
|
410
|
+
matcher: "startup|resume|clear",
|
|
411
|
+
hooks: [
|
|
412
|
+
{
|
|
413
|
+
type: "command",
|
|
414
|
+
command: "echo '⚠️ REMINDER: Start EVERY response with: 📚 Skills: [list] or 📚 Skills: none'"
|
|
415
|
+
}
|
|
416
|
+
]
|
|
417
|
+
}
|
|
418
|
+
],
|
|
419
|
+
PostToolUse: [
|
|
420
|
+
{
|
|
421
|
+
matcher: "Write",
|
|
422
|
+
hooks: [
|
|
423
|
+
{
|
|
424
|
+
type: "prompt",
|
|
425
|
+
prompt: "If the file path contains 'docs/ai/planning/feature-' and ends with '.md', validate this planning document has all required sections: 1. Goal & Acceptance Criteria, 2. Risks & Assumptions, 3. Definition of Done, 4. Implementation Plan (with Summary and Phases), 5. Follow-ups. Return JSON: {\"valid\": true/false, \"missing\": [list of missing sections], \"message\": \"brief validation result\"}. If file path doesn't match, return {\"valid\": true, \"message\": \"skipped - not a planning doc\"}"
|
|
426
|
+
}
|
|
427
|
+
]
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
matcher: "Edit",
|
|
431
|
+
hooks: [
|
|
432
|
+
{
|
|
433
|
+
type: "command",
|
|
434
|
+
command: "if echo \"$TOOL_INPUT\" | grep -q 'docs/ai/planning/feature-'; then echo \"[$(date '+%Y-%m-%d %H:%M:%S')] Task updated in planning doc\" >> .claude/feature-progress.log; fi"
|
|
435
|
+
}
|
|
436
|
+
]
|
|
437
|
+
}
|
|
438
|
+
],
|
|
439
|
+
PreToolUse: [
|
|
440
|
+
{
|
|
441
|
+
matcher: "Edit",
|
|
442
|
+
hooks: [
|
|
443
|
+
{
|
|
444
|
+
type: "prompt",
|
|
445
|
+
prompt: "If the file path contains 'docs/ai/planning/feature-' and ends with '.md': Check if the agent is starting a new phase. If yes, verify all tasks in the previous phase are marked [x]. Return JSON: {\"canProceed\": true/false, \"message\": \"reason\"}. If file path doesn't match, return {\"canProceed\": true, \"message\": \"skipped - not a planning doc\"}"
|
|
446
|
+
}
|
|
447
|
+
]
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
matcher: "Bash",
|
|
451
|
+
hooks: [
|
|
452
|
+
{
|
|
453
|
+
type: "prompt",
|
|
454
|
+
prompt: "GIT SAFETY CHECK: If command contains 'git ' (git commands like git add, git commit, git push, git pull, git checkout, git branch, git merge, git rebase, git reset, git stash, etc.): Check the ORIGINAL USER PROMPT - did the user EXPLICITLY request git operations? Keywords indicating user wants git: 'commit', 'push', 'git', 'version control', 'save changes', 'create branch'. If user did NOT explicitly request git operations, BLOCK with message 'Git operations require explicit user request. Ask user first.' Return JSON: {\"allow\": true/false, \"reason\": \"explanation\"}. If command does not contain git, return {\"allow\": true, \"reason\": \"not a git command\"}"
|
|
455
|
+
}
|
|
456
|
+
]
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
matcher: "Write|Edit",
|
|
460
|
+
hooks: [
|
|
461
|
+
{
|
|
462
|
+
type: "prompt",
|
|
463
|
+
prompt: "SECURITY CHECK: If file path matches any sensitive pattern: '.env', '.env.*', 'credentials', 'secrets', 'api_key', 'apikey', 'password', 'private_key', 'token', '.pem', '.key', 'auth.json', 'config/prod': WARN user with message '⚠️ SENSITIVE FILE: [filename] - Are you sure you want to modify this file?'. Return JSON: {\"isSensitive\": true/false, \"warning\": \"message if sensitive\", \"allow\": true}. Always allow but warn for sensitive files."
|
|
464
|
+
}
|
|
465
|
+
]
|
|
466
|
+
}
|
|
467
|
+
],
|
|
468
|
+
Stop: [
|
|
469
|
+
{
|
|
470
|
+
matcher: "",
|
|
471
|
+
hooks: [
|
|
472
|
+
{
|
|
473
|
+
type: "command",
|
|
474
|
+
command: "if command -v notify-send &>/dev/null; then notify-send -i dialog-information 'Claude Code' '✅ Task completed' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Task completed', 'Claude Code', 'OK', 'Information')\" 2>/dev/null; elif command -v osascript &>/dev/null; then osascript -e 'display notification \"Task completed\" with title \"Claude Code\"' 2>/dev/null; fi; exit 0"
|
|
475
|
+
}
|
|
476
|
+
]
|
|
477
|
+
}
|
|
478
|
+
],
|
|
479
|
+
Notification: [
|
|
480
|
+
{
|
|
481
|
+
matcher: "permission_prompt",
|
|
482
|
+
hooks: [
|
|
483
|
+
{
|
|
484
|
+
type: "command",
|
|
485
|
+
command: "if command -v notify-send &>/dev/null; then notify-send -u critical -i dialog-warning 'Claude Code' '⚠️ Permission required - check terminal' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Permission required - check terminal', 'Claude Code', 'OK', 'Warning')\" 2>/dev/null; fi; exit 0"
|
|
486
|
+
}
|
|
487
|
+
]
|
|
488
|
+
}
|
|
489
|
+
]
|
|
490
|
+
}
|
|
491
|
+
};
|
|
492
|
+
writeFileSync(claudeSettingsPath, JSON.stringify(claudeSettings, null, 2));
|
|
493
|
+
success(`Created: ${claudeSettingsPath}`);
|
|
406
494
|
}
|
|
407
495
|
|
|
408
496
|
// Download skills folder (always overwrite to get latest)
|
package/package.json
CHANGED
package/.claude/hooks.json
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"hooks": [
|
|
3
|
-
{
|
|
4
|
-
"id": "validate-planning-doc",
|
|
5
|
-
"description": "Validate planning doc structure after creation",
|
|
6
|
-
"event": "PostToolUse",
|
|
7
|
-
"tools": ["Write"],
|
|
8
|
-
"matchPath": "docs/ai/planning/feature-*.md",
|
|
9
|
-
"type": "prompt",
|
|
10
|
-
"prompt": "Validate this planning document has all required sections: 1. Goal & Acceptance Criteria, 2. Risks & Assumptions, 3. Definition of Done, 4. Implementation Plan (with Summary and Phases), 5. Follow-ups. Return JSON: {\"valid\": true/false, \"missing\": [list of missing sections], \"message\": \"brief validation result\"}",
|
|
11
|
-
"blocking": false
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
"id": "validate-phase-completion",
|
|
15
|
-
"description": "Check if all tasks in a phase are completed before moving to next phase",
|
|
16
|
-
"event": "PreToolUse",
|
|
17
|
-
"tools": ["Edit"],
|
|
18
|
-
"matchPath": "docs/ai/planning/feature-*.md",
|
|
19
|
-
"type": "prompt",
|
|
20
|
-
"prompt": "Before editing this planning doc, check if the agent is starting a new phase. If yes, verify all tasks in the previous phase are marked [x]. Return JSON: {\"canProceed\": true/false, \"message\": \"reason\"}",
|
|
21
|
-
"blocking": false
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"id": "log-feature-progress",
|
|
25
|
-
"description": "Log when tasks are completed in planning docs",
|
|
26
|
-
"event": "PostToolUse",
|
|
27
|
-
"tools": ["Edit"],
|
|
28
|
-
"matchPath": "docs/ai/planning/feature-*.md",
|
|
29
|
-
"type": "command",
|
|
30
|
-
"command": "echo \"[$(date '+%Y-%m-%d %H:%M:%S')] Task updated in $FILE\" >> .claude/feature-progress.log",
|
|
31
|
-
"blocking": false
|
|
32
|
-
}
|
|
33
|
-
]
|
|
34
|
-
}
|