@jarrodmedrano/claude-skills 1.0.13 → 1.0.15

package/.claude/commands/new-backend.md

@@ -69,7 +69,141 @@ When this skill is invoked:
     - Database: PostgreSQL (pg), MongoDB (mongoose), Prisma ORM
     - Authentication: JWT setup, Passport.js
     - Validation: Zod, Joi
-    - Testing: Jest, Vitest
+
+11. **Set up Vitest for testing** (MANDATORY):
+    - Install Vitest and testing libraries:
+      ```bash
+      npm install -D vitest @vitest/ui @vitest/coverage-v8 supertest @types/supertest
+      ```
+    - Create `vitest.config.ts`:
+      ```typescript
+      import { defineConfig } from 'vitest/config'
+
+      export default defineConfig({
+        test: {
+          globals: true,
+          environment: 'node',
+          setupFiles: ['./src/test/setup.ts'],
+          coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+          },
+        },
+      })
+      ```
+    - Create `src/test/setup.ts` for global test setup
+    - Add scripts to `package.json`:
+      ```json
+      {
+        "scripts": {
+          "test": "vitest",
+          "test:ui": "vitest --ui",
+          "test:coverage": "vitest run --coverage"
+        }
+      }
+      ```
+    - **Monorepo note**: If backend is in a monorepo, use workspace filter:
+      ```bash
+      npm run test --workspace=apps/api
+      # or with pnpm
+      pnpm --filter @project/api test
+      ```
+    - Create test structure:
+      ```
+      src/
+        routes/
+          users.ts
+          users.test.ts      # Route tests
+        services/
+          userService.ts
+          userService.test.ts # Unit tests
+        test/
+          setup.ts           # Global setup
+          fixtures/          # Test data
+      ```
+
+12. **Separate layers in backend architecture** (MANDATORY):
+    - Create clean architecture structure:
+      ```
+      src/
+        controllers/        # HTTP request handlers (thin, delegate to services)
+        services/           # Business logic (testable, no HTTP dependencies)
+        repositories/       # Data access layer (database queries)
+        middleware/         # Express/Fastify middleware
+        routes/             # Route definitions
+        types/              # TypeScript types and interfaces
+        utils/              # Shared utilities
+        test/               # Test setup and fixtures
+      ```
+    - Layer rules:
+      * Controllers: Handle HTTP, validate input, call services
+      * Services: Pure business logic, no HTTP or DB dependencies
+      * Repositories: Database operations only
+    - Each service should have corresponding test file
+
+13. **Set up ESLint with Airbnb style guide** (MANDATORY):
+    - Install ESLint and Airbnb config:
+      ```bash
+      npm install -D eslint eslint-config-airbnb-base eslint-config-airbnb-typescript \
+        @typescript-eslint/eslint-plugin @typescript-eslint/parser \
+        eslint-plugin-import
+      ```
+    - Create `.eslintrc.cjs` (CommonJS for ESLint config only):
+      ```javascript
+      module.exports = {
+        root: true,
+        env: { es2022: true, node: true },
+        extends: [
+          'airbnb-base',
+          'airbnb-typescript/base',
+          'plugin:@typescript-eslint/recommended',
+        ],
+        parser: '@typescript-eslint/parser',
+        parserOptions: {
+          ecmaVersion: 'latest',
+          sourceType: 'module',
+          project: './tsconfig.json',
+        },
+        plugins: ['@typescript-eslint'],
+        rules: {
+          'import/prefer-default-export': 'off',
+        },
+      };
+      ```
+
+14. **Set up Husky with pre-commit hook** (MANDATORY):
+    - Install Husky and lint-staged:
+      ```bash
+      npm install -D husky lint-staged
+      npx husky init
+      ```
+    - Create `.husky/pre-commit`:
+      ```bash
+      npx lint-staged
+      ```
+    - Add to `package.json`:
+      ```json
+      {
+        "lint-staged": {
+          "*.{js,ts}": ["eslint --fix", "git add"]
+        }
+      }
+      ```
+
+15. **Ensure TypeScript uses ES modules** (MANDATORY):
+    - Set `"type": "module"` in `package.json`
+    - Configure `tsconfig.json`:
+      ```json
+      {
+        "compilerOptions": {
+          "module": "ESNext",
+          "moduleResolution": "bundler",
+          "target": "ES2022",
+          "esModuleInterop": true,
+          "allowSyntheticDefaultImports": true
+        }
+      }
+      ```
 
 **Example usage**:
 - `/new-backend my-api`

