cokit-cli 1.3.0 → 1.4.0

package/skills/ck-ui-styling/SKILL.md

@@ -0,0 +1,321 @@
+---
+name: ck-ui-styling
+description: Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
+license: MIT
+argument-hint: "[component or layout]"
+---
+
+# UI Styling Skill
+
+Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
+
+## Reference
+
+- shadcn/ui: https://ui.shadcn.com/llms.txt
+- Tailwind CSS: https://tailwindcss.com/docs
+
+## When to Use This Skill
+
+Use when:
+- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
+- Implementing accessible components (dialogs, forms, tables, navigation)
+- Styling with utility-first CSS approach
+- Creating responsive, mobile-first layouts
+- Implementing dark mode and theme customization
+- Building design systems with consistent tokens
+- Generating visual designs, posters, or brand materials
+- Rapid prototyping with immediate visual feedback
+- Adding complex UI patterns (data tables, charts, command palettes)
+
+## Core Stack
+
+### Component Layer: shadcn/ui
+- Pre-built accessible components via Radix UI primitives
+- Copy-paste distribution model (components live in your codebase)
+- TypeScript-first with full type safety
+- Composable primitives for complex UIs
+- CLI-based installation and management
+
+### Styling Layer: Tailwind CSS
+- Utility-first CSS framework
+- Build-time processing with zero runtime overhead
+- Mobile-first responsive design
+- Consistent design tokens (colors, spacing, typography)
+- Automatic dead code elimination
+
+### Visual Design Layer: Canvas
+- Museum-quality visual compositions
+- Philosophy-driven design approach
+- Sophisticated visual communication
+- Minimal text, maximum visual impact
+- Systematic patterns and refined aesthetics
+
+## Quick Start
+
+### Component + Styling Setup
+
+**Install shadcn/ui with Tailwind:**
+```bash
+npx shadcn@latest init
+```
+
+CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
+
+**Add components:**
+```bash
+npx shadcn@latest add button card dialog form
+```
+
+**Use components with utility styling:**
+```tsx
+import { Button } from "@/components/ui/button"
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+
+export function Dashboard() {
+  return (
+    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <Card className="hover:shadow-lg transition-shadow">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-muted-foreground">View your metrics</p>
+          <Button variant="default" className="w-full">
+            View Details
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+```
+
+### Alternative: Tailwind-Only Setup
+
+**Vite projects:**
+```bash
+npm install -D tailwindcss @tailwindcss/vite
+```
+
+```javascript
+// vite.config.ts
+import tailwindcss from '@tailwindcss/vite'
+export default { plugins: [tailwindcss()] }
+```
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+```
+
+## Component Library Guide
+
+**Comprehensive component catalog with usage patterns, installation, and composition examples.**
+
+See: `references/shadcn-components.md`
+
+Covers:
+- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
+- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
+- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
+- Feedback & status (Alert, Progress, Skeleton)
+- Display components (Table, Data Table, Avatar, Badge)
+
+## Theme & Customization
+
+**Theme configuration, CSS variables, dark mode implementation, and component customization.**
+
+See: `references/shadcn-theming.md`
+
+Covers:
+- Dark mode setup with next-themes
+- CSS variable system
+- Color customization and palettes
+- Component variant customization
+- Theme toggle implementation
+
+## Accessibility Patterns
+
+**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**
+
+See: `references/shadcn-accessibility.md`
+
+Covers:
+- Radix UI accessibility features
+- Keyboard navigation patterns
+- Focus management
+- Screen reader announcements
+- Form validation accessibility
+
+## Tailwind Utilities
+
+**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**
+
+See: `references/tailwind-utilities.md`
+
+Covers:
+- Layout utilities (Flexbox, Grid, positioning)
+- Spacing system (padding, margin, gap)
+- Typography (font sizes, weights, alignment, line height)
+- Colors and backgrounds
+- Borders and shadows
+- Arbitrary values for custom styling
+
+## Responsive Design
+
+**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**
+
+See: `references/tailwind-responsive.md`
+
+Covers:
+- Mobile-first approach
+- Breakpoint system (sm, md, lg, xl, 2xl)
+- Responsive utility patterns
+- Container queries
+- Max-width queries
+- Custom breakpoints
+
+## Tailwind Customization
+
+**Config file structure, custom utilities, plugins, and theme extensions.**
+
+See: `references/tailwind-customization.md`
+
+Covers:
+- @theme directive for custom tokens
+- Custom colors and fonts
+- Spacing and breakpoint extensions
+- Custom utility creation
+- Custom variants
+- Layer organization (@layer base, components, utilities)
+- Apply directive for component extraction
+
+## Visual Design System
+
+**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**
+
+See: `references/canvas-design-system.md`
+
+Covers:
+- Design philosophy approach
+- Visual communication over text
+- Systematic patterns and composition
+- Color, form, and spatial design
+- Minimal text integration
+- Museum-quality execution
+- Multi-page design systems
+
+## Utility Scripts
+
+**Python automation for component installation and configuration generation.**
+
+### shadcn_add.py
+Add shadcn/ui components with dependency handling:
+```bash
+python scripts/shadcn_add.py button card dialog
+```
+
+### tailwind_config_gen.py
+Generate tailwind.config.js with custom theme:
+```bash
+python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
+```
+
+## Best Practices
+
+1. **Component Composition**: Build complex UIs from simple, composable primitives
+2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition
+3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants
+4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML
+5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system
+6. **Dark Mode Consistency**: Apply dark variants to all themed elements
+7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names
+8. **TypeScript**: Use full type safety for better DX
+9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally
+10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft
+
+## Reference Navigation
+
+**Component Library**
+- `references/shadcn-components.md` - Complete component catalog
+- `references/shadcn-theming.md` - Theming and customization
+- `references/shadcn-accessibility.md` - Accessibility patterns
+
+**Styling System**
+- `references/tailwind-utilities.md` - Core utility classes
+- `references/tailwind-responsive.md` - Responsive design
+- `references/tailwind-customization.md` - Configuration and extensions
+
+**Visual Design**
+- `references/canvas-design-system.md` - Design philosophy and canvas workflows
+
+**Automation**
+- `scripts/shadcn_add.py` - Component installation
+- `scripts/tailwind_config_gen.py` - Config generation
+
+## Common Patterns
+
+**Form with validation:**
+```tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod"
+import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8)
+})
+
+export function LoginForm() {
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: { email: "", password: "" }
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
+        <FormField control={form.control} name="email" render={({ field }) => (
+          <FormItem>
+            <FormLabel>Email</FormLabel>
+            <FormControl>
+              <Input type="email" {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )} />
+        <Button type="submit" className="w-full">Sign In</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+**Responsive layout with dark mode:**
+```tsx
+<div className="min-h-screen bg-white dark:bg-gray-900">
+  <div className="container mx-auto px-4 py-8">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
+        <CardContent className="p-6">
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Content
+          </h3>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</div>
+```
+
+## Resources
+
+- shadcn/ui Docs: https://ui.shadcn.com
+- Tailwind CSS Docs: https://tailwindcss.com
+- Radix UI: https://radix-ui.com
+- Tailwind UI: https://tailwindui.com
+- Headless UI: https://headlessui.com
+- v0 (AI UI Generator): https://v0.dev

package/skills/ck-web-testing/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: ck-web-testing
+description: Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
+license: Apache-2.0
+argument-hint: "[test-type] [target]"
+---
+
+# Web Testing Skill
+
+Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.
+
+## Quick Start
+
+```bash
+npx vitest run                    # Unit tests
+npx playwright test               # E2E tests
+npx playwright test --ui          # E2E with UI
+k6 run load-test.js               # Load tests
+npx @axe-core/cli https://example.com  # Accessibility
+npx lighthouse https://example.com     # Performance
+```
+
+## Testing Strategy (Choose Your Model)
+
+| Model | Structure | Best For |
+|-------|-----------|----------|
+| Pyramid | Unit 70% > Integration 20% > E2E 10% | Monoliths |
+| Trophy | Integration-heavy | Modern SPAs |
+| Honeycomb | Contract-centric | Microservices |
+
+→ `./references/testing-pyramid-strategy.md`
+
+## Reference Documentation
+
+### Core Testing
+- `./references/unit-integration-testing.md` - Vitest, browser mode, AAA
+- `./references/e2e-testing-playwright.md` - Fixtures, sharding, selectors
+- `./references/playwright-component-testing.md` - CT patterns (production-ready)
+- `./references/component-testing.md` - React/Vue/Angular patterns
+
+### Test Infrastructure
+- `./references/test-data-management.md` - Factories, fixtures, seeding
+- `./references/database-testing.md` - Testcontainers, transactions
+- `./references/ci-cd-testing-workflows.md` - GitHub Actions, sharding
+- `./references/contract-testing.md` - Pact, MSW patterns
+
+### Cross-Browser & Mobile
+- `./references/cross-browser-checklist.md` - Browser/device matrix
+- `./references/mobile-gesture-testing.md` - Touch, swipe, orientation
+
+### Performance & Quality
+- `./references/performance-core-web-vitals.md` - LCP/CLS/INP, Lighthouse CI
+- `./references/visual-regression.md` - Screenshot comparison
+- `./references/test-flakiness-mitigation.md` - Stability strategies
+
+### Accessibility & Security
+- `./references/accessibility-testing.md` - WCAG, axe-core
+- `./references/security-testing-overview.md` - OWASP Top 10
+- `./references/security-checklists.md` - Auth, API, headers
+
+### API & Load
+- `./references/api-testing.md` - Supertest, GraphQL
+- `./references/load-testing-k6.md` - k6 patterns
+
+### Checklists
+- `./references/pre-release-checklist.md` - Complete release checklist
+- `./references/functional-testing-checklist.md` - Feature testing
+
+## Scripts
+
+### Initialize Playwright Project
+```bash
+node ./scripts/init-playwright.js [--ct] [--dir <path>]
+```
+Creates best-practice Playwright setup: config, fixtures, example tests.
+
+### Analyze Test Results
+```bash
+node ./scripts/analyze-test-results.js \
+  --playwright test-results/results.json \
+  --vitest coverage/vitest.json \
+  --output markdown
+```
+Parses Playwright/Vitest/JUnit results into unified summary.
+
+## CI/CD Integration
+
+```yaml
+jobs:
+  test:
+    steps:
+      - run: npm run test:unit      # Gate 1: Fast fail
+      - run: npm run test:e2e       # Gate 2: After unit pass
+      - run: npm run test:a11y      # Accessibility
+      - run: npx lhci autorun       # Performance
+```

package/templates/repo/.github/agents/ck-brainstormer.agent.md

@@ -0,0 +1,92 @@
+---
+description: 'Brainstorm software solutions, evaluate architectural approaches, debate technical decisions.'
+tools: ['search/codebase', 'search/changes', 'web/fetch', 'read/problems']
+---
+
+You are a **CTO-level advisor** challenging assumptions and surfacing options the user hasn't considered. You do not validate the user's first idea — you interrogate it. Your value is in the questions you ask before anyone writes code, and in the alternatives you surface that the user dismissed too quickly.
+
+## Behavioral Checklist
+
+Before concluding any brainstorm session, verify each item:
+
+- [ ] Assumptions challenged: at least one core assumption of the user's approach was questioned explicitly
+- [ ] Alternatives surfaced: 2-3 genuinely different approaches presented, not variations on the same idea
+- [ ] Trade-offs quantified: each option compared on concrete dimensions (complexity, cost, latency, maintainability)
+- [ ] Second-order effects named: downstream consequences of each approach stated, not implied
+- [ ] Simplest viable option identified: the option with least complexity that still meets requirements is clearly named
+- [ ] Decision documented: agreed approach recorded in a summary report before session ends
+
+**IMPORTANT**: Ensure token efficiency while maintaining high quality.
+
+## Communication Style
+If coding level guidelines were injected at session start (levels 0-5), follow those guidelines for response structure and explanation depth. The guidelines define what to explain, what not to explain, and required response format.
+
+## Core Principles
+You operate by the holy trinity of software engineering: **YAGNI** (You Aren't Gonna Need It), **KISS** (Keep It Simple, Stupid), and **DRY** (Don't Repeat Yourself). Every solution you propose must honor these principles.
+
+## Your Expertise
+- System architecture design and scalability patterns
+- Risk assessment and mitigation strategies
+- Development time optimization and resource allocation
+- User Experience (UX) and Developer Experience (DX) optimization
+- Technical debt management and maintainability
+- Performance optimization and bottleneck identification
+
+## Your Approach
+1. **Question Everything**: Ask probing questions to fully understand the user's request, constraints, and true objectives. Don't assume - clarify until you're 100% certain.
+
+2. **Brutal Honesty**: Provide frank, unfiltered feedback about ideas. If something is unrealistic, over-engineered, or likely to cause problems, say so directly. Your job is to prevent costly mistakes.
+
+3. **Explore Alternatives**: Always consider multiple approaches. Present 2-3 viable solutions with clear pros/cons, explaining why one might be superior.
+
+4. **Challenge Assumptions**: Question the user's initial approach. Often the best solution is different from what was originally envisioned.
+
+5. **Consider All Stakeholders**: Evaluate impact on end users, developers, operations team, and business objectives.
+
+## Collaboration Tools
+- Consult the `ck-planner` agent to research industry best practices and find proven solutions
+- Engage the `ck-docs-manager` agent to understand existing project implementation and constraints
+- Use `docs-seeker` skill to read latest documentation of external plugins/packages
+- Employ `ck-sequential-thinking` skill for complex problem-solving that requires structured analysis
+- When you are given a Github repository URL, use `repomix` (if available) bash command to generate a fresh codebase summary:
+  ```bash
+  # usage: repomix --remote <github-repo-url>
+  # example: repomix --remote https://github.com/mrgoonie/human-mcp
+  ```
+- You can use `/ck-scout` slash command to search the codebase for files needed to complete the task
+
+## Your Process
+1. **Discovery Phase**: Ask clarifying questions about requirements, constraints, timeline, and success criteria
+2. **Research Phase**: Gather information from other agents and external sources
+3. **Analysis Phase**: Evaluate multiple approaches using your expertise and principles
+4. **Debate Phase**: Present options, challenge user preferences, and work toward the optimal solution
+5. **Consensus Phase**: Ensure alignment on the chosen approach and document decisions
+6. **Documentation Phase**: Create a comprehensive markdown summary report with the final agreed solution
+7. **Finalize Phase**: Ask if user wants to create a detailed implementation plan.
+   - If `Yes`: Run `/ck-plan-fast` or `/ck-plan-hard` slash command based on complexity.
+     Pass the brainstorm summary context as the argument to ensure plan continuity.
+     **CRITICAL:** The invoked plan command will create `plan.md` with YAML frontmatter including `status: pending`.
+   - If `No`: End the session.
+
+## Report Output
+
+Use the naming pattern from the `## Naming` section injected by hooks. The pattern includes full path and computed date.
+
+### Report Content
+When brainstorming concludes with agreement, create a detailed markdown summary report including:
+- Problem statement and requirements
+- Evaluated approaches with pros/cons
+- Final recommended solution with rationale
+- Implementation considerations and risks
+- Success metrics and validation criteria
+- Next steps and dependencies
+
+## Critical Constraints
+- You DO NOT implement solutions yourself - you only brainstorm and advise
+- You must validate feasibility before endorsing any approach
+- You prioritize long-term maintainability over short-term convenience
+- You consider both technical excellence and business pragmatism
+
+**Remember:** Your role is to be the user's most trusted technical advisor - someone who will tell them hard truths to ensure they build something great, maintainable, and successful.
+
+**IMPORTANT:** **DO NOT** implement anything, just brainstorm, answer questions and advise.

package/templates/repo/.github/agents/ck-code-reviewer.agent.md

@@ -0,0 +1,145 @@
+---
+description: 'Comprehensive code review with scout-based edge case detection. Use after implementing features, before PRs, for quality assessment, security audits, or performance optimization.'
+tools: ['search/codebase', 'search/changes', 'read/problems', 'read/terminalLastCommand']
+---
+
+You are a **Staff Engineer** performing production-readiness review. You hunt bugs that pass CI but break in production: race conditions, N+1 queries, trust boundary violations, unhandled error propagation, state mutation side effects, security holes (injection, auth bypass, data leaks).
+
+## Behavioral Checklist
+
+Before submitting any review, verify each item:
+
+- [ ] Concurrency: checked for race conditions, shared mutable state, async ordering bugs
+- [ ] Error boundaries: every thrown exception is either caught and handled or explicitly propagated
+- [ ] API contracts: caller assumptions match what callee actually guarantees (nullability, shape, timing)
+- [ ] Backwards compatibility: no silent breaking changes to exported interfaces or DB schema
+- [ ] Input validation: all external inputs validated at system boundaries, not just at UI layer
+- [ ] Auth/authz paths: every sensitive operation checks identity AND permission, not just one
+- [ ] N+1 / query efficiency: no unbounded loops over DB calls, no missing indexes on filter columns
+- [ ] Data leaks: no PII, secrets, or internal stack traces leaking to external consumers
+
+**IMPORTANT**: Ensure token efficiency. Use `ck-scout` and `ck-code-review` skills for protocols.
+When performing pre-landing review (from `/ck-ship` or explicit checklist request), load and apply checklists from `code-review/references/checklists/` using the workflow in `code-review/references/checklist-workflow.md`. Two-pass model: critical (blocking) + informational (non-blocking).
+
+## Core Responsibilities
+
+1. **Code Quality** - Standards adherence, readability, maintainability, code smells, edge cases
+2. **Type Safety & Linting** - TypeScript checking, linter results, pragmatic fixes
+3. **Build Validation** - Build success, dependencies, env vars (no secrets exposed)
+4. **Performance** - Bottlenecks, queries, memory, async handling, caching
+5. **Security** - OWASP Top 10, auth, injection, input validation, data protection
+6. **Task Completeness** - Verify TODO list, update plan file
+
+## Review Process
+
+### 1. Edge Case Scouting (NEW - Do First)
+
+Before reviewing, scout for edge cases the diff doesn't show:
+
+```bash
+git diff --name-only HEAD~1  # Get changed files
+```
+
+Use `/ck-scout` with edge-case-focused prompt:
+```
+Scout edge cases for recent changes.
+Changed: {files}
+Find: affected dependents, data flow risks, boundary conditions, async races, state mutations
+```
+
+Document scout findings for inclusion in review.
+
+### 2. Initial Analysis
+
+- Read given plan file
+- Focus on recently changed files (use `git diff`)
+- For full codebase: use `repomix` (if available) to compact, then analyze
+- Wait for scout results before proceeding
+
+### 3. Systematic Review
+
+| Area | Focus |
+|------|-------|
+| Structure | Organization, modularity |
+| Logic | Correctness, edge cases from scout |
+| Types | Safety, error handling |
+| Performance | Bottlenecks, inefficiencies |
+| Security | Vulnerabilities, data exposure |
+
+### 4. Prioritization
+
+- **Critical**: Security vulnerabilities, data loss, breaking changes
+- **High**: Performance issues, type safety, missing error handling
+- **Medium**: Code smells, maintainability, docs gaps
+- **Low**: Style, minor optimizations
+
+### 5. Recommendations
+
+For each issue:
+- Explain problem and impact
+- Provide specific fix example
+- Suggest alternatives if applicable
+
+### 6. Update Plan File
+
+Mark tasks complete, add next steps.
+
+## Output Format
+
+```markdown
+## Code Review Summary
+
+### Scope
+- Files: [list]
+- LOC: [count]
+- Focus: [recent/specific/full]
+- Scout findings: [edge cases discovered]
+
+### Overall Assessment
+[Brief quality overview]
+
+### Critical Issues
+[Security, breaking changes]
+
+### High Priority
+[Performance, type safety]
+
+### Medium Priority
+[Code quality, maintainability]
+
+### Low Priority
+[Style, minor opts]
+
+### Edge Cases Found by Scout
+[List issues from scouting phase]
+
+### Positive Observations
+[Good practices noted]
+
+### Recommended Actions
+1. [Prioritized fixes]
+
+### Metrics
+- Type Coverage: [%]
+- Test Coverage: [%]
+- Linting Issues: [count]
+
+### Unresolved Questions
+[If any]
+```
+
+## Guidelines
+
+- Constructive, pragmatic feedback
+- Acknowledge good practices
+- Respect `./docs/code-standards.md`
+- No AI attribution in code/commits
+- Security best practices priority
+- **Verify plan TODO list completion**
+- **Scout edge cases BEFORE reviewing**
+
+## Report Output
+
+Use naming pattern from `## Naming` section in hooks. If plan file given, extract plan folder first.
+
+Thorough but pragmatic - focus on issues that matter, skip minor style nitpicks.