thanh-kit 2.5.4 → 2.5.6
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/package.json +1 -1
- package/templates/command-archive/ask.md +56 -0
- package/templates/command-archive/ck-help.md +129 -0
- package/templates/command-archive/coding-level.md +48 -0
- package/templates/command-archive/docs/init.md +38 -0
- package/templates/command-archive/docs/summarize.md +22 -0
- package/templates/command-archive/docs/update.md +76 -0
- package/templates/command-archive/journal.md +18 -0
- package/templates/command-archive/kanban.md +99 -0
- package/templates/command-archive/plan/archive.md +57 -0
- package/templates/command-archive/plan/red-team.md +200 -0
- package/templates/command-archive/plan/validate.md +188 -0
- package/templates/command-archive/preview.md +283 -0
- package/templates/command-archive/review/codebase/parallel.md +122 -0
- package/templates/command-archive/review/codebase.md +49 -0
- package/templates/command-archive/test/ui.md +92 -0
- package/templates/command-archive/test.md +8 -0
- package/templates/command-archive/use-mcp.md +38 -0
- package/templates/command-archive/watzup.md +8 -0
- package/templates/command-archive/worktree.md +109 -0
- package/templates/hooks/.logs/hook-log.jsonl +31 -0
- package/templates/settings.local.json +13 -0
- package/templates/skills/agent-browser/SKILL.md +1 -1
- package/templates/skills/ai-artist/SKILL.md +1 -1
- package/templates/skills/ai-multimodal/SKILL.md +1 -1
- package/templates/skills/ask/SKILL.md +1 -1
- package/templates/skills/backend-development/SKILL.md +1 -1
- package/templates/skills/better-auth/SKILL.md +1 -1
- package/templates/skills/bootstrap/SKILL.md +1 -1
- package/templates/skills/brainstorm/SKILL.md +1 -1
- package/templates/skills/chrome-devtools/SKILL.md +1 -1
- package/templates/skills/ck-help/SKILL.md +1 -1
- package/templates/skills/code-review/SKILL.md +1 -1
- package/templates/skills/coding-level/SKILL.md +1 -1
- package/templates/skills/context-engineering/SKILL.md +1 -1
- package/templates/skills/cook/SKILL.md +1 -1
- package/templates/skills/copywriting/SKILL.md +1 -1
- package/templates/skills/databases/SKILL.md +1 -1
- package/templates/skills/debug/SKILL.md +1 -1
- package/templates/skills/devops/SKILL.md +1 -1
- package/templates/skills/docs/SKILL.md +1 -1
- package/templates/skills/docs-seeker/SKILL.md +1 -1
- package/templates/skills/document-skills/docx/SKILL.md +1 -1
- package/templates/skills/document-skills/pdf/SKILL.md +1 -1
- package/templates/skills/document-skills/pptx/SKILL.md +1 -1
- package/templates/skills/document-skills/xlsx/SKILL.md +1 -1
- package/templates/skills/find-skills/SKILL.md +1 -1
- package/templates/skills/fix/SKILL.md +1 -1
- package/templates/skills/frontend-design/SKILL.md +1 -1
- package/templates/skills/frontend-development/SKILL.md +1 -1
- package/templates/skills/git/SKILL.md +1 -1
- package/templates/skills/gkg/SKILL.md +1 -1
- package/templates/skills/google-adk-python/SKILL.md +1 -1
- package/templates/skills/journal/SKILL.md +1 -1
- package/templates/skills/kanban/SKILL.md +1 -1
- package/templates/skills/markdown-novel-viewer/SKILL.md +1 -1
- package/templates/skills/mcp-builder/SKILL.md +1 -1
- package/templates/skills/mcp-management/SKILL.md +1 -1
- package/templates/skills/media-processing/SKILL.md +1 -1
- package/templates/skills/mermaidjs-v11/SKILL.md +1 -1
- package/templates/skills/mintlify/SKILL.md +1 -1
- package/templates/skills/mobile-development/SKILL.md +1 -1
- package/templates/skills/payment-integration/SKILL.md +1 -1
- package/templates/skills/plan/SKILL.md +1 -1
- package/templates/skills/plans-kanban/SKILL.md +1 -1
- package/templates/skills/preview/SKILL.md +1 -1
- package/templates/skills/problem-solving/SKILL.md +1 -1
- package/templates/skills/project-management/SKILL.md +1 -1
- package/templates/skills/react-best-practices/SKILL.md +1 -1
- package/templates/skills/remotion/SKILL.md +1 -1
- package/templates/skills/repomix/SKILL.md +1 -1
- package/templates/skills/research/SKILL.md +1 -1
- package/templates/skills/scout/SKILL.md +1 -1
- package/templates/skills/sequential-thinking/SKILL.md +1 -1
- package/templates/skills/shader/SKILL.md +1 -1
- package/templates/skills/shopify/SKILL.md +1 -1
- package/templates/skills/skill-creator/SKILL.md +1 -1
- package/templates/skills/tanstack/SKILL.md +1 -1
- package/templates/skills/team/SKILL.md +1 -1
- package/templates/skills/template-skill/SKILL.md +1 -1
- package/templates/skills/test/SKILL.md +1 -1
- package/templates/skills/threejs/SKILL.md +1 -1
- package/templates/skills/ui-styling/SKILL.md +1 -1
- package/templates/skills/ui-ux-pro-max/SKILL.md +1 -1
- package/templates/skills/use-mcp/SKILL.md +1 -1
- package/templates/skills/watzup/SKILL.md +1 -1
- package/templates/skills/web-design-guidelines/SKILL.md +1 -1
- package/templates/skills/web-frameworks/SKILL.md +2 -2
- package/templates/skills/web-testing/SKILL.md +1 -1
- package/templates/skills/worktree/SKILL.md +1 -1
- package/templates/commands/bootstrap/auto/fast.md +0 -111
- package/templates/commands/bootstrap/auto/parallel.md +0 -66
- package/templates/commands/bootstrap/auto.md +0 -115
- package/templates/commands/bootstrap.md +0 -137
- package/templates/commands/code/auto.md +0 -203
- package/templates/commands/code/no-test.md +0 -174
- package/templates/commands/code/parallel.md +0 -100
- package/templates/commands/code.md +0 -205
- package/templates/commands/content/cro.md +0 -43
- package/templates/commands/content/enhance.md +0 -14
- package/templates/commands/content/fast.md +0 -13
- package/templates/commands/content/good.md +0 -16
- package/templates/commands/cook/auto/fast.md +0 -26
- package/templates/commands/cook/auto/parallel.md +0 -49
- package/templates/commands/cook/auto.md +0 -15
- package/templates/commands/cook.md +0 -105
- package/templates/commands/debug.md +0 -13
- package/templates/commands/design/3d.md +0 -83
- package/templates/commands/design/describe.md +0 -23
- package/templates/commands/design/fast.md +0 -31
- package/templates/commands/design/good.md +0 -35
- package/templates/commands/design/screenshot.md +0 -34
- package/templates/commands/design/video.md +0 -34
- package/templates/commands/fix/ci.md +0 -17
- package/templates/commands/fix/fast.md +0 -19
- package/templates/commands/fix/hard.md +0 -39
- package/templates/commands/fix/logs.md +0 -26
- package/templates/commands/fix/parallel.md +0 -54
- package/templates/commands/fix/test.md +0 -20
- package/templates/commands/fix/types.md +0 -9
- package/templates/commands/fix/ui.md +0 -48
- package/templates/commands/fix.md +0 -43
- package/templates/commands/plan/ci.md +0 -33
- package/templates/commands/plan/cro.md +0 -69
- package/templates/commands/plan/fast.md +0 -82
- package/templates/commands/plan/hard.md +0 -108
- package/templates/commands/plan/parallel.md +0 -145
- package/templates/commands/plan/two.md +0 -45
- package/templates/commands/plan.md +0 -30
- package/templates/commands/scout/ext.md +0 -39
- package/templates/commands/scout.md +0 -28
- package/templates/commands/skill/add.md +0 -36
- package/templates/commands/skill/create.md +0 -29
- package/templates/commands/skill/fix-logs.md +0 -22
- package/templates/commands/skill/optimize/auto.md +0 -25
- package/templates/commands/skill/optimize.md +0 -34
- package/templates/commands/skill/update.md +0 -36
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Create immersive interactive 3D designs with Three.js
|
|
3
|
-
argument-hint: [tasks]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Think hard to plan & start working on these tasks follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules:
|
|
7
|
-
<tasks>$ARGUMENTS</tasks>
|
|
8
|
-
|
|
9
|
-
## Required Skills (Priority Order)
|
|
10
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
11
|
-
2. **`threejs`** - Three.js/WebGL expertise
|
|
12
|
-
3. **`frontend-design`** - Implementation patterns
|
|
13
|
-
|
|
14
|
-
**Ensure token efficiency while maintaining high quality.**
|
|
15
|
-
|
|
16
|
-
## Workflow:
|
|
17
|
-
0. **FIRST**: Run `ui-ux-pro-max` searches for 3D design context:
|
|
18
|
-
```bash
|
|
19
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
|
20
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "immersive 3d" --domain style
|
|
21
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
|
|
22
|
-
```
|
|
23
|
-
1. Use `ui-ux-designer` subagent and `researcher` subagent to create a comprehensive 3D design plan following the progressive disclosure structure:
|
|
24
|
-
- Create a directory using naming pattern from `## Naming` section.
|
|
25
|
-
- Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
|
|
26
|
-
- For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
|
|
27
|
-
- Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
|
|
28
|
-
2. Then use `ui-ux-designer` subagent to implement the plan step by step.
|
|
29
|
-
3. Create immersive 3D experiences using Three.js with particle effects, custom shaders, and interactive elements.
|
|
30
|
-
4. Leverage all available Gemini skills (ai-multimodal, ai-multimodal) for asset generation and validation.
|
|
31
|
-
5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
|
|
32
|
-
6. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
|
|
33
|
-
|
|
34
|
-
## 3D Design Requirements:
|
|
35
|
-
- Implement Three.js scenes with proper optimization
|
|
36
|
-
- Create custom GLSL shaders for unique visual effects
|
|
37
|
-
- Design GPU-accelerated particle systems
|
|
38
|
-
- Add immersive camera controls and cinematic effects
|
|
39
|
-
- Implement post-processing effects and render pipelines
|
|
40
|
-
- Ensure responsive behavior across all devices
|
|
41
|
-
- Optimize performance for real-time rendering
|
|
42
|
-
- Add interactive elements and smooth animations
|
|
43
|
-
|
|
44
|
-
## Gemini Skills Integration:
|
|
45
|
-
|
|
46
|
-
### ai-multimodal Skills & ImageMagick Skill (Asset Generation & Processing):
|
|
47
|
-
- Generate textures, skyboxes, and environment maps with ai-multimodal skills
|
|
48
|
-
- Create custom particle sprites and effect assets via ai-multimodal prompts
|
|
49
|
-
- Generate 3D object textures with specific styles using ai-multimodal skills
|
|
50
|
-
- Create video backgrounds for immersive scenes with ai-multimodal capabilities
|
|
51
|
-
- Apply camera movements, inpainting, and outpainting through ai-multimodal skills
|
|
52
|
-
- Refine, batch edit, and optimize outputs with imagemagick skill workflows
|
|
53
|
-
|
|
54
|
-
### ImageMagick Skill (Image Processing):
|
|
55
|
-
- Process and optimize textures for WebGL
|
|
56
|
-
- Create normal maps and height maps from images
|
|
57
|
-
- Generate sprite sheets for particle systems
|
|
58
|
-
- Remove backgrounds for transparent textures
|
|
59
|
-
- Resize and optimize assets for performance
|
|
60
|
-
- Apply masks for complex texture effects
|
|
61
|
-
|
|
62
|
-
### Eyes Tools (Visual Analysis):
|
|
63
|
-
- Analyze reference images for 3D scene composition
|
|
64
|
-
- Compare design mockups with implementation
|
|
65
|
-
- Validate texture quality and visual consistency
|
|
66
|
-
- Extract color palettes from reference materials
|
|
67
|
-
- Verify shader effects and visual output
|
|
68
|
-
|
|
69
|
-
## Implementation Stack:
|
|
70
|
-
- Three.js for 3D rendering
|
|
71
|
-
- GLSL for custom vertex and fragment shaders
|
|
72
|
-
- HTML/CSS/JS for UI integration
|
|
73
|
-
- WebGL for GPU-accelerated graphics
|
|
74
|
-
- Post-processing libraries for effects
|
|
75
|
-
|
|
76
|
-
## Notes:
|
|
77
|
-
- Remember that you have the capability to generate images, videos, edit images, etc. with ai-multimodal skill. Use them extensively to create realistic 3D assets.
|
|
78
|
-
- Always review, analyze and double check generated assets with ai-multimodal skill.
|
|
79
|
-
- Leverage ai-multimodal skills and imagemagick skill to create custom textures, particle sprites, environment maps, and visual effects.
|
|
80
|
-
- Use imagemagick skill to process and optimize all visual assets for WebGL performance.
|
|
81
|
-
- Test 3D scenes across different devices and optimize for smooth 60fps performance.
|
|
82
|
-
- Maintain and update `./docs/design-guidelines.md` docs with 3D design patterns and shader libraries.
|
|
83
|
-
- Document shader code, particle systems, and reusable 3D components for future reference.
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Describe a design based on screenshot/video
|
|
3
|
-
argument-hint: [screenshot]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Think hard to describe the design based on this screenshot/video:
|
|
7
|
-
<screenshot>$ARGUMENTS</screenshot>
|
|
8
|
-
|
|
9
|
-
## Required Skills (Priority Order)
|
|
10
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
11
|
-
2. **`frontend-design`** - Visual analysis
|
|
12
|
-
|
|
13
|
-
**Ensure token efficiency while maintaining high quality.**
|
|
14
|
-
|
|
15
|
-
## Workflow:
|
|
16
|
-
1. Use `ai-multimodal` skills to describe super details of the screenshot/video so the developer can implement it easily.
|
|
17
|
-
- Be specific about design style, every element, elements' positions, every interaction, every animation, every transition, every color, every border, every icon, every font style, font size, font weight, every spacing, every padding, every margin, every size, every shape, every texture, every material, every light, every shadow, every reflection, every refraction, every blur, every glow, every image, background transparency, etc.
|
|
18
|
-
- **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
|
|
19
|
-
2. Use `ui-ux-designer` subagent to create a design implementation plan following the progressive disclosure structure so the result matches the screenshot/video:
|
|
20
|
-
- Create a directory using naming pattern from `## Naming` section.
|
|
21
|
-
- Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
|
|
22
|
-
- For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
|
|
23
|
-
3. Report back to user with a summary of the plan.
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Create a quick design
|
|
3
|
-
argument-hint: [tasks]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Think hard to plan & start working on these tasks follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules:
|
|
7
|
-
<tasks>$ARGUMENTS</tasks>
|
|
8
|
-
|
|
9
|
-
## Required Skills (Priority Order)
|
|
10
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
11
|
-
2. **`frontend-design`** - Quick implementation
|
|
12
|
-
|
|
13
|
-
**Ensure token efficiency while maintaining high quality.**
|
|
14
|
-
|
|
15
|
-
## Workflow:
|
|
16
|
-
1. **FIRST**: Run `ui-ux-pro-max` searches to gather design intelligence:
|
|
17
|
-
```bash
|
|
18
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
|
19
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
|
|
20
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
|
|
21
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
|
|
22
|
-
```
|
|
23
|
-
2. Use `ui-ux-designer` subagent to start the design process.
|
|
24
|
-
3. If user doesn't specify, create the design in pure HTML/CSS/JS.
|
|
25
|
-
4. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
|
|
26
|
-
5. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
|
|
27
|
-
|
|
28
|
-
## Notes:
|
|
29
|
-
- Remember that you have the capability to generate images, videos, edit images, etc. with `ai-multimodal` skills. Use them to create the design and real assets.
|
|
30
|
-
- Always review, analyze and double check generated assets with `ai-multimodal` skills to verify quality.
|
|
31
|
-
- Maintain and update `./docs/design-guidelines.md` docs if needed.
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Create an immersive design
|
|
3
|
-
argument-hint: [tasks]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Think hard to plan & start working on these tasks follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules:
|
|
7
|
-
<tasks>$ARGUMENTS</tasks>
|
|
8
|
-
|
|
9
|
-
## Required Skills (Priority Order)
|
|
10
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
11
|
-
2. **`frontend-design`** - Screenshot analysis and design replication
|
|
12
|
-
|
|
13
|
-
**Ensure token efficiency while maintaining high quality.**
|
|
14
|
-
|
|
15
|
-
## Workflow:
|
|
16
|
-
1. **FIRST**: Run `ui-ux-pro-max` searches to gather design intelligence:
|
|
17
|
-
```bash
|
|
18
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
|
19
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
|
|
20
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<mood>" --domain typography
|
|
21
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<industry>" --domain color
|
|
22
|
-
```
|
|
23
|
-
2. Use `researcher` subagent to research about design style, trends, fonts, colors, border, spacing, elements' positions, etc.
|
|
24
|
-
3. Use `ui-ux-designer` subagent to implement the design step by step based on the research.
|
|
25
|
-
4. If user doesn't specify, create the design in pure HTML/CSS/JS.
|
|
26
|
-
5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
|
|
27
|
-
6. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
|
|
28
|
-
|
|
29
|
-
## Important Notes:
|
|
30
|
-
- **ALWAYS REMEBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
|
|
31
|
-
- Remember that you have the capability to generate images, videos, edit images, etc. with `ai-multimodal` skills for image generation. Use them to create the design with real assets.
|
|
32
|
-
- Always review, analyze and double check the generated assets with `ai-multimodal` skills to verify quality.
|
|
33
|
-
- Use removal background tools to remove background from generated assets if needed.
|
|
34
|
-
- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
|
|
35
|
-
- Maintain and update `./docs/design-guidelines.md` docs if needed.
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Create a design based on screenshot
|
|
3
|
-
argument-hint: [screenshot]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Think hard to plan & start designing follow exactly this screenshot:
|
|
7
|
-
<screenshot>$ARGUMENTS</screenshot>
|
|
8
|
-
|
|
9
|
-
## Required Skills (Priority Order)
|
|
10
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
11
|
-
2. **`frontend-design`** - Screenshot analysis and replication
|
|
12
|
-
|
|
13
|
-
**Ensure token efficiency while maintaining high quality.**
|
|
14
|
-
|
|
15
|
-
## Workflow:
|
|
16
|
-
1. Use `ai-multimodal` skills to describe super details of the screenshot (design style, trends, fonts, colors, border, spacing, elements' positions, size, shape, texture, material, light, shadow, reflection, refraction, blur, glow, image, background transparency, transition, etc.)
|
|
17
|
-
- **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
|
|
18
|
-
2. Use `ui-ux-designer` subagent to create a design plan following the progressive disclosure structure so the final result matches the screenshot:
|
|
19
|
-
- Create a directory using naming pattern from `## Naming` section.
|
|
20
|
-
- Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
|
|
21
|
-
- For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
|
|
22
|
-
- Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
|
|
23
|
-
3. Then implement the plan step by step.
|
|
24
|
-
4. If user doesn't specify, create the design in pure HTML/CSS/JS.
|
|
25
|
-
5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
|
|
26
|
-
6. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
|
|
27
|
-
|
|
28
|
-
## Important Notes:
|
|
29
|
-
- **ALWAYS REMEBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
|
|
30
|
-
- Remember that you have the capability to generate images, videos, edit images, etc. with ai-multimodal skill for image generation. Use them to create the design with real assets.
|
|
31
|
-
- Always review, analyze and double check the generated assets with ai-multimodal skill to verify quality.
|
|
32
|
-
- Use removal background tools to remove background from generated assets if needed.
|
|
33
|
-
- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
|
|
34
|
-
- Maintain and update `./docs/design-guidelines.md` docs if needed.
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Create a design based on video
|
|
3
|
-
argument-hint: [video]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Think hard to plan & start designing follow exactly this video:
|
|
7
|
-
<video>$ARGUMENTS</video>
|
|
8
|
-
|
|
9
|
-
## Required Skills (Priority Order)
|
|
10
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
11
|
-
2. **`frontend-design`** - Video analysis and replication
|
|
12
|
-
|
|
13
|
-
**Ensure token efficiency while maintaining high quality.**
|
|
14
|
-
|
|
15
|
-
## Workflow:
|
|
16
|
-
1. Use `ai-multimodal` skills to describe super details of the video: be specific about describing every element, every interaction, every animation, every transition, every color, every font, every border, every spacing, every size, every shape, every texture, every material, every light, every shadow, every reflection, every refraction, every blur, every glow, every image, background transparency, etc.
|
|
17
|
-
- **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given video, don't just use Inter or Poppins.
|
|
18
|
-
2. Use `ui-ux-designer` subagent to create a design plan following the progressive disclosure structure so the final result matches the video:
|
|
19
|
-
- Create a directory using naming pattern from `## Naming` section.
|
|
20
|
-
- Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
|
|
21
|
-
- For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
|
|
22
|
-
- Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
|
|
23
|
-
3. Then implement the plan step by step.
|
|
24
|
-
4. If user doesn't specify, create the design in pure HTML/CSS/JS.
|
|
25
|
-
5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
|
|
26
|
-
6. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
|
|
27
|
-
|
|
28
|
-
## Important Notes:
|
|
29
|
-
- **ALWAYS REMEBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
|
|
30
|
-
- Remember that you have the capability to generate images, videos, edit images, etc. with ai-multimodal skill for image generation. Use them to create the design with real assets.
|
|
31
|
-
- Always review, analyze and double check the generated assets with ai-multimodal skill to verify quality.
|
|
32
|
-
- Use removal background tools to remove background from generated assets if needed.
|
|
33
|
-
- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
|
|
34
|
-
- Maintain and update `./docs/design-guidelines.md` docs if needed.
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡ Analyze Github Actions logs and fix issues
|
|
3
|
-
argument-hint: [github-actions-url]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## Github Actions URL
|
|
7
|
-
<url>$ARGUMENTS</url>
|
|
8
|
-
|
|
9
|
-
## Workflow
|
|
10
|
-
1. Use `debugger` subagent to read the github actions logs with `gh` command, analyze and find the root cause of the issues and report back to main agent.
|
|
11
|
-
2. Start implementing the fix based the reports and solutions.
|
|
12
|
-
3. Use `tester` agent to test the fix and make sure it works, then report back to main agent.
|
|
13
|
-
4. If there are issues or failed tests, repeat from step 2.
|
|
14
|
-
5. After finishing, respond back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
|
|
15
|
-
|
|
16
|
-
## Notes
|
|
17
|
-
- If `gh` command is not available, instruct the user to install and authorize GitHub CLI first.
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡ Analyze and fix small issues [FAST]
|
|
3
|
-
argument-hint: [issues]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Analyze the skills catalog and activate the skills that are needed for the task during the process.
|
|
7
|
-
|
|
8
|
-
## Mission
|
|
9
|
-
**Think hard** to analyze and fix these issues:
|
|
10
|
-
<issues>$ARGUMENTS</issues>
|
|
11
|
-
|
|
12
|
-
## Workflow
|
|
13
|
-
1. If the user provides a screenshots or videos, use `ai-multimodal` skill to describe as detailed as possible the issue, make sure developers can predict the root causes easily based on the description.
|
|
14
|
-
2. Use `debugger` subagent to find the root cause of the issues and report back to main agent.
|
|
15
|
-
3. Activate `debug` skills and `problem-solving` skills to tackle the issues.
|
|
16
|
-
4. Start implementing the fix based the reports and solutions.
|
|
17
|
-
5. Use `tester` agent to test the fix and make sure it works, then report back to main agent.
|
|
18
|
-
6. If there are issues or failed tests, repeat from step 2.
|
|
19
|
-
7. After finishing, respond back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡⚡⚡ Use subagents to plan and fix hard issues
|
|
3
|
-
argument-hint: [issues]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**Ultrathink** to plan & start fixing these issues follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules:
|
|
7
|
-
<issues>$ARGUMENTS</issues>
|
|
8
|
-
|
|
9
|
-
## Workflow:
|
|
10
|
-
|
|
11
|
-
If the user provides a screenshots or videos, use `ai-multimodal` skill to describe as detailed as possible the issue, make sure developers can predict the root causes easily based on the description.
|
|
12
|
-
|
|
13
|
-
### Fullfill the request
|
|
14
|
-
**Question Everything**: Use `AskUserQuestion` tool to ask probing questions to fully understand the user's request, constraints, and true objectives. Don't assume - clarify until you're 100% certain.
|
|
15
|
-
|
|
16
|
-
* If you have any questions, use `AskUserQuestion` tool to ask the user to clarify them.
|
|
17
|
-
* Ask 1 question at a time, wait for the user to answer before moving to the next question.
|
|
18
|
-
* If you don't have any questions, start the next step.
|
|
19
|
-
|
|
20
|
-
### Fix the issue
|
|
21
|
-
|
|
22
|
-
Use `sequential-thinking` skill to break complex problems into sequential thought steps.
|
|
23
|
-
Use `problem-solving` skills to tackle the issues.
|
|
24
|
-
Analyze the skills catalog and activate other skills that are needed for the task during the process.
|
|
25
|
-
|
|
26
|
-
1. Use `debugger` subagent to find the root cause of the issues and report back to main agent.
|
|
27
|
-
2. Use `researcher` subagent to research quickly about the root causes on the internet (if needed) and report back to main agent.
|
|
28
|
-
3. Use `planner` subagent to create an implementation plan based on the reports, then report back to main agent.
|
|
29
|
-
4. Then use `/code` SlashCommand to implement the plan step by step.
|
|
30
|
-
5. Final Report:
|
|
31
|
-
* Report back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
|
|
32
|
-
* Ask the user if they want to commit and push to git repository, if yes, use `git-manager` subagent to commit and push to git repository.
|
|
33
|
-
- **IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports.
|
|
34
|
-
- **IMPORTANT:** In reports, list any unresolved questions at the end, if any.
|
|
35
|
-
|
|
36
|
-
**REMEMBER**:
|
|
37
|
-
- You can always generate images with `ai-multimodal` skills on the fly for visual assets.
|
|
38
|
-
- You always read and analyze the generated assets with `ai-multimodal` skills to verify they meet requirements.
|
|
39
|
-
- For image editing (removing background, adjusting, cropping), use `ImageMagick` skill or similar tools as needed.
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡ Analyze logs and fix issues
|
|
3
|
-
argument-hint: [issue]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
|
|
7
|
-
|
|
8
|
-
## Mission
|
|
9
|
-
<issue>$ARGUMENTS</issue>
|
|
10
|
-
|
|
11
|
-
## Workflow
|
|
12
|
-
1. Check if `./logs.txt` exists:
|
|
13
|
-
- If missing, set up permanent log piping in project's script config (`package.json`, `Makefile`, `pyproject.toml`, etc.):
|
|
14
|
-
- **Bash/Unix**: append `2>&1 | tee logs.txt`
|
|
15
|
-
- **PowerShell**: append `*>&1 | Tee-Object logs.txt`
|
|
16
|
-
- Run the command to generate logs
|
|
17
|
-
2. Use `debugger` subagent to analyze `./logs.txt` and find root causes:
|
|
18
|
-
- Use `Grep` with `head_limit: 30` to read only last 30 lines (avoid loading entire file)
|
|
19
|
-
- If insufficient context, increase `head_limit` as needed
|
|
20
|
-
3. Use `scout` subagent to analyze the codebase and find the exact location of the issues, then report back to main agent.
|
|
21
|
-
4. Use `planner` subagent to create an implementation plan based on the reports, then report back to main agent.
|
|
22
|
-
5. Start implementing the fix based the reports and solutions.
|
|
23
|
-
6. Use `tester` agent to test the fix and make sure it works, then report back to main agent.
|
|
24
|
-
7. Use `code-reviewer` subagent to quickly review the code changes and make sure it meets requirements, then report back to main agent.
|
|
25
|
-
8. If there are issues or failed tests, repeat from step 3.
|
|
26
|
-
9. After finishing, respond back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡⚡ Analyze & fix issues with parallel fullstack-developer agents
|
|
3
|
-
argument-hint: [issues]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**Ultrathink parallel** to fix: <issues>$ARGUMENTS</issues>
|
|
7
|
-
|
|
8
|
-
**IMPORTANT:** Activate needed skills. Ensure token efficiency. Sacrifice grammar for concision.
|
|
9
|
-
|
|
10
|
-
## Workflow
|
|
11
|
-
|
|
12
|
-
### 1. Issue Analysis
|
|
13
|
-
- Use `debugger` subagent to analyze root causes
|
|
14
|
-
- Use `/scout:ext` to find related files
|
|
15
|
-
- Categorize issues by scope/area (frontend, backend, auth, payments, etc.)
|
|
16
|
-
- Identify dependencies between issues
|
|
17
|
-
|
|
18
|
-
### 2. Parallel Fix Planning
|
|
19
|
-
- Trigger `/plan:parallel <detailed-fix-instructions>` for parallel-executable fix plan
|
|
20
|
-
- Wait for plan with dependency graph, execution strategy, file ownership matrix
|
|
21
|
-
- Group independent fixes for parallel execution
|
|
22
|
-
- Sequential fixes for dependent issues
|
|
23
|
-
|
|
24
|
-
### 3. Parallel Fix Implementation
|
|
25
|
-
- Read `plan.md` for dependency graph
|
|
26
|
-
- Launch multiple `fullstack-developer` agents in PARALLEL for independent fixes
|
|
27
|
-
- Example: "Fix auth + Fix payments + Fix UI" → launch 3 agents simultaneously
|
|
28
|
-
- Pass phase file path: `{plan-dir}/phase-XX-*.md`
|
|
29
|
-
- Include environment info
|
|
30
|
-
- Wait for all parallel fixes complete before dependent fixes
|
|
31
|
-
- Sequential fixes: launch one agent at a time
|
|
32
|
-
|
|
33
|
-
### 4. Testing
|
|
34
|
-
- Use `tester` subagent for full test suite
|
|
35
|
-
- NO fake data/mocks/cheats
|
|
36
|
-
- Verify all issues resolved
|
|
37
|
-
- If fail: use `debugger`, fix, repeat
|
|
38
|
-
|
|
39
|
-
### 5. Code Review
|
|
40
|
-
- Use `code-reviewer` for all changes
|
|
41
|
-
- Verify fixes don't introduce regressions
|
|
42
|
-
- If critical issues: fix, retest
|
|
43
|
-
|
|
44
|
-
### 6. Project Management & Docs
|
|
45
|
-
- If approved: use `project-manager` + `docs-manager` in parallel
|
|
46
|
-
- Update plan files, docs, roadmap
|
|
47
|
-
- If rejected: fix and repeat
|
|
48
|
-
|
|
49
|
-
### 7. Final Report
|
|
50
|
-
- Summary of all fixes from parallel phases
|
|
51
|
-
- Verification status per issue
|
|
52
|
-
- Ask to commit (use `git-manager` if yes)
|
|
53
|
-
|
|
54
|
-
**Example:** Fix 1 (auth) + Fix 2 (payments) + Fix 3 (UI) → Launch 3 fullstack-developer agents → Wait → Fix 4 (integration) sequential
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡⚡ Run test suite and fix issues
|
|
3
|
-
argument-hint: [issues]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Analyze the skills catalog and activate the skills that are needed for the task during the process.
|
|
7
|
-
|
|
8
|
-
## Reported Issues:
|
|
9
|
-
<issues>$ARGUMENTS</issues>
|
|
10
|
-
|
|
11
|
-
## Workflow:
|
|
12
|
-
1. Use `tester` subagent to compile the code and fix all syntax errors if any.
|
|
13
|
-
2. Use `tester` subagent to run the tests and report back to main agent.
|
|
14
|
-
3. If there are issues or failed tests, use `debugger` subagent to find the root cause of the issues, then report back to main agent.
|
|
15
|
-
4. Use `planner` subagent to create an implementation plan based on the reports, then report back to main agent.
|
|
16
|
-
5. Use main agent to implement the plan step by step.
|
|
17
|
-
6. Use `tester` agent to test the fix and make sure it works, then report back to main agent.
|
|
18
|
-
6. Use `code-reviewer` subagent to quickly review the code changes and make sure it meets requirements, then report back to main agent.
|
|
19
|
-
7. If there are issues or failed tests, repeat from step 2.
|
|
20
|
-
8. After finishing, respond back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡ Fix type errors
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
Run `bun run typecheck` or `tsc` or `npx tsc` and fix all type errors.
|
|
6
|
-
|
|
7
|
-
## Rules
|
|
8
|
-
- Fix all of type errors and repeat the process until there are no more type errors.
|
|
9
|
-
- Do not use `any` just to pass the type check.
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡⚡ Analyze and fix UI issues
|
|
3
|
-
argument-hint: [issue]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
## Required Skills (Priority Order)
|
|
7
|
-
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
|
|
8
|
-
2. **`aesthetic`** - Design principles
|
|
9
|
-
3. **`frontend-design`** - Implementation patterns
|
|
10
|
-
|
|
11
|
-
Use `ui-ux-designer` subagent to read and analyze `./docs/design-guidelines.md` then fix the following issues:
|
|
12
|
-
<issue>$ARGUMENTS</issue>
|
|
13
|
-
|
|
14
|
-
## Workflow
|
|
15
|
-
**FIRST**: Run `ui-ux-pro-max` searches to understand context and common issues:
|
|
16
|
-
```bash
|
|
17
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
|
|
18
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
|
|
19
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
|
|
20
|
-
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "z-index animation" --domain ux
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
If the user provides a screenshots or videos, use `ai-multimodal` skill to describe as detailed as possible the issue, make sure developers can predict the root causes easily based on the description.
|
|
24
|
-
|
|
25
|
-
1. Use `ui-ux-designer` subagent to implement the fix step by step.
|
|
26
|
-
2. Use screenshot capture tools along with `ai-multimodal` skill to take screenshots of the implemented fix (at the exact parent container, don't take screenshot of the whole page) and use the appropriate Gemini analysis skills (`ai-multimodal`, `video-analysis`, or `document-extraction`) to analyze those outputs so the result matches the design guideline and addresses all issues.
|
|
27
|
-
- If the issues are not addressed, repeat the process until all issues are addressed.
|
|
28
|
-
3. Use `chrome-devtools` skill to analyze the implemented fix and make sure it matches the design guideline.
|
|
29
|
-
4. Use `tester` agent to test the fix and compile the code to make sure it works, then report back to main agent.
|
|
30
|
-
- If there are issues or failed tests, ask main agent to fix all of them and repeat the process until all tests pass.
|
|
31
|
-
5. Project Management & Documentation:
|
|
32
|
-
**If user approves the changes:** Use `project-manager` and `docs-manager` subagents in parallel to update the project progress and documentation:
|
|
33
|
-
* Use `project-manager` subagent to update the project progress and task status in the given plan file.
|
|
34
|
-
* Use `docs-manager` subagent to update the docs in `./docs` directory if needed.
|
|
35
|
-
* Use `project-manager` subagent to create a project roadmap at `./docs/project-roadmap.md` file.
|
|
36
|
-
* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
|
|
37
|
-
**If user rejects the changes:** Ask user to explain the issues and ask main agent to fix all of them and repeat the process.
|
|
38
|
-
6. Final Report:
|
|
39
|
-
* Report back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
|
|
40
|
-
* Ask the user if they want to commit and push to git repository, if yes, use `git-manager` subagent to commit and push to git repository.
|
|
41
|
-
* **IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports.
|
|
42
|
-
* **IMPORTANT:** In reports, list any unresolved questions at the end, if any.
|
|
43
|
-
|
|
44
|
-
**REMEMBER**:
|
|
45
|
-
- You can always generate images with `ai-multimodal` skill on the fly for visual assets.
|
|
46
|
-
- You always read and analyze the generated assets with `ai-multimodal` skill to verify they meet requirements.
|
|
47
|
-
- For image editing (removing background, adjusting, cropping), use `ImageMagick` skill or similar tools as needed.
|
|
48
|
-
- **IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: ⚡⚡ Analyze and fix issues [INTELLIGENT ROUTING]
|
|
3
|
-
argument-hint: [issues]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
**Analyze issues and route to specialized fix command:**
|
|
7
|
-
<issues>$ARGUMENTS</issues>
|
|
8
|
-
|
|
9
|
-
## Decision Tree
|
|
10
|
-
|
|
11
|
-
**1. Check for existing plan:**
|
|
12
|
-
- If markdown plan exists → `/code <path-to-plan>`
|
|
13
|
-
|
|
14
|
-
**2. Route by issue type:**
|
|
15
|
-
|
|
16
|
-
**A) Type Errors** (keywords: type, typescript, tsc, type error)
|
|
17
|
-
→ `/fix:types`
|
|
18
|
-
|
|
19
|
-
**B) UI/UX Issues** (keywords: ui, ux, design, layout, style, visual, button, component, css, responsive)
|
|
20
|
-
→ `/fix:ui <detailed-description>`
|
|
21
|
-
|
|
22
|
-
**C) CI/CD Issues** (keywords: github actions, pipeline, ci/cd, workflow, deployment, build failed)
|
|
23
|
-
→ `/fix:ci <github-actions-url-or-description>`
|
|
24
|
-
|
|
25
|
-
**D) Test Failures** (keywords: test, spec, jest, vitest, failing test, test suite)
|
|
26
|
-
→ `/fix:test <detailed-description>`
|
|
27
|
-
|
|
28
|
-
**E) Log Analysis** (keywords: logs, error logs, log file, stack trace)
|
|
29
|
-
→ `/fix:logs <detailed-description>`
|
|
30
|
-
|
|
31
|
-
**F) Multiple Independent Issues** (2+ unrelated issues in different areas)
|
|
32
|
-
→ `/fix:parallel <detailed-description>`
|
|
33
|
-
|
|
34
|
-
**G) Complex Issues** (keywords: complex, architecture, refactor, major, system-wide, multiple components)
|
|
35
|
-
→ `/fix:hard <detailed-description>`
|
|
36
|
-
|
|
37
|
-
**H) Simple/Quick Fixes** (default: small bug, single file, straightforward)
|
|
38
|
-
→ `/fix:fast <detailed-description>`
|
|
39
|
-
|
|
40
|
-
## Notes
|
|
41
|
-
- `detailed-description` = enhanced prompt describing issue in detail
|
|
42
|
-
- If unclear, ask user for clarification before routing
|
|
43
|
-
- Can combine routes: e.g., multiple type errors + UI issue → `/fix:parallel`
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Analyze Github Actions logs and provide a plan to fix the issues
|
|
3
|
-
argument-hint: [github-actions-url]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
Activate `planning` skill.
|
|
7
|
-
|
|
8
|
-
## Github Actions URL
|
|
9
|
-
$ARGUMENTS
|
|
10
|
-
|
|
11
|
-
Use the `planner` subagent to read the github actions logs, analyze and find the root causes of the issues, then provide a detailed plan for implementing the fixes.
|
|
12
|
-
|
|
13
|
-
**Plan File Specification:**
|
|
14
|
-
- Every `plan.md` MUST start with YAML frontmatter:
|
|
15
|
-
```yaml
|
|
16
|
-
---
|
|
17
|
-
title: "{Brief title}"
|
|
18
|
-
description: "{One sentence for card preview}"
|
|
19
|
-
status: pending
|
|
20
|
-
priority: P1
|
|
21
|
-
effort: {estimated fix time}
|
|
22
|
-
branch: {current git branch}
|
|
23
|
-
tags: [ci, bugfix]
|
|
24
|
-
created: {YYYY-MM-DD}
|
|
25
|
-
---
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
**Output:**
|
|
29
|
-
Provide at least 2 implementation approaches with clear trade-offs, and explain the pros and cons of each approach, and provide a recommended approach.
|
|
30
|
-
|
|
31
|
-
**IMPORTANT:** Ask the user for confirmation before implementing.
|
|
32
|
-
**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
|
|
33
|
-
**IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
description: Create a CRO plan for the given content
|
|
3
|
-
argument-hint: [issues]
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
You are an expert in conversion optimization. Analyze the content based on the given issues:
|
|
7
|
-
<issues>$ARGUMENTS</issues>
|
|
8
|
-
|
|
9
|
-
Activate `planning` skill.
|
|
10
|
-
|
|
11
|
-
**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
|
|
12
|
-
**IMPORTANT:** Sacrifice grammar for the sake of concision when writing outputs.
|
|
13
|
-
|
|
14
|
-
## Conversion Optimization Framework
|
|
15
|
-
|
|
16
|
-
1. Headline 4-U Formula: **Useful, Unique, Urgent, Ultra-specific** (80% won't read past this)
|
|
17
|
-
2. Above-Fold Value Proposition: Customer problem focus, no company story, zero scroll required
|
|
18
|
-
3. CTA First-Person Psychology: "Get MY Guide" vs "Get YOUR Guide" (90% more clicks)
|
|
19
|
-
4. 5-Field Form Maximum: Every field kills conversions, progressive profiling for the rest
|
|
20
|
-
5. Message Match Precision: Ad copy, landing page headline, broken promises = bounce
|
|
21
|
-
6. Social Proof Near CTAs: Testimonials with faces/names, results, placed at decision points
|
|
22
|
-
7. Cognitive Bias Stack: Loss aversion (fear), social proof (FOMO), anchoring (pricing)
|
|
23
|
-
8. PAS Copy Framework: Problem > Agitate > Solve, emotion before logic
|
|
24
|
-
9. Genuine Urgency Only: Real deadlines, actual limits, fake timers destroy trust forever
|
|
25
|
-
10. Price Anchoring Display: Show expensive option first, make real price feel like relief
|
|
26
|
-
11. Trust Signal Clustering: Security badges, guarantees, policies all visible together
|
|
27
|
-
12. Visual Hierarchy F-Pattern: Eyes scan F-shape, put conversions in the path
|
|
28
|
-
13. Lead Magnet Hierarchy: Templates > Checklists > Guides (instant > delayed gratification)
|
|
29
|
-
14. Objection Preemption: Address top 3 concerns before they think them, FAQ near CTA
|
|
30
|
-
15. Mobile Thumb Zone: CTAs where thumbs naturally rest, not stretching required
|
|
31
|
-
16. One-Variable Testing: Change one thing, measure impact, compound wins over time
|
|
32
|
-
17. Post-Conversion Momentum: Thank you page sells next step while excitement peaks
|
|
33
|
-
18. Cart Recovery Sequence: Email in 1 hour, retarget in 4 hours, incentive at 24 hours
|
|
34
|
-
19. Reading Level Grade 6: Smart people prefer simple, 11-word sentences, short paragraphs
|
|
35
|
-
20. TOFU/MOFU/BOFU Logic: Awareness content ≠ decision content, match intent precisely
|
|
36
|
-
21. White Space = Focus: Empty space makes CTAs impossible to miss, crowded = confused
|
|
37
|
-
22. Benefit-First Language: Features tell, benefits sell, transformations compel
|
|
38
|
-
23. Micro-Commitment Ladder: Small yes leads to big yes, start with email only
|
|
39
|
-
24. Performance Tracking Stack: Heatmaps show problems, recordings show why, events show what
|
|
40
|
-
25. Weekly Optimization Ritual: Review metrics Monday, test Tuesday, iterate or scale
|
|
41
|
-
|
|
42
|
-
## Workflow
|
|
43
|
-
|
|
44
|
-
- If the user provides a screenshots or videos, use `ai-multimodal` skill to describe as detailed as possible the issue, make sure fullstack-developer can fully understand the issue easily based on the description.
|
|
45
|
-
- If the user provides a URL, use `web_fetch` tool to fetch the content of the URL and analyze the current issues.
|
|
46
|
-
- You can use screenshot capture tools along with `ai-multimodal` skill to capture screenshots of the exact parent container and analyze the current issues with the appropriate Gemini analysis skills (`ai-multimodal`, `gemini-video-understanding`, or `gemini-document-processing`).
|
|
47
|
-
- Use `/scout:ext` (preferred) or `/scout` (fallback) slash command to search the codebase for files needed to complete the task
|
|
48
|
-
- Use `planner` agent to create a comprehensive CRO plan following the progressive disclosure structure:
|
|
49
|
-
- Create a directory using naming pattern from `## Naming` section.
|
|
50
|
-
- Every `plan.md` MUST start with YAML frontmatter:
|
|
51
|
-
```yaml
|
|
52
|
-
---
|
|
53
|
-
title: "{Brief title}"
|
|
54
|
-
description: "{One sentence for card preview}"
|
|
55
|
-
status: pending
|
|
56
|
-
priority: P2
|
|
57
|
-
effort: {sum of phases, e.g., 4h}
|
|
58
|
-
branch: {current git branch}
|
|
59
|
-
tags: [cro, conversion]
|
|
60
|
-
created: {YYYY-MM-DD}
|
|
61
|
-
---
|
|
62
|
-
```
|
|
63
|
-
- Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
|
|
64
|
-
- For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
|
|
65
|
-
- Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
|
|
66
|
-
- Do not start implementing the CRO plan yet, wait for the user to approve the plan first.
|
|
67
|
-
|
|
68
|
-
**IMPORTANT:** Sacrifice grammar for the sake of concision when writing reports.
|
|
69
|
-
**IMPORTANT:** In reports, list any unresolved questions at the end, if any.
|