cokit-cli 1.2.7 → 1.4.0

package/templates/repo/.github/skills/ck-test/references/report-format.md

@@ -0,0 +1,58 @@
+# Test Report Format
+
+Structured QA report template. Sacrifice grammar for concision.
+
+## Template
+
+```markdown
+# Test Report — {date} — {scope}
+
+## Test Results Overview
+- **Total**: X tests
+- **Passed**: X | **Failed**: X | **Skipped**: X
+- **Duration**: Xs
+
+## Coverage Metrics
+| Metric   | Value | Threshold | Status |
+|----------|-------|-----------|--------|
+| Lines    | X%    | 80%       | PASS/FAIL |
+| Branches | X%    | 70%       | PASS/FAIL |
+| Functions| X%    | 80%       | PASS/FAIL |
+
+## Failed Tests
+### `test/path/file.test.ts` — TestName
+- **Error**: Error message
+- **Stack**: Relevant stack trace (truncated)
+- **Cause**: Brief root cause analysis
+- **Fix**: Suggested resolution
+
+## UI Test Results (if applicable)
+- **Pages tested**: X
+- **Screenshots**: ./screenshots/
+- **Console errors**: none | [list]
+- **Responsive**: checked at [viewports] | skipped
+- **Performance**: LCP Xs, FID Xms, CLS X
+
+## Build Status
+- **Build**: PASS/FAIL
+- **Warnings**: none | [list]
+- **Dependencies**: all resolved | [issues]
+
+## Critical Issues
+1. [Blocking issue description + impact]
+
+## Recommendations
+1. [Actionable improvement with priority]
+
+## Unresolved Questions
+- [Any open questions, if any]
+```
+
+## Guidelines
+
+- Include ALL failed tests with error messages — don't summarize away details
+- Coverage: highlight specific uncovered files/functions, not just percentages
+- Screenshots: embed paths directly in report for easy access
+- Recommendations: prioritize by impact (critical > high > medium > low)
+- Keep report under 200 lines — split into sections if larger scope needed
+- Save report using naming pattern from `## Naming` section injected by hooks

package/templates/repo/.github/skills/ck-test/references/test-execution-workflow.md

@@ -0,0 +1,103 @@
+# Test Execution Workflow
+
+## Step 1: Identify Scope
+
+Determine what to test based on recent changes:
+- New feature → full test suite + new test cases
+- Bug fix → regression tests + targeted fix validation
+- Refactor → existing test suite (no new tests unless gaps found)
+- Coverage check → full suite with coverage flags
+
+## Step 2: Pre-flight Checks
+
+Run syntax/type checks before tests to catch compile errors early:
+
+```bash
+# JavaScript/TypeScript
+npx tsc --noEmit          # TypeScript check
+npx eslint .              # Lint check
+
+# Python
+python -m py_compile file.py
+flake8 .
+
+# Flutter
+flutter analyze
+
+# Go
+go vet ./...
+
+# Rust
+cargo check
+```
+
+## Step 3: Execute Tests
+
+### JavaScript/TypeScript
+```bash
+npm test                    # or yarn test / pnpm test / bun test
+npm run test:coverage       # with coverage
+npx vitest run              # Vitest
+npx jest --coverage         # Jest with coverage
+```
+
+### Python
+```bash
+pytest                      # basic
+pytest --cov=src --cov-report=term-missing  # with coverage
+python -m unittest discover # unittest
+```
+
+### Go / Rust / Flutter
+```bash
+go test ./... -cover        # Go with coverage
+cargo test                  # Rust
+flutter test --coverage     # Flutter
+```
+
+## Step 4: Analyze Results
+
+Focus on:
+1. **Failing tests** — read error messages and stack traces carefully
+2. **Flaky tests** — tests that pass/fail intermittently indicate race conditions or state leaks
+3. **Slow tests** — identify bottlenecks (>5s per test is suspicious)
+4. **Skipped tests** — ensure skips are intentional, not hiding failures
+
+## Step 5: Coverage Analysis
+
+Thresholds:
+- **80%+** line coverage — standard minimum
+- **70%+** branch coverage — acceptable for most projects
+- Focus on critical paths: auth, payment, data mutations
+
+Identify gaps:
+- Uncovered error handlers
+- Missing edge case branches
+- Untested utility functions
+
+## Step 6: Build Verification
+
+```bash
+npm run build               # JS/TS production build
+python setup.py build       # Python
+go build ./...              # Go
+cargo build --release       # Rust
+flutter build               # Flutter
+```
+
+Check for:
+- Build warnings or deprecation notices
+- Unresolved dependencies
+- Production config correctness
+
+## Quality Checklist
+
+- [ ] All tests pass (zero failures)
+- [ ] Coverage meets project threshold
+- [ ] No flaky tests detected
+- [ ] Build completes without errors
+- [ ] Error scenarios tested
+- [ ] Test isolation verified (no shared state)
+- [ ] Test data cleaned up after execution
+- [ ] Mocks/stubs properly configured
+- [ ] Environment variables correctly set

