clikit-plugin 0.1.0

package/skill/testing-anti-patterns/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: testing-anti-patterns
+description: Prevents testing mock behavior instead of real code, test-only methods in production classes, mocking without understanding dependencies.
+---
+
+# Testing Anti-Patterns Skill
+
+You are running the **testing-anti-patterns** skill. Tests should verify real behavior, not mock theater.
+
+## Anti-Pattern #1: Testing Mocks
+
+```javascript
+// BAD: Test verifies mock was called
+const mock = jest.fn();
+service.doThing(mock);
+expect(mock).toHaveBeenCalled();
+
+// This tests nothing about service.doThing
+// It only proves you called the mock
+```
+
+```javascript
+// GOOD: Test verifies actual behavior
+const result = service.doThing(realDependency);
+expect(result.status).toBe('success');
+expect(sideEffectHappened).toBe(true);
+```
+
+## Anti-Pattern #2: Test-Only Methods
+
+```javascript
+// BAD: Method exists only for testing
+class UserService {
+  private validateEmail(email) { ... }  // private
+  _validateEmailForTesting(email) { ... }  // NEVER DO THIS
+}
+
+// This couples tests to implementation
+// Refactoring becomes impossible
+```
+
+```javascript
+// GOOD: Test through public API
+// If you need to test validation, test it through the method that uses it
+const result = userService.register(email);
+expect(result.isValid).toBe(true);
+```
+
+## Anti-Pattern #3: Mocking Without Understanding
+
+```javascript
+// BAD: Over-mocking without knowing why
+jest.mock('./database');
+jest.mock('./logger');
+jest.mock('./config');
+jest.mock('./everything');
+
+// Test now verifies nothing about integration
+// Any refactoring breaks tests
+```
+
+```javascript
+// GOOD: Mock only external boundaries
+// Keep real implementations for:
+// - Domain logic
+// - Internal utilities
+// - Business rules
+
+// Mock only:
+// - Network calls
+// - File system
+// - External services
+// - Time/date
+```
+
+## Decision Matrix
+
+| Mock It? | Yes If... | No If... |
+|----------|-----------|----------|
+| Database | Unit test | Integration test |
+| Logger | Never | Always use real |
+| Config | External file | In-memory defaults |
+| HTTP client | External API | Your own server |
+| Time | Tests time-sensitive logic | Tests pure functions |
+
+## Rules
+
+1. **Test behavior, not implementation** - What does it do, not how
+2. **No test-only code in production** - If it's not used, delete it
+3. **Mock at boundaries** - External dependencies only
+4. **One assertion per test** - Or at least one concept
+5. **Test names describe behavior** - `shouldRejectInvalidEmail` not `testEmail`
+
+## Red Flags
+
+- Test file has more mock setup than assertions
+- Private methods exposed for testing
+- Tests break on harmless refactors
+- `toHaveBeenCalled` without verifying the result
+- Mocking modules you own