package/.claude/commands/new-fullstack.md

@@ -13,6 +13,7 @@ When this skill is invoked:
    - T3 Stack (Next.js + tRPC + Prisma + Tailwind)
    - MERN (MongoDB + Express + React + Node)
    - Monorepo (React frontend + Express backend + shared types)
+   - Solito (Expo + Next.js + shared navigation - Universal app for web + mobile)
 
 2. Extract the project name from args, or ask if not provided
 
@@ -34,18 +35,106 @@ When this skill is invoked:
    - Set up proxy configuration
 
    **Monorepo**:
-   - Create monorepo structure:
+   - Create monorepo structure (separate apps from component libraries):
      ```
      {project-name}/
        apps/
-         frontend/    (React + Vite)
-         backend/     (Express)
+         web/              # Application code (React + Vite)
+         api/              # Backend application (Express)
        packages/
-         shared/      (shared TypeScript types)
-       package.json   (workspace config)
+         ui/               # Shared component library with Storybook
+           src/
+             components/
+             index.ts
+           .storybook/
+           package.json
+         shared/           # Shared TypeScript types and utilities
+           src/
+           package.json
+       package.json        # Workspace config
      ```
    - Set up npm workspaces or pnpm workspace
 
+   **Solito (Universal App)**:
+   - Ask follow-up questions:
+     * Package manager? (pnpm recommended, yarn, npm)
+     * Include NativeWind? (Tailwind for React Native)
+     * Include authentication? (Clerk, Supabase, custom, skip)
+     * Include API layer? (tRPC, REST, skip)
+     * Include UI library? (Tamagui, React Native Paper, custom, skip)
+
+   - Use Solito starter template:
+     ```bash
+     npx create-solito-app@latest {project-name}
+     ```
+     Or create manually if custom setup needed
+
+   - Create monorepo structure:
+     ```
+     {project-name}/
+       apps/
+         expo/              # React Native mobile app
+           app/             # Expo Router file-system routes
+           package.json
+           app.json
+         next/              # Next.js web app
+           app/             # Next.js App Router
+           public/
+           package.json
+           next.config.js
+       packages/
+         app/               # Shared UI and navigation
+           features/        # Feature screens
+           components/      # Reusable components
+           lib/            # Utilities
+           provider/       # Navigation provider
+           package.json
+         api/              # Shared API client (if selected)
+           package.json
+       package.json        # Root workspace config
+       pnpm-workspace.yaml # or yarn/npm workspace
+       turbo.json         # Turborepo config
+     ```
+
+   - Configure based on selections:
+     * **NativeWind**: Set up Tailwind config, Metro config, Babel plugin
+     * **Clerk**: Install @clerk/clerk-expo and @clerk/nextjs, configure providers
+     * **Supabase**: Install @supabase/supabase-js, set up client
+     * **tRPC**: Configure tRPC client, create example router
+     * **Tamagui**: Install and configure Tamagui for universal styling
+
+   - Add example screens:
+     * Home screen (apps/expo/app/index.tsx and apps/next/app/page.tsx)
+     * Profile screen with navigation
+     * Demonstrate shared navigation with solito/link
+
+   - Configure Metro bundler to watch monorepo
+   - Set up TypeScript path aliases
+   - Create .env.example for both platforms (NEXT_PUBLIC_ and EXPO_PUBLIC_)
+
+   - Add development scripts to root package.json:
+     ```json
+     {
+       "scripts": {
+         "dev": "turbo run dev",
+         "dev:next": "pnpm --filter next-app dev",
+         "dev:expo": "pnpm --filter expo-app start",
+         "build": "turbo run build",
+         "lint": "turbo run lint",
+         "typecheck": "turbo run typecheck"
+       }
+     }
+     ```
+
+   - Create README with:
+     * Project structure explanation
+     * Setup instructions (pnpm install)
+     * How to run web app (cd apps/next && pnpm dev)
+     * How to run mobile app (cd apps/expo && pnpm start)
+     * Shared code location (packages/app)
+     * Platform-specific code guidelines
+     * Deployment instructions (Vercel for web, EAS for mobile)
+
 4. Set up database and ORM:
    - Create database schema/models
    - Set up migration scripts
