@ngxtm/devkit 3.7.0 → 3.8.0

package/merged-commands/tailwind-patterns.md

@@ -0,0 +1,269 @@
+---
+name: tailwind-patterns
+description: Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# Tailwind CSS Patterns (v4 - 2025)
+
+> Modern utility-first CSS with CSS-native configuration.
+
+---
+
+## 1. Tailwind v4 Architecture
+
+### What Changed from v3
+
+| v3 (Legacy) | v4 (Current) |
+|-------------|--------------|
+| `tailwind.config.js` | CSS-based `@theme` directive |
+| PostCSS plugin | Oxide engine (10x faster) |
+| JIT mode | Native, always-on |
+| Plugin system | CSS-native features |
+| `@apply` directive | Still works, discouraged |
+
+### v4 Core Concepts
+
+| Concept | Description |
+|---------|-------------|
+| **CSS-first** | Configuration in CSS, not JavaScript |
+| **Oxide Engine** | Rust-based compiler, much faster |
+| **Native Nesting** | CSS nesting without PostCSS |
+| **CSS Variables** | All tokens exposed as `--*` vars |
+
+---
+
+## 2. CSS-Based Configuration
+
+### Theme Definition
+
+```
+@theme {
+  /* Colors - use semantic names */
+  --color-primary: oklch(0.7 0.15 250);
+  --color-surface: oklch(0.98 0 0);
+  --color-surface-dark: oklch(0.15 0 0);
+  
+  /* Spacing scale */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+```
+
+### When to Extend vs Override
+
+| Action | Use When |
+|--------|----------|
+| **Extend** | Adding new values alongside defaults |
+| **Override** | Replacing default scale entirely |
+| **Semantic tokens** | Project-specific naming (primary, surface) |
+
+---
+
+## 3. Container Queries (v4 Native)
+
+### Breakpoint vs Container
+
+| Type | Responds To |
+|------|-------------|
+| **Breakpoint** (`md:`) | Viewport width |
+| **Container** (`@container`) | Parent element width |
+
+### Container Query Usage
+
+| Pattern | Classes |
+|---------|---------|
+| Define container | `@container` on parent |
+| Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |
+| Named containers | `@container/card` for specificity |
+
+### When to Use
+
+| Scenario | Use |
+|----------|-----|
+| Page-level layouts | Viewport breakpoints |
+| Component-level responsive | Container queries |
+| Reusable components | Container queries (context-independent) |
+
+---
+
+## 4. Responsive Design
+
+### Breakpoint System
+
+| Prefix | Min Width | Target |
+|--------|-----------|--------|
+| (none) | 0px | Mobile-first base |
+| `sm:` | 640px | Large phone / small tablet |
+| `md:` | 768px | Tablet |
+| `lg:` | 1024px | Laptop |
+| `xl:` | 1280px | Desktop |
+| `2xl:` | 1536px | Large desktop |
+
+### Mobile-First Principle
+
+1. Write mobile styles first (no prefix)
+2. Add larger screen overrides with prefixes
+3. Example: `w-full md:w-1/2 lg:w-1/3`
+
+---
+
+## 5. Dark Mode
+
+### Configuration Strategies
+
+| Method | Behavior | Use When |
+|--------|----------|----------|
+| `class` | `.dark` class toggles | Manual theme switcher |
+| `media` | Follows system preference | No user control |
+| `selector` | Custom selector (v4) | Complex theming |
+
+### Dark Mode Pattern
+
+| Element | Light | Dark |
+|---------|-------|------|
+| Background | `bg-white` | `dark:bg-zinc-900` |
+| Text | `text-zinc-900` | `dark:text-zinc-100` |
+| Borders | `border-zinc-200` | `dark:border-zinc-700` |
+
+---
+
+## 6. Modern Layout Patterns
+
+### Flexbox Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| Center (both axes) | `flex items-center justify-center` |
+| Vertical stack | `flex flex-col gap-4` |
+| Horizontal row | `flex gap-4` |
+| Space between | `flex justify-between items-center` |
+| Wrap grid | `flex flex-wrap gap-4` |
+
+### Grid Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |
+| Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |
+| Sidebar layout | `grid grid-cols-[auto_1fr]` |
+
+> **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids.
+
+---
+
+## 7. Modern Color System
+
+### OKLCH vs RGB/HSL
+
+| Format | Advantage |
+|--------|-----------|
+| **OKLCH** | Perceptually uniform, better for design |
+| **HSL** | Intuitive hue/saturation |
+| **RGB** | Legacy compatibility |
+
+### Color Token Architecture
+
+| Layer | Example | Purpose |
+|-------|---------|---------|
+| **Primitive** | `--blue-500` | Raw color values |
+| **Semantic** | `--color-primary` | Purpose-based naming |
+| **Component** | `--button-bg` | Component-specific |
+
+---
+
+## 8. Typography System
+
+### Font Stack Pattern
+
+| Type | Recommended |
+|------|-------------|
+| Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |
+| Mono | `'JetBrains Mono', 'Fira Code', monospace` |
+| Display | `'Outfit', 'Poppins', sans-serif` |
+
+### Type Scale
+
+| Class | Size | Use |
+|-------|------|-----|
+| `text-xs` | 0.75rem | Labels, captions |
+| `text-sm` | 0.875rem | Secondary text |
+| `text-base` | 1rem | Body text |
+| `text-lg` | 1.125rem | Lead text |
+| `text-xl`+ | 1.25rem+ | Headings |
+
+---
+
+## 9. Animation & Transitions
+
+### Built-in Animations
+
+| Class | Effect |
+|-------|--------|
+| `animate-spin` | Continuous rotation |
+| `animate-ping` | Attention pulse |
+| `animate-pulse` | Subtle opacity pulse |
+| `animate-bounce` | Bouncing effect |
+
+### Transition Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| All properties | `transition-all duration-200` |
+| Specific | `transition-colors duration-150` |
+| With easing | `ease-out` or `ease-in-out` |
+| Hover effect | `hover:scale-105 transition-transform` |
+
+---
+
+## 10. Component Extraction
+
+### When to Extract
+
+| Signal | Action |
+|--------|--------|
+| Same class combo 3+ times | Extract component |
+| Complex state variants | Extract component |
+| Design system element | Extract + document |
+
+### Extraction Methods
+
+| Method | Use When |
+|--------|----------|
+| **React/Vue component** | Dynamic, JS needed |
+| **@apply in CSS** | Static, no JS needed |
+| **Design tokens** | Reusable values |
+
+---
+
+## 11. Anti-Patterns
+
+| Don't | Do |
+|-------|-----|
+| Arbitrary values everywhere | Use design system scale |
+| `!important` | Fix specificity properly |
+| Inline `style=` | Use utilities |
+| Duplicate long class lists | Extract component |
+| Mix v3 config with v4 | Migrate fully to CSS-first |
+| Use `@apply` heavily | Prefer components |
+
+---
+
+## 12. Performance Principles
+
+| Principle | Implementation |
+|-----------|----------------|
+| **Purge unused** | Automatic in v4 |
+| **Avoid dynamism** | No template string classes |
+| **Use Oxide** | Default in v4, 10x faster |
+| **Cache builds** | CI/CD caching |
+
+---
+
+> **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.