package/skill/testing-skills-with-subagents/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: testing-skills-with-subagents
+description: TDD applied to process documentation. RED (baseline without skill) → GREEN (write skill) → REFACTOR (close loopholes).
+---
+
+# Testing Skills with Subagents Skill
+
+You are running the **testing-skills-with-subagents** skill. Skills are code. Test them like code.
+
+## The Problem
+
+Skills are process documentation that guide agent behavior. Untested skills:
+- Have loopholes agents can exploit
+- Miss edge cases
+- Drift from original intent over edits
+
+## The Solution: TDD for Skills
+
+Apply RED-GREEN-REFACTOR to skill creation and validation.
+
+### Phase 1: RED — Establish Baseline
+
+Before writing the skill:
+
+1. **Define the desired behavior** — What should the agent do differently?
+2. **Run a subagent WITHOUT the skill** — Document what it does wrong
+3. **Capture the failure mode** — This is your "failing test"
+
+```
+Example for TDD skill:
+- Desired: Agent writes tests before code
+- Baseline run: Agent writes code first, then adds tests
+- Failure: "I'll implement the function, then write tests"
+```
+
+### Phase 2: GREEN — Write the Skill
+
+1. **Write the skill** — Target the specific failure mode
+2. **Run a subagent WITH the skill** — It should now behave correctly
+3. **Verify the fix** — Did it change behavior as intended?
+
+```
+Skill added: "No code without tests. Delete any code written before test."
+- With skill: Agent refuses to write code, asks for test first
+- Success: Behavior changed in expected direction
+```
+
+### Phase 3: REFACTOR — Close Loopholes
+
+1. **Try to bypass the skill** — Look for edge cases and exploits
+2. **Add constraints** — Tighten rules to prevent bypasses
+3. **Re-run with edge cases** — Verify loopholes are closed
+
+```
+Loophole: "What if I keep the code as 'reference' while writing test?"
+Fix: Add rule: "Write code before test? DELETE the code. Don't keep as reference."
+```
+
+## Workflow
+
+```
+1. Define → What behavior change do you want?
+2. RED → Run subagent without skill, capture failure
+3. GREEN → Write skill, run subagent with skill, verify fix
+4. REFACTOR → Find loopholes, close them, verify
+5. Document → Record test cases in skill or memory
+```
+
+## Test Cases for Skills
+
+Store validated test cases in `.opencode/memory/skill-tests/`:
+
+```markdown
+# tdd-skill-tests.md
+
+## Test 1: Code Before Test
+- Input: "Implement a user service"
+- Without skill: Writes UserService, then asks about tests
+- With skill: Refuses, asks for test first
+- Status: PASS
+
+## Test 2: Reference Code Loophole
+- Input: "Here's reference code for UserService, write tests"
+- Without explicit rule: Keeps reference, writes tests to match
+- With rule: Deletes reference, writes test from spec
+- Status: PASS
+```
+
+## Rules
+
+1. **Never trust a skill you haven't tested** — Run it against a subagent
+2. **Baseline first** — You can't know the skill works without comparison
+3. **Hunt for loopholes** — Actively try to break your own rules
+4. **Document test cases** — Future editors need to know what was validated
+
+## Red Flags
+
+- Skill added without testing against baseline
+- Rules with obvious exceptions
+- Vague language that agents can interpret loosely
+- No documented test cases
+- Skill that "feels right" but has no evidence

package/skill/ui-ux-research/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: ui-ux-research
+description: Use when analyzing UI mockups, conducting UX audits, or researching design patterns with multimodal analysis.
+---
+
+# UI/UX Research Skill
+
+You are running the **ui-ux-research** skill. Multimodal design analysis with Gemini.
+
+## Capabilities
+
+| Analysis Type | Input | Output |
+|---------------|-------|--------|
+| Mockup Review | Screenshot/Image | Component breakdown, issues |
+| Design System Audit | Multiple screenshots | Consistency report |
+| Accessibility Check | UI screenshot | WCAG violations |
+| Competitive Analysis | Multiple designs | Comparison matrix |
+| User Flow Mapping | Screenshots | Flow diagram |
+
+## Process
+
+### 1. Prepare Visual Input
+
+```bash
+# Single screenshot
+gemini -p "Analyze this UI for usability issues: $(cat screenshot.png)"
+
+# Multiple screens
+gemini -p "Review this user flow: $(cat screen1.png screen2.png screen3.png)"
+
+# With context
+gemini -p "Audit this dashboard for a financial app: $(cat dashboard.png)"
+```
+
+### 2. Analysis Dimensions
+
+**Visual Hierarchy**
+- Eye flow direction
+- F-pattern or Z-pattern compliance
+- Contrast and emphasis
+- Whitespace usage
+
+**Interaction Patterns**
+- Button placement and affordance
+- Form field grouping
+- Navigation clarity
+- Feedback mechanisms
+
+**Accessibility**
+- Color contrast ratios
+- Touch target sizes
+- Screen reader compatibility
+- Keyboard navigation
+
+**Responsive Behavior**
+- Breakpoint handling
+- Content reflow
+- Touch vs mouse patterns
+- Portrait/landscape considerations
+
+### 3. Output Structure
+
+```
+## Summary
+[2-3 sentence overall assessment]
+
+## Strengths
+- [What works well]
+
+## Issues
+| Priority | Issue | Location | Fix |
+|----------|-------|----------|-----|
+| High | [issue] | [where] | [how] |
+
+## Recommendations
+[Specific, actionable suggestions]
+```
+
+## Checklist
+
+- [ ] Image quality is sufficient for analysis
+- [ ] Context provided (user type, device, goal)
+- [ ] Multiple angles if analyzing flow
+- [ ] Accessibility explicitly checked
+- [ ] Findings saved to `.opencode/memory/research/`
+
+## Red Flags
+
+- Analyzing without user context
+- Ignoring device constraints
+- Missing accessibility review
+- Not considering edge cases
+- Vague recommendations ("improve UX")