@@ -62,9 +151,212 @@ When this skill is invoked:
    - Error handling
    - Logging setup
 
-7. Initialize git repository with appropriate .gitignore
+7. **Set up ESLint with Airbnb style guide** (MANDATORY):
+   - Install ESLint and Airbnb config:
+     ```bash
+     npm install -D eslint eslint-config-airbnb eslint-config-airbnb-typescript \
+       @typescript-eslint/eslint-plugin @typescript-eslint/parser \
+       eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react \
+       eslint-plugin-react-hooks
+     ```
+   - Create `.eslintrc.cjs` (CommonJS for ESLint config only):
+     ```javascript
+     module.exports = {
+       root: true,
+       env: { browser: true, es2022: true, node: true },
+       extends: [
+         'airbnb',
+         'airbnb-typescript',
+         'airbnb/hooks',
+         'plugin:@typescript-eslint/recommended',
+       ],
+       parser: '@typescript-eslint/parser',
+       parserOptions: {
+         ecmaVersion: 'latest',
+         sourceType: 'module',
+         project: './tsconfig.json',
+       },
+       plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+       rules: {
+         'react/react-in-jsx-scope': 'off',
+         'react/function-component-definition': ['error', {
+           namedComponents: 'function-declaration',
+           unnamedComponents: 'arrow-function',
+         }],
+         'import/prefer-default-export': 'off',
+       },
+     };
+     ```
+
+8. **Set up Husky with pre-commit hook** (MANDATORY):
+   - Install Husky and lint-staged:
+     ```bash
+     npm install -D husky lint-staged
+     npx husky init
+     ```
+   - Create `.husky/pre-commit`:
+     ```bash
+     npx lint-staged
+     ```
+   - Add to `package.json`:
+     ```json
+     {
+       "lint-staged": {
+         "*.{js,jsx,ts,tsx}": ["eslint --fix", "git add"]
+       }
+     }
+     ```
+
+9. **Ensure TypeScript uses ES modules** (MANDATORY):
+   - Set `"type": "module"` in `package.json`
+   - Configure `tsconfig.json`:
+     ```json
+     {
+       "compilerOptions": {
+         "module": "ESNext",
+         "moduleResolution": "bundler",
+         "target": "ES2022",
+         "esModuleInterop": true,
+         "allowSyntheticDefaultImports": true
+       }
+     }
+     ```
+   - Use `.js` extensions in imports for Node.js code, or configure bundler appropriately
+
+10. **Set up Vitest for testing** (MANDATORY):
+    - Install Vitest and testing libraries:
+      ```bash
+      # For monorepos, install at root or in each package
+      npm install -D vitest @vitest/ui @vitest/coverage-v8 \
+        @testing-library/react @testing-library/jest-dom jsdom
+      ```
+    - Create `vitest.config.ts`:
+      ```typescript
+      import { defineConfig } from 'vitest/config'
+      import react from '@vitejs/plugin-react'
+
+      export default defineConfig({
+        plugins: [react()],
+        test: {
+          environment: 'jsdom',
+          globals: true,
+          setupFiles: ['./src/test/setup.ts'],
+          coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+          },
+        },
+      })
+      ```
+    - Create `src/test/setup.ts`:
+      ```typescript
+      import '@testing-library/jest-dom'
+      ```
+    - Add scripts to `package.json`:
+      ```json
+      {
+        "scripts": {
+          "test": "vitest",
+          "test:ui": "vitest --ui",
+          "test:coverage": "vitest run --coverage"
+        }
+      }
+      ```
+    - **Monorepo note**: Use `--filter` flag to run tests in specific packages:
+      ```bash
+      npm run test --workspace=packages/ui
+      # or with pnpm
+      pnpm --filter @project/ui test
+      ```
 
