claude-cli-advanced-starter-pack 1.0.16 → 1.8.0

package/templates/commands/create-smoke-test.template.md

@@ -0,0 +1,186 @@
+---
+description: Auto-generate Playwright smoke tests for critical user flows
+---
+
+# Create Smoke Test
+
+Generate Playwright E2E tests automatically by analyzing your application's routes and components.
+
+## Usage
+
+```
+/create-smoke-test
+/create-smoke-test --page login
+/create-smoke-test --flow checkout
+```
+
+## What It Does
+
+1. **Analyze Routes** - Discover pages from router configuration
+2. **Identify Flows** - Map critical user journeys
+3. **Generate Tests** - Create Playwright test files
+4. **Add Selectors** - Include data-testid recommendations
+
+## Smoke Test Categories
+
+### Authentication
+- Login flow
+- Logout flow
+- Password reset
+- Session persistence
+
+### Navigation
+- Home page loads
+- All routes accessible
+- Navigation links work
+- 404 handling
+
+### Critical Paths
+- User registration
+- Core feature usage
+- Payment flow (if applicable)
+- Data submission forms
+
+## Implementation
+
+### Step 1: Discover Routes
+
+**React Router:**
+```typescript
+// Analyze src/routes.tsx or src/App.tsx
+// Extract route paths and components
+```
+
+**Next.js:**
+```bash
+# List pages directory
+ls -la pages/ app/
+```
+
+### Step 2: Generate Test File
+
+```typescript
+// tests/smoke/navigation.spec.ts
+import { test, expect } from '@playwright/test';
+
+test.describe('Navigation Smoke Tests', () => {
+  test('home page loads', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/Your App/);
+    await expect(page.locator('main')).toBeVisible();
+  });
+
+  test('login page accessible', async ({ page }) => {
+    await page.goto('/login');
+    await expect(page.locator('[data-testid="login-form"]')).toBeVisible();
+  });
+
+  // Additional generated tests...
+});
+```
+
+### Step 3: Add Test Helpers
+
+```typescript
+// tests/helpers/auth.ts
+export async function loginAs(page, user) {
+  await page.goto('/login');
+  await page.fill('[data-testid="email"]', user.email);
+  await page.fill('[data-testid="password"]', user.password);
+  await page.click('[data-testid="submit"]');
+  await page.waitForURL('/dashboard');
+}
+```
+
+## Output Structure
+
+```
+tests/
+├── smoke/
+│   ├── auth.spec.ts          # Authentication flows
+│   ├── navigation.spec.ts    # Page accessibility
+│   └── critical-paths.spec.ts # Core user journeys
+├── helpers/
+│   ├── auth.ts              # Auth utilities
+│   ├── fixtures.ts          # Test data
+│   └── selectors.ts         # Shared selectors
+└── playwright.config.ts     # Test configuration
+```
+
+## Generated Test Example
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { loginAs } from '../helpers/auth';
+import { testUser } from '../helpers/fixtures';
+
+test.describe('Authentication Smoke Tests', () => {
+  test('user can log in with valid credentials', async ({ page }) => {
+    await page.goto('/login');
+
+    // Fill login form
+    await page.fill('[data-testid="email-input"]', testUser.email);
+    await page.fill('[data-testid="password-input"]', testUser.password);
+
+    // Submit and verify
+    await page.click('[data-testid="login-button"]');
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();
+  });
+
+  test('user sees error for invalid credentials', async ({ page }) => {
+    await page.goto('/login');
+    await page.fill('[data-testid="email-input"]', 'invalid@test.com');
+    await page.fill('[data-testid="password-input"]', 'wrongpassword');
+    await page.click('[data-testid="login-button"]');
+
+    await expect(page.locator('[data-testid="error-message"]')).toBeVisible();
+  });
+});
+```
+
+## Selector Recommendations
+
+For reliable tests, add these data-testid attributes to your components:
+
+```html
+<!-- Forms -->
+<form data-testid="login-form">
+  <input data-testid="email-input" />
+  <input data-testid="password-input" />
+  <button data-testid="login-button">Login</button>
+</form>
+
+<!-- Navigation -->
+<nav data-testid="main-nav">
+  <a data-testid="nav-home">Home</a>
+  <a data-testid="nav-dashboard">Dashboard</a>
+</nav>
+
+<!-- Content -->
+<main data-testid="page-content">
+  <h1 data-testid="page-title">Welcome</h1>
+</main>
+```
+
+## Configuration
+
+Add to `playwright.config.ts`:
+
+```typescript
+export default {
+  testDir: './tests',
+  projects: [
+    {
+      name: 'smoke',
+      testMatch: /smoke\/.+\.spec\.ts/,
+      use: { baseURL: 'http://localhost:3000' },
+    },
+  ],
+};
+```
+
+## Related Commands
+
+- `/e2e-test` - Run E2E tests
+- `/refactor-check` - Pre-commit validation

package/templates/commands/project-impl.template.md

@@ -14,7 +14,9 @@ allowed-tools:
 
 # /project-impl - Project Implementation
 
-Agent-powered project configuration, tech stack detection, and CLAUDE.md management.
+Advanced project tools for CLAUDE.md management and codebase analysis.
+
+**For initial setup**, use `/ccasp-setup` instead - it's a one-shot linear wizard that configures everything in a single pass.
 
 ## Quick Menu
 
@@ -23,13 +25,15 @@ Agent-powered project configuration, tech stack detection, and CLAUDE.md managem
 | **1** | Audit CLAUDE.md | Analyze configuration against best practices |
 | **2** | Enhance CLAUDE.md | Generate/improve documentation from codebase |
 | **3** | Detect Tech Stack | Scan codebase and identify technologies |
-| **4** | Project Settings | Configure deployment, tunnels, GitHub |
+| **S** | Full Setup | Run `/ccasp-setup` linear wizard |
 | **B** | Back to /menu | Return to main menu |
 
 ## Instructions for Claude
 
 When invoked, display the menu above and use AskUserQuestion to get the user's selection.
 
+**If user selects S**: Invoke `/ccasp-setup` skill for the linear setup wizard.
+
 ---
 
 ### Option 1: Audit CLAUDE.md
@@ -198,120 +202,14 @@ Deployment:
 
 ---
 
-### Option 4: Project Settings
-
-Use AskUserQuestion for interactive configuration:
-
-**GitHub Project Board:**
-```
-Questions:
-1. Do you have a GitHub Project Board? (Yes/No)
-2. Repository owner (e.g., 'username' or 'org-name')
-3. Repository name
-4. Project number (from URL: /projects/NUMBER)
-```
-
-**Deployment Platforms:**
-```
-Questions:
-1. Frontend deployment platform?
-   - Cloudflare Pages
-   - Vercel
-   - Netlify
-   - GitHub Pages
-   - None
-2. Backend deployment platform?
-   - Railway
-   - Heroku
-   - Render
-   - AWS
-   - None
-3. Project identifiers (IDs, names) for each platform
-```
-
-**Tunnel Services:**
-```
-Questions:
-1. Tunnel service for mobile testing?
-   - ngrok
-   - localtunnel
-   - cloudflare-tunnel
-   - serveo
-   - None
-2. Subdomain preference (optional)
-```
-
-**Token Management:**
-```
-Questions:
-1. Enable token budget tracking? (Yes/No)
-2. Daily budget limit (default: 200000)
-3. Compact threshold (default: 75%)
-```
-
-**Happy Mode:**
-```
-Questions:
-1. Enable Happy Mode integration? (Yes/No)
-2. Checkpoint interval (default: 10 tasks)
-3. Verbosity level (condensed/normal/verbose)
-```
-
-**Write selections to `.claude/config/tech-stack.json`:**
-```json
-{
-  "versionControl": {
-    "provider": "github",
-    "projectBoard": {
-      "type": "github-projects-v2",
-      "owner": "username",
-      "repo": "repo-name",
-      "projectNumber": 1
-    }
-  },
-  "deployment": {
-    "frontend": {
-      "platform": "cloudflare",
-      "projectName": "my-project"
-    },
-    "backend": {
-      "platform": "railway",
-      "projectId": "xxx",
-      "serviceId": "yyy"
-    }
-  },
-  "devEnvironment": {
-    "tunnel": {
-      "service": "ngrok",
-      "subdomain": "my-app"
-    }
-  },
-  "tokenManagement": {
-    "enabled": true,
-    "dailyBudget": 200000,
-    "thresholds": { "compact": 0.75 }
-  },
-  "happyMode": {
-    "enabled": true,
-    "checkpointInterval": 10
-  }
-}
-```
-
----
-
 ## Navigation
 
 After completing any option, ask the user:
-- "Would you like to perform another action? (1-4, B to go back, Q to quit)"
+- "Would you like to perform another action? (1-3, S for setup, B to go back)"
 
 ## Mark Setup Complete
 
-**IMPORTANT:** After the user successfully completes ANY option (1-4), update the state file to mark setup as complete:
-
-```bash
-# Read current state, add projectImplCompleted: true, write back
-```
+**IMPORTANT:** After the user successfully completes ANY option (1-3), update the state file:
 
 Use the Edit tool to update `.claude/config/ccasp-state.json`:
 - Set `"projectImplCompleted": true`
@@ -320,10 +218,8 @@ This removes the "Run /project-impl" recommendation banner from `/menu`.
 
 ## Terminal Alternative
 
-These operations can also be run from the terminal:
-
 ```bash