package/skill/using-git-worktrees/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: using-git-worktrees
+description: Use when starting isolated development work. Creates isolated workspace on new branch with smart directory selection.
+---
+
+# Using Git Worktrees Skill
+
+You are running the **using-git-worktrees** skill. Isolated workspaces for parallel development.
+
+## When to Use
+
+- Starting new feature branch
+- Parallel development work
+- Isolated experimentation
+- Hotfix development
+
+## Directory Selection Priority
+
+```
+1. .worktrees/          (preferred hidden directory)
+2. worktrees/           (visible alternative)
+3. Check CLAUDE.md      (project preference)
+4. Ask user             (if unclear)
+```
+
+## Workflow
+
+### 1. Verify Pre-conditions
+```bash
+# Check we're in a git repo
+git rev-parse --is-inside-work-tree
+
+# Check for uncommitted changes
+git status --porcelain
+
+# Check .gitignore exists
+test -f .gitignore && echo "exists"
+```
+
+### 2. Create Worktree
+```bash
+# Choose directory
+WORKTREE_DIR=".worktrees"
+
+# Create branch and worktree
+git worktree add -b <branch-name> ${WORKTREE_DIR}/<branch-name>
+```
+
+### 3. Verify Setup
+```bash
+# Check worktree list
+git worktree list
+
+# Verify .gitignore in worktree
+test -f ${WORKTREE_DIR}/<branch-name>/.gitignore
+```
+
+### 4. Run Setup
+```bash
+# Enter worktree
+cd ${WORKTREE_DIR}/<branch-name>
+
+# Install dependencies
+npm install  # or appropriate package manager
+
+# Run baseline tests
+npm test
+```
+
+## Directory Structure
+
+```
+project-root/
+├── .git/
+├── .worktrees/
+│   ├── feature-a/
+│   ├── feature-b/
+│   └── hotfix-123/
+├── src/
+└── ...
+```
+
+## Branch Naming Convention
+
+```
+feature/[description]    # New features
+fix/[description]        # Bug fixes
+hotfix/[description]     # Urgent fixes
+refactor/[description]   # Code improvements
+experiment/[description] # Exploration
+```
+
+## Commands Reference
+
+| Command | Purpose |
+|---------|---------|
+| `git worktree add -b branch path` | Create new worktree with branch |
+| `git worktree list` | List all worktrees |
+| `git worktree remove path` | Remove worktree |
+| `git worktree prune` | Clean up stale entries |
+
+## Safety Checks
+
+- [ ] Git repository confirmed
+- [ ] No uncommitted changes
+- [ ] .gitignore present
+- [ ] Baseline tests pass
+- [ ] Branch name follows convention
+
+## Anti-Patterns
+
+- Creating worktree with dirty state
+- Not verifying .gitignore
+- Skipping baseline tests
+- Using unclear branch names
+
+## Cleanup
+
+When done with worktree:
+```bash
+# Remove worktree
+git worktree remove ${WORKTREE_DIR}/<branch-name>
+
+# Delete branch (if merged)
+git branch -d <branch-name>
+
+# Prune stale references
+git worktree prune
+```