-8. Create README with:
+11. **Set up Storybook for component library** (MANDATORY):
+    - Install Storybook in the component library package (e.g., `packages/ui`):
+      ```bash
+      # Navigate to component library first
+      cd packages/ui
+      npx storybook@latest init --type react
+      ```
+    - Configure `.storybook/main.ts`:
+      ```typescript
+      import type { StorybookConfig } from '@storybook/react-vite'
+
+      const config: StorybookConfig = {
+        stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+        addons: [
+          '@storybook/addon-onboarding',
+          '@storybook/addon-essentials',
+          '@storybook/addon-interactions',
+          '@storybook/addon-a11y',
+        ],
+        framework: {
+          name: '@storybook/react-vite',
+          options: {},
+        },
+      }
+      export default config
+      ```
+    - Create story alongside each component:
+      ```
+      packages/ui/src/components/
+        Button/
+          Button.tsx
+          Button.styles.ts
+          Button.stories.tsx
+          Button.test.tsx
+          index.ts
+      ```
+    - Example story template (`Button.stories.tsx`):
+      ```typescript
+      import type { Meta, StoryObj } from '@storybook/react'
+      import { Button } from './Button'
+
+      const meta: Meta<typeof Button> = {
+        title: 'Components/Button',
+        component: Button,
+        tags: ['autodocs'],
+      }
+      export default meta
+
+      type Story = StoryObj<typeof Button>
+
+      export const Primary: Story = {
+        args: { variant: 'primary', children: 'Click me' },
+      }
+      ```
+    - Add scripts to component library `package.json`:
+      ```json
+      {
+        "scripts": {
+          "storybook": "storybook dev -p 6006",
+          "build-storybook": "storybook build"
+        }
+      }
+      ```
+
+12. **Separate application from component library** (MANDATORY):
+    - Component library (`packages/ui`):
+      * Contains only reusable, presentational components
+      * No business logic or API calls
+      * Each component has: `.tsx`, `.styles.ts`, `.stories.tsx`, `.test.tsx`
+      * Exports components via barrel file (`index.ts`)
+    - Application (`apps/web` or `apps/api`):
+      * Contains business logic, routing, API integration
+      * Imports components from `@project/ui`
+      * Feature-based organization for app-specific code
+    - Configure workspace dependencies:
+      ```json
+      // apps/web/package.json
+      {
+        "dependencies": {
+          "@project/ui": "workspace:*",
+          "@project/shared": "workspace:*"
+        }
+      }
+      ```
+
+13. Initialize git repository with appropriate .gitignore
+
+14. Create README with:
    - Project structure
    - Setup instructions
    - Development commands
@@ -73,3 +365,5 @@ When this skill is invoked:
 **Example usage**:
 - `/new-fullstack my-saas-app`
 - `/new-fullstack` (will prompt for name)
+
+**Note**: For Solito projects, automatically invoke the `solito` skill after project creation to provide specialized guidance for cross-platform development, navigation patterns, and best practices.

package/.claude/commands/new-website.md

@@ -31,11 +31,186 @@ When this skill is invoked:
    - State Management: Zustand, Redux Toolkit, TanStack Query
    - Utilities: axios, date-fns, zod, react-hook-form
 
-7. Initialize git repository if not already initialized
+7. **Set up ESLint with Airbnb style guide** (MANDATORY):
+   - Install ESLint and Airbnb config:
+     ```bash
+     npm install -D eslint eslint-config-airbnb eslint-config-airbnb-typescript \
+       @typescript-eslint/eslint-plugin @typescript-eslint/parser \
+       eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react \
+       eslint-plugin-react-hooks
+     ```
+   - Create `.eslintrc.cjs` (CommonJS for ESLint config only):
+     ```javascript
+     module.exports = {
+       root: true,
+       env: { browser: true, es2022: true, node: true },
+       extends: [
+         'airbnb',
+         'airbnb-typescript',
+         'airbnb/hooks',
+         'plugin:@typescript-eslint/recommended',
+       ],
+       parser: '@typescript-eslint/parser',
+       parserOptions: {
+         ecmaVersion: 'latest',
+         sourceType: 'module',
+         project: './tsconfig.json',
+       },
+       plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+       rules: {
+         'react/react-in-jsx-scope': 'off',
+         'react/function-component-definition': ['error', {
+           namedComponents: 'function-declaration',
+           unnamedComponents: 'arrow-function',
+         }],
+         'import/prefer-default-export': 'off',
+       },
+     };
+     ```
+   - For Vue projects, use `eslint-config-airbnb-base` instead and add `eslint-plugin-vue`
 