-npx ccasp wizard          # Interactive setup wizard
+npx ccasp wizard          # Linear setup wizard (recommended)
 npx ccasp detect-stack    # Detect tech stack
 npx ccasp claude-audit    # Audit CLAUDE.md
 ```

package/templates/commands/refactor-check.template.md

@@ -0,0 +1,112 @@
+---
+description: Fast pre-commit quality gate - lint, type-check, test affected files
+---
+
+# Refactor Check
+
+Quick quality validation before committing changes. Runs essential checks without full test suite.
+
+## Checks Performed
+
+1. **Linting** - ESLint/Pylint for code style issues
+2. **Type Checking** - TypeScript/MyPy type validation
+3. **Affected Tests** - Run tests for changed files only
+4. **Import Validation** - Verify imports resolve correctly
+
+## Usage
+
+Run before committing to catch issues early:
+
+```
+/refactor-check
+```
+
+## Implementation
+
+When invoked, execute these steps:
+
+### Step 1: Detect Changed Files
+
+```bash
+git diff --name-only HEAD~1..HEAD
+# OR for staged changes:
+git diff --cached --name-only
+```
+
+### Step 2: Run Linting (Affected Files Only)
+
+**JavaScript/TypeScript:**
+```bash
+npx eslint <changed-files>
+```
+
+**Python:**
+```bash
+pylint <changed-files>
+# OR
+ruff check <changed-files>
+```
+
+### Step 3: Type Checking
+
+**TypeScript:**
+```bash
+npx tsc --noEmit
+```
+
+**Python:**
+```bash
+mypy <changed-files>
+```
+
+### Step 4: Run Affected Tests
+
+**JavaScript/TypeScript:**
+```bash
+npx jest --findRelatedTests <changed-files>
+# OR
+npx vitest --run --reporter=verbose <changed-files>
+```
+
+**Python:**
+```bash
+pytest <changed-files> --collect-only -q
+```
+
+## Output Format
+
+```
+Refactor Check Results
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Files Changed: 5
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✅ Linting: Passed (0 errors, 2 warnings)
+✅ Type Check: Passed
+✅ Tests: 3 passed, 0 failed
+⚠️ Imports: 1 unused import detected
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Overall: PASS (ready to commit)
+```
+
+## Configuration
+
+Add to `.claude/config/tech-stack.json`:
+
+```json
+{
+  "refactorCheck": {
+    "lint": true,
+    "typeCheck": true,
+    "testAffected": true,
+    "importCheck": true
+  }
+}
+```
+
+## Related Commands
+
+- `/refactor-analyze` - Deep code quality analysis
+- `/refactor-cleanup` - Fix common issues automatically
+- `/refactor-prep` - Pre-refactoring safety checklist

package/templates/commands/refactor-cleanup.template.md

@@ -0,0 +1,144 @@
+---
+description: Daily maintenance automation - fix lint errors, remove unused imports, format code
+---
+
+# Refactor Cleanup
+
+Automated maintenance to keep codebase clean. Fixes common issues without manual intervention.
+
+## Cleanup Actions
+
+1. **Auto-fix Lint Errors** - Apply ESLint/Ruff --fix
+2. **Remove Unused Imports** - Clean up import statements
+3. **Format Code** - Apply Prettier/Black formatting
+4. **Sort Imports** - Organize import order
+5. **Remove Dead Code** - Delete unused functions (optional)
+
+## Usage
+
+Run as part of daily maintenance:
+
+```
+/refactor-cleanup
+```
+
+Or target specific cleanup:
+
+```
+/refactor-cleanup --lint-only
+/refactor-cleanup --format-only
+/refactor-cleanup --imports-only
+```
+
+## Implementation
+
+### Step 1: Auto-fix Lint Errors
+
+**JavaScript/TypeScript:**
+```bash
+npx eslint . --fix --ext .js,.jsx,.ts,.tsx
+```
+
+**Python:**
+```bash
+ruff check --fix .
+# OR
+autopep8 --in-place --recursive .
+```
+
+### Step 2: Remove Unused Imports
+
+**JavaScript/TypeScript:**
+```bash
+npx eslint . --fix --rule 'unused-imports/no-unused-imports: error'
+# Requires: npm install -D eslint-plugin-unused-imports
+```
+
+**Python:**
+```bash
+autoflake --in-place --remove-all-unused-imports --recursive .
+```
+
+### Step 3: Format Code
+
+**JavaScript/TypeScript:**
+```bash
+npx prettier --write "**/*.{js,jsx,ts,tsx,json,md}"
+```
+
+**Python:**
+```bash
+black .
+# OR
+ruff format .
+```
+
+### Step 4: Sort Imports
+
+**JavaScript/TypeScript:**
+```bash
+npx eslint . --fix --rule 'import/order: error'
+```
+
+**Python:**
+```bash
+isort .
+```
+
+## Output Format
+
+```
+Refactor Cleanup Report
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Lint Fixes Applied:
+  ✓ 12 auto-fixable errors resolved
+  ⚠️ 3 errors require manual fix (see below)
+
+Unused Imports Removed:
+  ✓ src/components/Button.tsx: removed 2 imports
+  ✓ src/utils/helpers.ts: removed 1 import
+
+Code Formatted:
+  ✓ 45 files formatted
+
+Imports Sorted:
+  ✓ 23 files reorganized
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Summary: 15 files modified
+
+Manual Fixes Required:
+  1. src/api/client.ts:45 - no-explicit-any
+  2. src/hooks/useAuth.ts:12 - react-hooks/exhaustive-deps
+  3. src/pages/Home.tsx:78 - no-unused-vars
+```
+
+## Configuration
+
+Add to `.claude/config/tech-stack.json`:
+
+```json
+{
+  "refactorCleanup": {
+    "autoFixLint": true,
+    "removeUnusedImports": true,
+    "formatCode": true,
+    "sortImports": true,
+    "removeDeadCode": false
+  }
+}
+```
+
+## Safety Features
+
+- **Git Check**: Warns if uncommitted changes exist
+- **Backup**: Creates `.cleanup-backup` branch before major changes
+- **Dry Run**: Use `--dry-run` to preview changes
+- **Exclude**: Respects `.gitignore` and custom exclude patterns
+
+## Related Commands
+
+- `/refactor-check` - Pre-commit quality gate
+- `/refactor-analyze` - Deep code analysis
+- `/refactor-prep` - Pre-refactoring checklist