package/skill/v0/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: v0
+description: Use when generating UI components, building dashboards, creating design systems, or need AI-assisted design implementation.
+---
+
+# V0 Skill
+
+AI-powered UI generation via Vercel's v0 platform MCP. Create React components, generate complete UIs, and get design assistance through natural language prompts.
+
+## Capabilities
+
+- **Component Generation**: Create React components from descriptions
+- **Chat Interface**: Interactive design conversations
+- **Design System Support**: Generate components matching existing design tokens
+- **Dashboard Creation**: Build data visualizations and admin panels
+- **Rapid Prototyping**: Quick iteration on UI concepts
+- **Code Export**: Production-ready React/Next.js code
+
+## When to Use
+
+- Building new UI components from scratch
+- Creating dashboards and admin interfaces
+- Exploring design alternatives
+- Converting mockups to code
+- Generating responsive layouts
+- Building form interfaces
+
+## Key Tools
+
+- `create_chat`: Start a new design conversation
+- `generate_component`: Create component from description
+- `iterate_design`: Refine existing designs
+- `export_code`: Get production-ready code
+
+## Example Usage
+
+```
+// Start design chat
+create_chat({ prompt: "Create a user profile card with avatar, stats, and edit button" })
+
+// Generate component
+generate_component({
+  description: "Data table with sorting, filtering, and pagination",
+  framework: "react",
+  styling: "tailwind"
+})
+
+// Iterate on design
+iterate_design({
+  chat_id: "abc123",
+  feedback: "Make the header sticky and add a search bar"
+})
+```
+
+## Output Format
+
+- React components with TypeScript
+- Tailwind CSS styling by default
+- Accessible by default (WCAG compliant)
+- Mobile-responsive designs
+
+## Notes
+
+- Requires v0 API access
+- Best for React/Next.js projects
+- Integrates with shadcn/ui components
+- Supports custom design tokens

package/skill/v1-run/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: v1-run
+description: Use when selecting npm packages, checking for vulnerabilities, comparing package alternatives, or evaluating package health scores.
+---
+
+# V1-Run Skill
+
+npm package intelligence via MCP providing real-time version data, vulnerability information, health scores, and package comparisons for informed dependency decisions.
+
+## Capabilities
+
+- **Version Info**: Real-time package versions and changelogs
+- **Vulnerability Data**: Security advisories and CVE information
+- **Health Scores**: Package maintenance and popularity metrics
+- **Package Comparisons**: Side-by-side alternative analysis
+- **Dependency Analysis**: Transitive dependency inspection
+- **Download Stats**: npm download trends and patterns
+
+## When to Use
+
+- Selecting between npm package alternatives
+- Checking packages for known vulnerabilities
+- Evaluating package maintenance status
+- Comparing bundle sizes and dependencies
+- Researching package popularity and adoption
+- Making informed dependency decisions
+
+## Key Tools
+
+- `get_package`: Get package details and metadata
+- `check_vulnerabilities`: Security vulnerability scan
+- `get_health_score`: Package health metrics
+- `compare_packages`: Compare multiple packages
+- `get_dependencies`: Analyze dependency tree
+- `get_downloads`: Download statistics
+
+## Example Usage
+
+```
+// Get package info
+get_package({ name: "lodash" })
+
+// Check vulnerabilities
+check_vulnerabilities({ name: "express", version: "4.17.0" })
+// Returns: { vulnerabilities: 2, severity: "medium", cves: [...] }
+
+// Get health score
+get_health_score({ name: "react" })
+// Returns: { score: 95, maintenance: "active", popularity: "very-high" }
+
+// Compare alternatives
+compare_packages({
+  packages: ["axios", "ky", "got", "node-fetch"]
+})
+// Returns comparison table with scores, size, deps
+```
+
+## Health Score Components
+
+- **Maintenance**: Commit frequency, release cadence
+- **Popularity**: Downloads, stars, forks
+- **Quality**: Test coverage, documentation
+- **Security**: Vulnerability history, response time
+- **Community**: Contributors, issue responsiveness
+
+## Decision Support
+
+```
+Example comparison output:
+┌─────────────┬───────┬────────┬────────┬────────┐
+│ Package     │ Score │ Vulns  │ Size   │ Deps   │
+├─────────────┼───────┼────────┼────────┼────────┤
+│ axios       │ 92    │ 0      │ 13KB   │ 1      │
+│ ky          │ 88    │ 0      │ 4KB    │ 0      │
+│ got         │ 85    │ 1(low) │ 68KB   │ 12     │
+│ node-fetch  │ 78    │ 2(med) │ 24KB   │ 0      │
+└─────────────┴───────┴────────┴────────┴────────┘
+```
+
+## Notes
+
+- Real-time data from npm registry
+- Integrates Snyk/npm audit for vulnerabilities
+- Supports scoped packages (@org/package)
+- Includes ESM/CJS compatibility info