-8. Create a basic README with project info and getting started instructions
+8. **Set up Husky with pre-commit hook** (MANDATORY):
+   - Install Husky and lint-staged:
+     ```bash
+     npm install -D husky lint-staged
+     npx husky init
+     ```
+   - Create `.husky/pre-commit`:
+     ```bash
+     npx lint-staged
+     ```
+   - Add to `package.json`:
+     ```json
+     {
+       "lint-staged": {
+         "*.{js,jsx,ts,tsx,vue}": ["eslint --fix", "git add"]
+       }
+     }
+     ```
 
-9. Show the user how to start the dev server
+9. **Ensure TypeScript uses ES modules** (MANDATORY):
+   - Set `"type": "module"` in `package.json`
+   - Configure `tsconfig.json`:
+     ```json
+     {
+       "compilerOptions": {
+         "module": "ESNext",
+         "moduleResolution": "bundler",
+         "target": "ES2022",
+         "esModuleInterop": true,
+         "allowSyntheticDefaultImports": true
+       }
+     }
+     ```
+   - Use `.js` extensions in imports for Node.js code, or configure bundler appropriately
+
+10. **Set up Vitest for testing** (MANDATORY):
+    - Install Vitest and testing libraries:
+      ```bash
+      npm install -D vitest @vitest/ui @vitest/coverage-v8 \
+        @testing-library/react @testing-library/jest-dom jsdom
+      ```
+    - Create `vitest.config.ts`:
+      ```typescript
+      import { defineConfig } from 'vitest/config'
+      import react from '@vitejs/plugin-react'
+
+      export default defineConfig({
+        plugins: [react()],
+        test: {
+          environment: 'jsdom',
+          globals: true,
+          setupFiles: ['./src/test/setup.ts'],
+          coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+          },
+        },
+      })
+      ```
+    - Create `src/test/setup.ts`:
+      ```typescript
+      import '@testing-library/jest-dom'
+      ```
+    - Add scripts to `package.json`:
+      ```json
+      {
+        "scripts": {
+          "test": "vitest",
+          "test:ui": "vitest --ui",
+          "test:coverage": "vitest run --coverage"
+        }
+      }
+      ```
+    - For Vue projects, use `@testing-library/vue` instead of `@testing-library/react`
+
+11. **Set up Storybook for components** (MANDATORY):
+    - Install Storybook:
+      ```bash
+      npx storybook@latest init --type react
+      # For Vue: npx storybook@latest init --type vue3
+      ```
+    - Configure `.storybook/main.ts`:
+      ```typescript
+      import type { StorybookConfig } from '@storybook/react-vite'
+
+      const config: StorybookConfig = {
+        stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+        addons: [
+          '@storybook/addon-onboarding',
+          '@storybook/addon-essentials',
+          '@storybook/addon-interactions',
+          '@storybook/addon-a11y',
+        ],
+        framework: {
+          name: '@storybook/react-vite',
+          options: {},
+        },
+      }
+      export default config
+      ```
+    - Add scripts to `package.json`:
+      ```json
+      {
+        "scripts": {
+          "storybook": "storybook dev -p 6006",
+          "build-storybook": "storybook build"
+        }
+      }
+      ```
+
+12. **Separate components from application code** (MANDATORY):
+    - Create project structure:
+      ```
+      src/
+        components/           # Reusable UI components (with stories)
+          Button/
+            Button.tsx
+            Button.styles.ts
+            Button.stories.tsx
+            Button.test.tsx
+            index.ts
+        features/             # Feature-specific code (business logic)
+          auth/
+          dashboard/
+        lib/                  # Utilities and helpers
+        hooks/                # Custom hooks
+        app/                  # Next.js App Router pages (or pages/ for Vite)
+      ```
+    - Components folder rules:
+      * Only presentational components
+      * No business logic or API calls
+      * Each component has story and test files
+    - Features folder rules:
+      * Contains business logic and API integration
+      * Can import from components/
+      * Feature-specific components live here (not reusable)
+
+13. Initialize git repository if not already initialized
+
+14. Create a basic README with project info and getting started instructions
+
+15. Show the user how to start the dev server
 
 **Example usage**:
 - `/new-website my-portfolio`