package/templates/repo/.github/skills/ck-test/references/ui-testing-workflow.md

@@ -0,0 +1,65 @@
+# UI Testing Workflow
+
+Activate the ck:chrome-devtools (if available) skill.
+
+## Purpose
+Run comprehensive UI tests on a website and generate a detailed report.
+
+## Arguments
+- $1: URL - The URL of the website to test
+- $2: OPTIONS - Optional test configuration (e.g., --headless, --mobile, --auth)
+
+## Testing Protected Routes (Authentication)
+
+### Step 1: User Manual Login
+Instruct the user to:
+1. Open the target site in their browser
+2. Log in manually with their credentials
+3. Open browser DevTools (F12) → Application tab → Cookies/Storage
+
+### Step 2: Extract Auth Credentials
+Ask the user to provide one of:
+- **Cookies**: Copy cookie values (name, value, domain)
+- **Access Token**: Copy JWT/Bearer token from localStorage or cookies
+- **Session Storage**: Copy relevant session keys
+
+### Step 3: Inject Authentication
+Use the `inject-auth.js` script:
+
+```bash
+cd $SKILL_DIR  # chrome-devtools scripts (if available)
+
+# Option A: Inject cookies
+node inject-auth.js --url https://example.com --cookies '[{"name":"session","value":"abc123","domain":".example.com"}]'
+
+# Option B: Inject Bearer token
+node inject-auth.js --url https://example.com --token "Bearer eyJhbGciOi..." --header Authorization --token-key access_token
+
+# Option C: Inject localStorage
+node inject-auth.js --url https://example.com --local-storage '{"auth_token":"xyz","user_id":"123"}'
+```
+
+### Step 4: Run Tests
+After auth injection, run tests normally:
+```bash
+node navigate.js --url https://example.com/dashboard
+node screenshot.js --url https://example.com/profile --output profile.png
+```
+
+## Workflow
+- Use `plan` skill to organize the test plan & report
+- All screenshots saved in the same report directory
+- Browse URL, discover all pages, components, endpoints
+- Create test plan based on discovered structure
+- Use multiple `ck-tester` subagents in parallel for: pages, forms, navigation, user flows, accessibility, responsive layouts, performance, security, seo
+- Use `ai-multimodal` (if available) to analyze all screenshots
+- Generate comprehensive Markdown report
+- Ask user if they want to preview with `/ck-preview`
+
+## Output Requirements
+- Clear, structured Markdown with headers, lists, code blocks
+- Include test results summary, key findings, screenshot references
+- Ensure token efficiency while maintaining high quality
+- Sacrifice grammar for concision
+
+**Do not** start implementing fixes.

package/templates/repo/.github/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/templates/repo/.github/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
+```