Skip to content

feat(guides): add how-ck-works interactive guide with 20 workflow scenarios#2

Open
thieung wants to merge 4 commits intomainfrom
feat/how-ck-works-guide-scenarios
Open

feat(guides): add how-ck-works interactive guide with 20 workflow scenarios#2
thieung wants to merge 4 commits intomainfrom
feat/how-ck-works-guide-scenarios

Conversation

@thieung
Copy link
Copy Markdown
Contributor

@thieung thieung commented Apr 6, 2026

Summary

  • Add interactive "How ClaudeKit Works" workflow visualizer guide page
  • 20 step-by-step scenarios covering both Engineer Kit (12) and Marketer Kit (8)
  • 22 architecture reference docs in docs/ck-architecture/
  • Compact pill-tag scenario selector, pipeline animation, drill-down detail panel
  • Full bilingual EN/VI support

Engineer Kit Scenarios

/ck:brainstorm, /ck:plan, /ck:cook, /ck:fix, /ck:frontend-design, /ck:ship, /ck:code-review, /ck:test, /ck:deploy, /ck:predict, /ck:bootstrap, /ck:security

Marketer Kit Scenarios

/ckm:write:*, /ckm:design, /ckm:seo:*, /ckm:campaign:*, /ckm:social:*, /ckm:email:*, /ckm:persona, /ckm:video:*

New Skills (project-scoped)

  • /vk:add-scenario — generate architecture doc + scenario data from source SKILL.md
  • /vk:audit-guide — audit guide accuracy vs source skills (existing)

Test plan

  • Verify guide page loads at /guides/how-ck-works and /vi/guides/how-ck-works
  • Click each of 20 scenarios — verify steps render correctly
  • Play animation — verify step-by-step progression
  • Click steps — verify detail panel shows explain + code
  • Check all accent colors render (no fallback to purple)
  • Test responsive on mobile viewport

…narios

- Add interactive workflow visualizer for ClaudeKit command pipelines
- 12 Engineer Kit scenarios: brainstorm, plan, cook, fix, frontend-design,
  ship, code-review, test, deploy, predict, bootstrap, security
- 8 Marketer Kit scenarios: write:*, design, seo:*, campaign:*,
  social:*, email:*, persona, video:*
- Compact pill-tag scenario selector with kit grouping
- Step-by-step pipeline view with play/pause animation
- Drill-down detail panel with explain + code tabs
- 22 architecture reference docs in docs/ck-architecture/
- Bilingual EN/VI support throughout
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
vividkit-web Ready Ready Preview, Comment Apr 7, 2026 3:58am

Mini floating card appears on hover (desktop only) showing:
- Step icon, name, type badge, step number
- Sub-agent "Spawned" indicator
- Short description (3-line clamp)
- "Click for details" hint
Hidden when step is already expanded in detail panel.
- Remove redundant hover tooltip from pipeline nodes
- Add prev/next arrow buttons in terminal header for step navigation
- Show step counter (Step N/M) in terminal header
- Format explain text with proper paragraphs and indented bullet lists
- Bold text before em-dash in bullet items for visual hierarchy
…io selector

- Add Engineer Kit / Marketing Kit tab toggle with counts
- Implement activeKit state and switchKit() method in Alpine component
- Add filteredScenarios computed property for filtering scenarios by kit
- Rename "Marketer Kit" → "Marketing Kit" across data and UI
- Auto-select first scenario of new kit on tab switch
- Update scenario info card kit label with color-coded styling
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant