cokit-cli 1.2.7 → 1.4.0

package/skills/ui-styling/SKILL.md

@@ -1,319 +0,0 @@
----
-name: 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.
----
-
-# 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/web-testing/SKILL.md

@@ -1,148 +0,0 @@
----
-name: web-testing
-description: Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Multi-language support (JS/TS, Python, Go, Rust, Flutter). Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
----
-
-# Web Testing Skill
-
-Comprehensive testing: unit, integration, E2E, load, security, visual regression, accessibility. Multi-language workflow orchestration with structured QA reporting.
-
-## Core Principle
-
-**NEVER IGNORE FAILING TESTS.** Fix root causes, not symptoms. No mocks/cheats/tricks to pass builds.
-
-## Quick Start
-
-```bash
-# JavaScript/TypeScript
-npx vitest run                    # Unit tests
-npx playwright test               # E2E tests
-npm run test:coverage             # Coverage
-
-# Python
-pytest --cov=src                  # Unit + coverage
-
-# Go / Rust / Flutter
-go test ./... -cover              # Go
-cargo test                        # Rust
-flutter test --coverage           # Flutter
-
-# Web Quality
-k6 run load-test.js               # Load tests
-npx @axe-core/cli https://...    # Accessibility
-npx lighthouse https://...       # Performance
-```
-
-## Workflows
-
-Three orchestrated workflows — load the relevant reference when needed:
-
-| Workflow | Reference | Use When |
-|----------|-----------|----------|
-| Code Testing | `./references/test-execution-workflow.md` | Running unit/integration/e2e, checking coverage, validating builds |
-| UI Testing | `./references/ui-testing-workflow.md` | Visual regression, responsive checks, accessibility audits, form automation |
-| Report Format | `./references/report-format.md` | Generating structured QA summary reports |
-
-**Code Testing Process:** Identify scope → Pre-flight checks → Execute tests → Analyze results → Coverage analysis → Build verification → Report
-
-**UI Testing Process:** Discovery → Visual capture → Console errors → Network validation → Responsive testing → Form testing → Performance metrics → Report
-
-## 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
-
-### Workflows & Reports
-- `./references/test-execution-workflow.md` - Orchestrated code testing (multi-language)
-- `./references/ui-testing-workflow.md` - Browser-based visual testing via `agent-browser`
-- `./references/report-format.md` - Structured QA report template
-
-### 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
-
-## Tools Integration
-
-- **Test runners**: Vitest, Jest, Mocha, pytest, go test, cargo test, flutter test
-- **Coverage**: Istanbul/c8/nyc, pytest-cov, go cover
-- **E2E**: Playwright (multi-browser, sharding)
-- **Load**: k6
-- **Browser**: `agent-browser` skill for UI testing
-- **Analysis**: `ai-multimodal` skill (if available) for screenshot analysis
-- **Debugging**: `debug` skill when tests reveal bugs
-- **Thinking**: `sequential-thinking` skill for complex test failure analysis
-
-## 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
-```
-
-## Quality Standards
-
-- All critical paths must have test coverage
-- Validate happy path AND error scenarios
-- Ensure test isolation — no interdependencies
-- Tests must be deterministic and reproducible
-- Clean up test data after execution
-- Coverage: 80%+ lines, 70%+ branches minimum

package/templates/repo/.github/AGENTS.md

@@ -1,103 +0,0 @@
-# AGENTS.md
-
-## Project Overview
-
-CoKit is a collection of agents, prompts, instructions, and skills designed to enhance GitHub Copilot experiences in Awesome Copilot format.
-
-- **Agents** - Specialized GitHub Copilot agents for various tasks
-- **Prompts** - Task-specific prompts for code generation and problem-solving
-- **Instructions** - Coding standards and best practices applied to specific file patterns
-- **Skills** - Self-contained folders with instructions and bundled resources
-- **Collections** - Curated collections organized around specific themes
-
-## Repository Structure
-
-```
-.
-├── agents/           # Custom agent definitions (.agent.md files)
-├── prompts/          # Task-specific prompts (.prompt.md files)
-├── instructions/     # Coding standards (.instructions.md files)
-├── skills/           # Agent Skills folders (SKILL.md + bundled assets)
-├── collections/      # Curated collections (.collection.yml files)
-├── docs/             # Documentation
-├── eng/              # Build and conversion scripts
-├── src/              # CLI source code
-├── bin/              # CLI entry point
-└── templates/        # Project templates for init command
-```
-
-## Setup Commands
-
-```bash
-# Install dependencies
-npm ci
-
-# Build (generate README.md)
-npm run build
-
-# Convert all resources
-npm run convert:all
-
-# Convert individually
-npm run convert:agents
-npm run convert:commands
-npm run convert:skills
-```
-
-## Development Workflow
-
-### Working with Agents, Prompts, Instructions, and Skills
-
-All files must include proper markdown front matter:
-
-#### Agent Files (*.agent.md)
-- Must have `description` field (wrapped in single quotes)
-- File names should be lowercase with hyphens
-- Recommended to include `model` field
-
-#### Prompt Files (*.prompt.md)
-- Must have `agent` field (value: `'agent'`)
-- Must have `description` field (wrapped in single quotes)
-- File names should be lowercase with hyphens
-
-#### Instruction Files (*.instructions.md)
-- Must have `description` field (wrapped in single quotes)
-- Must have `applyTo` field specifying file patterns
-- File names should be lowercase with hyphens
-
-#### Agent Skills (skills/*/SKILL.md)
-- Each skill is a folder containing a `SKILL.md` file
-- Must have `name` field (lowercase with hyphens, max 64 chars)
-- Must have `description` field (wrapped in single quotes)
-- Can include bundled assets (scripts, templates, data files)
-
-### Adding New Resources
-
-1. Create the file with proper front matter
-2. Add to the appropriate directory
-3. Run `npm run build` to update README.md
-4. Verify the resource appears in the generated README
-
-## Code Style Guidelines
-
-### Markdown Files
-- Use proper front matter with required fields
-- Keep descriptions concise and informative
-- Wrap description values in single quotes
-- Use lowercase file names with hyphens
-
-### JavaScript/Node.js Scripts
-- Located in `eng/` and `src/` directories
-- Follow Node.js ES module conventions (.mjs extension)
-- Use clear, descriptive function and variable names
-
-## Pull Request Guidelines
-
-1. Run `npm run build` before committing
-2. Ensure all markdown files have required front matter
-3. Verify file names follow naming convention
-4. Provide clear description of what your contribution does
-
-## License
-
-CC BY-NC 4.0 - See [LICENSE](LICENSE) for details

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

@@ -1,78 +0,0 @@
----
-description: 'Brainstorm software solutions, evaluate architectural approaches, debate technical decisions.'
-tools: ['search/codebase', 'search/changes', 'web/fetch', 'read/problems']
----
-
-# Brainstormer Agent
-
-You are a Solution Brainstormer, an elite software engineering expert who specializes in system architecture design and technical decision-making. Your core mission is to collaborate with users to find the best possible solutions while maintaining brutal honesty about feasibility and trade-offs.
-
-**IMPORTANT**: Ensure token efficiency while maintaining high quality.
-**IMPORTANT**: Analyze the skills catalog and activate the skills that are needed for the task during the process.
-
-## 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 `planner` agent to research industry best practices and find proven solutions
-- Engage the `docs-manager` agent to understand existing project implementation and constraints
-- Search the web to find efficient approaches and learn from others' experiences
-- Use `docs-seeker` skill to explore latest documentation and reference material
-- Use `sequential-thinking` skill for complex multi-step analysis and structured reasoning
-- Use `ai-multimodal` skill (if available) for analyzing images, diagrams, or visual assets
-- Use `repomix` CLI (if available) to generate a full codebase summary for deep context when needed
-- Use `/ck-scout ext` to scout edge cases in a specific file, or `/ck-scout` for general codebase scouting
-
-## Workflow Phases
-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 the user wants to create an implementation plan — if yes, run `/ck-plan-fast` for a quick plan or `/ck-plan-hard` for a thorough deep-dive plan
-
-## Report Output
-
-Use the naming pattern from the `## Naming` section injected by hooks. If no naming is injected, save reports to `plans/reports/` with pattern `{type}-{date}-{slug}.md`.
-
-### 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.