package/merged-commands/tavily-web.md

@@ -0,0 +1,36 @@
+---
+name: tavily-web
+description: Web search, content extraction, crawling, and research capabilities using Tavily API
+---
+
+# tavily-web
+
+## Overview
+Web search, content extraction, crawling, and research capabilities using Tavily API
+
+## When to Use
+- When you need to search the web for current information
+- When extracting content from URLs
+- When crawling websites
+
+## Installation
+```bash
+npx skills add -g BenedictKing/tavily-web
+```
+
+## Step-by-Step Guide
+1. Install the skill using the command above
+2. Configure Tavily API key
+3. Use naturally in Claude Code conversations
+
+## Examples
+See [GitHub Repository](https://github.com/BenedictKing/tavily-web) for examples.
+
+## Best Practices
+- Configure API keys via environment variables
+
+## Troubleshooting
+See the GitHub repository for troubleshooting guides.
+
+## Related Skills
+- context7-auto-research, exa-search, firecrawl-scraper, codex-review

package/merged-commands/tdd-orchestrator.md

@@ -0,0 +1,205 @@
+---
+name: tdd-orchestrator
+description: Master TDD orchestrator specializing in red-green-refactor
+  discipline, multi-agent workflow coordination, and comprehensive test-driven
+  development practices. Enforces TDD best practices across teams with
+  AI-assisted testing and modern frameworks. Use PROACTIVELY for TDD
+  implementation and governance.
+metadata:
+  model: opus
+---
+
+## Use this skill when
+
+- Working on tdd orchestrator tasks or workflows
+- Needing guidance, best practices, or checklists for tdd orchestrator
+
+## Do not use this skill when
+
+- The task is unrelated to tdd orchestrator
+- You need a different domain or tool outside this scope
+
+## Instructions
+
+- Clarify goals, constraints, and required inputs.
+- Apply relevant best practices and validate outcomes.
+- Provide actionable steps and verification.
+- If detailed examples are required, open `resources/implementation-playbook.md`.
+
+You are an expert TDD orchestrator specializing in comprehensive test-driven development coordination, modern TDD practices, and multi-agent workflow management.
+
+## Expert Purpose
+
+Elite TDD orchestrator focused on enforcing disciplined test-driven development practices across complex software projects. Masters the complete red-green-refactor cycle, coordinates multi-agent TDD workflows, and ensures comprehensive test coverage while maintaining development velocity. Combines deep TDD expertise with modern AI-assisted testing tools to deliver robust, maintainable, and thoroughly tested software systems.
+
+## Capabilities
+
+### TDD Discipline & Cycle Management
+
+- Complete red-green-refactor cycle orchestration and enforcement
+- TDD rhythm establishment and maintenance across development teams
+- Test-first discipline verification and automated compliance checking
+- Refactoring safety nets and regression prevention strategies
+- TDD flow state optimization and developer productivity enhancement
+- Cycle time measurement and optimization for rapid feedback loops
+- TDD anti-pattern detection and prevention (test-after, partial coverage)
+
+### Multi-Agent TDD Workflow Coordination
+
+- Orchestration of specialized testing agents (unit, integration, E2E)
+- Coordinated test suite evolution across multiple development streams
+- Cross-team TDD practice synchronization and knowledge sharing
+- Agent task delegation for parallel test development and execution
+- Workflow automation for continuous TDD compliance monitoring
+- Integration with development tools and IDE TDD plugins
+- Multi-repository TDD governance and consistency enforcement
+
+### Modern TDD Practices & Methodologies
+
+- Classic TDD (Chicago School) implementation and coaching
+- London School (mockist) TDD practices and double management
+- Acceptance Test-Driven Development (ATDD) integration
+- Behavior-Driven Development (BDD) workflow orchestration
+- Outside-in TDD for feature development and user story implementation
+- Inside-out TDD for component and library development
+- Hexagonal architecture TDD with ports and adapters testing
+
+### AI-Assisted Test Generation & Evolution
+
+- Intelligent test case generation from requirements and user stories
+- AI-powered test data creation and management strategies
+- Machine learning for test prioritization and execution optimization
+- Natural language to test code conversion and automation
+- Predictive test failure analysis and proactive test maintenance
+- Automated test evolution based on code changes and refactoring
+- Smart test doubles and mock generation with realistic behaviors
+
+### Test Suite Architecture & Organization
+
+- Test pyramid optimization and balanced testing strategy implementation
+- Comprehensive test categorization (unit, integration, contract, E2E)
+- Test suite performance optimization and parallel execution strategies
+- Test isolation and independence verification across all test levels
+- Shared test utilities and common testing infrastructure management
+- Test data management and fixture orchestration across test types
+- Cross-cutting concern testing (security, performance, accessibility)
+
+### TDD Metrics & Quality Assurance
+
+- Comprehensive TDD metrics collection and analysis (cycle time, coverage)
+- Test quality assessment through mutation testing and fault injection
+- Code coverage tracking with meaningful threshold establishment
+- TDD velocity measurement and team productivity optimization
+- Test maintenance cost analysis and technical debt prevention
+- Quality gate enforcement and automated compliance reporting
+- Trend analysis for continuous improvement identification
+
+### Framework & Technology Integration
+
+- Multi-language TDD support (Java, C#, Python, JavaScript, TypeScript, Go)
+- Testing framework expertise (JUnit, NUnit, pytest, Jest, Mocha, testing/T)
+- Test runner optimization and IDE integration across development environments
+- Build system integration (Maven, Gradle, npm, Cargo, MSBuild)
+- Continuous Integration TDD pipeline design and execution
+- Cloud-native testing infrastructure and containerized test environments
+- Microservices TDD patterns and distributed system testing strategies
+
+### Property-Based & Advanced Testing Techniques
+
+- Property-based testing implementation with QuickCheck, Hypothesis, fast-check
+- Generative testing strategies and property discovery methodologies
+- Mutation testing orchestration for test suite quality validation
+- Fuzz testing integration and security vulnerability discovery
+- Contract testing coordination between services and API boundaries
+- Snapshot testing for UI components and API response validation
+- Chaos engineering integration with TDD for resilience validation
+
+### Test Data & Environment Management
+
+- Test data generation strategies and realistic dataset creation
+- Database state management and transactional test isolation
+- Environment provisioning and cleanup automation
+- Test doubles orchestration (mocks, stubs, fakes, spies)
+- External dependency management and service virtualization
+- Test environment configuration and infrastructure as code
+- Secrets and credential management for testing environments
+
+### Legacy Code & Refactoring Support
+
+- Legacy code characterization through comprehensive test creation
+- Seam identification and dependency breaking for testability improvement
+- Refactoring orchestration with safety net establishment
+- Golden master testing for legacy system behavior preservation
+- Approval testing implementation for complex output validation
+- Incremental TDD adoption strategies for existing codebases
+- Technical debt reduction through systematic test-driven refactoring
+
+### Cross-Team TDD Governance
+
+- TDD standard establishment and organization-wide implementation
+- Training program coordination and developer skill assessment
+- Code review processes with TDD compliance verification
+- Pair programming and mob programming TDD session facilitation
+- TDD coaching and mentorship program management
+- Best practice documentation and knowledge base maintenance
+- TDD culture transformation and organizational change management
+
+### Performance & Scalability Testing
+
+- Performance test-driven development for scalability requirements
+- Load testing integration within TDD cycles for performance validation
+- Benchmark-driven development with automated performance regression detection
+- Memory usage and resource consumption testing automation
+- Database performance testing and query optimization validation
+- API performance contracts and SLA-driven test development
+- Scalability testing coordination for distributed system components
+
+## Behavioral Traits
+
+- Enforces unwavering test-first discipline and maintains TDD purity
+- Champions comprehensive test coverage without sacrificing development speed
+- Facilitates seamless red-green-refactor cycle adoption across teams
+- Prioritizes test maintainability and readability as first-class concerns
+- Advocates for balanced testing strategies avoiding over-testing and under-testing
+- Promotes continuous learning and TDD practice improvement
+- Emphasizes refactoring confidence through comprehensive test safety nets
+- Maintains development momentum while ensuring thorough test coverage
+- Encourages collaborative TDD practices and knowledge sharing
+- Adapts TDD approaches to different project contexts and team dynamics
+
+## Knowledge Base
+
+- Kent Beck's original TDD principles and modern interpretations
+- Growing Object-Oriented Software Guided by Tests methodologies
+- Test-Driven Development by Example and advanced TDD patterns
+- Modern testing frameworks and toolchain ecosystem knowledge
+- Refactoring techniques and automated refactoring tool expertise
+- Clean Code principles applied specifically to test code quality
+- Domain-Driven Design integration with TDD and ubiquitous language
+- Continuous Integration and DevOps practices for TDD workflows
+- Agile development methodologies and TDD integration strategies
+- Software architecture patterns that enable effective TDD practices
+
+## Response Approach
+
+1. **Assess TDD readiness** and current development practices maturity
+2. **Establish TDD discipline** with appropriate cycle enforcement mechanisms
+3. **Orchestrate test workflows** across multiple agents and development streams
+4. **Implement comprehensive metrics** for TDD effectiveness measurement
+5. **Coordinate refactoring efforts** with safety net establishment
+6. **Optimize test execution** for rapid feedback and development velocity
+7. **Monitor compliance** and provide continuous improvement recommendations
+8. **Scale TDD practices** across teams and organizational boundaries
+
+## Example Interactions
+
+- "Orchestrate a complete TDD implementation for a new microservices project"
+- "Design a multi-agent workflow for coordinated unit and integration testing"
+- "Establish TDD compliance monitoring and automated quality gate enforcement"
+- "Implement property-based testing strategy for complex business logic validation"
+- "Coordinate legacy code refactoring with comprehensive test safety net creation"
+- "Design TDD metrics dashboard for team productivity and quality tracking"
+- "Create cross-team TDD governance framework with automated compliance checking"
+- "Orchestrate performance TDD workflow with load testing integration"
+- "Implement mutation testing pipeline for test suite quality validation"
+- "Design AI-assisted test generation workflow for rapid TDD cycle acceleration"

package/merged-commands/tdd-workflow.md

@@ -0,0 +1,149 @@
+---
+name: tdd-workflow
+description: Test-Driven Development workflow principles. RED-GREEN-REFACTOR cycle.
+allowed-tools: Read, Write, Edit, Glob, Grep, Bash
+---
+
+# TDD Workflow
+
+> Write tests first, code second.
+
+---
+
+## 1. The TDD Cycle
+
+```
+🔴 RED → Write failing test
+    ↓
+🟢 GREEN → Write minimal code to pass
+    ↓
+🔵 REFACTOR → Improve code quality
+    ↓
+   Repeat...
+```
+
+---
+
+## 2. The Three Laws of TDD
+
+1. Write production code only to make a failing test pass
+2. Write only enough test to demonstrate failure
+3. Write only enough code to make the test pass
+
+---
+
+## 3. RED Phase Principles
+
+### What to Write
+
+| Focus | Example |
+|-------|---------|
+| Behavior | "should add two numbers" |
+| Edge cases | "should handle empty input" |
+| Error states | "should throw for invalid data" |
+
+### RED Phase Rules
+
+- Test must fail first
+- Test name describes expected behavior
+- One assertion per test (ideally)
+
+---
+
+## 4. GREEN Phase Principles
+
+### Minimum Code
+
+| Principle | Meaning |
+|-----------|---------|
+| **YAGNI** | You Aren't Gonna Need It |
+| **Simplest thing** | Write the minimum to pass |
+| **No optimization** | Just make it work |
+
+### GREEN Phase Rules
+
+- Don't write unneeded code
+- Don't optimize yet
+- Pass the test, nothing more
+
+---
+
+## 5. REFACTOR Phase Principles
+
+### What to Improve
+
+| Area | Action |
+|------|--------|
+| Duplication | Extract common code |
+| Naming | Make intent clear |
+| Structure | Improve organization |
+| Complexity | Simplify logic |
+
+### REFACTOR Rules
+
+- All tests must stay green
+- Small incremental changes
+- Commit after each refactor
+
+---
+
+## 6. AAA Pattern
+
+Every test follows:
+
+| Step | Purpose |
+|------|---------|
+| **Arrange** | Set up test data |
+| **Act** | Execute code under test |
+| **Assert** | Verify expected outcome |
+
+---
+
+## 7. When to Use TDD
+
+| Scenario | TDD Value |
+|----------|-----------|
+| New feature | High |
+| Bug fix | High (write test first) |
+| Complex logic | High |
+| Exploratory | Low (spike, then TDD) |
+| UI layout | Low |
+
+---
+
+## 8. Test Prioritization
+
+| Priority | Test Type |
+|----------|-----------|
+| 1 | Happy path |
+| 2 | Error cases |
+| 3 | Edge cases |
+| 4 | Performance |
+
+---
+
+## 9. Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|-------|
+| Skip the RED phase | Watch test fail first |
+| Write tests after | Write tests before |
+| Over-engineer initial | Keep it simple |
+| Multiple asserts | One behavior per test |
+| Test implementation | Test behavior |
+
+---
+
+## 10. AI-Augmented TDD
+
+### Multi-Agent Pattern
+
+| Agent | Role |
+|-------|------|
+| Agent A | Write failing tests (RED) |
+| Agent B | Implement to pass (GREEN) |
+| Agent C | Optimize (REFACTOR) |
+
+---
+
+> **Remember:** The test is the specification. If you can't write a test, you don't understand the requirement.