Playbooks: AI के लिए स्मार्ट संदर्भ

AI को आपके प्रोजेक्ट को सीनियर टीम मेंबर की तरह समझना सिखाएं।

Playbooks क्या हैं?

Playbooks एक डायनेमिक कॉन्टेक्स्ट सिस्टम है जो आपको सटीक रूप से परिभाषित करने की अनुमति देता है कि AI को आपके कोडबेस को कैसे समझना, व्याख्या करना और उसके साथ इंटरैक्ट करना चाहिए।

Playbooks का दर्शन

संदर्भ सब कुछ है

अत्यधिक उन्नत AI भी उतना ही अच्छा है जितना कि उसे मिलने वाला संदर्भ। Playbooks यह सुनिश्चित करते हैं कि हर AI इंटरैक्शन इसकी गहरी समझ के साथ आता है:

• आपका प्रोजेक्ट आर्किटेक्चर
• स्थापित कोडिंग कॉन्वेंशन
• उपयोग किए जाने वाले डिज़ाइन पैटर्न
• बिज़नेस और तकनीकी फैसले

निष्पादित किए जा सकने वाला ज्ञान

स्थिर दस्तावेज़ों के विपरीत, Playbooks निष्पादित किए जा सकने वाला ज्ञान है जो हर इंटरैक्शन में AI के व्यवहार को सक्रिय रूप से आकार देता है।

Playbook की संरचना

मूलभूत Playbook

# .hatcher/playbooks/core.yaml
name: 'Core Project Playbook'
version: '1.0.0'
scope: 'global'

project:
  name: 'E-commerce Platform'
  framework: 'Next.js'
  architecture: 'modular-monolith'

conventions:
  naming:
    components: 'PascalCase'
    functions: 'camelCase'
    files: 'kebab-case'

  structure:
    components: 'src/components'
    pages: 'src/pages'
    utils: 'src/utils'
    types: 'src/types'

standards:
  - 'हमेशा कड़ी TypeScript का उपयोग करें'
  - 'कॉम्पोनेंट्स में स्पष्ट Props interface होना चाहिए'
  - 'स्टाइलिंग के लिए CSS Modules का उपयोग करें'
  - 'जटिल कॉम्पोनेंट्स के लिए error boundaries लागू करें'

डोमेन-विशिष्ट Playbook

# .hatcher/playbooks/ui-components.yaml
name: 'UI Components Playbook'
scope: 'src/components/**'
extends: 'core'

patterns:
  component_structure: |
    हर कॉम्पोनेंट इस संरचना का पालन करे:
    1. दस्तावेज़ीकरण के साथ Interface Props
    2. आवश्यक होने पर forwardRef के साथ मुख्य कॉम्पोनेंट
    3. displayName के साथ Default export
    4. अगर उप-कॉम्पोनेंट हैं तो Named export

  styling_approach: |
    इस डिज़ाइन सिस्टम का उपयोग करें:
    - Utility classes के लिए Tailwind CSS
    - जटिल स्टाइलिंग के लिए CSS Modules
    - Theming के लिए CSS वेरिएएबल्स

examples:
  button_component: |
    ```typescript
    interface ButtonProps {
      variant: 'primary' | 'secondary' | 'outline'
      size: 'sm' | 'md' | 'lg'
      children: React.ReactNode
      onClick?: () => void
    }

    export const Button = ({ variant, size, children, ...props }: ButtonProps) => {
      return (
        <button 
          className={`btn btn-${variant} btn-${size}`}
          {...props}
        >
          {children}
        </button>
      )
    }
    ```

Playbooks के प्रकार

1. आर्किटेक्चरल Playbook

उच्च-स्तरीय संरचना और डिज़ाइन फैसलों को परिभाषित करता है:

architecture:
  pattern: 'Clean Architecture'
  layers:
    - presentation: 'UI components और pages'
    - business: 'Use cases और domain logic'
    - data: 'Repository और external services'

  dependencies:
    direction: 'inward' # Dependencies अंदर की ओर इशारा करते हैं
    external_services: 'abstractions only'

2. फ्रेमवर्क Playbook

उपयोग किए जाने वाले फ्रेमवर्क के विशिष्ट कॉन्वेंशन:

framework_conventions:
  next_js:
    routing: 'app-directory'
    data_fetching: 'server-components-first'
    state_management: 'zustand'

  react:
    hooks_rules:
      - 'जटिल लॉजिक के लिए custom hooks का उपयोग करें'
      - 'useEffect केवल side effects के लिए'
      - 'सरल लोकल state के लिए useState'

3. टेस्टिंग Playbook

टेस्टिंग पैटर्न और प्रथाएं:

testing:
  philosophy: 'इम्प्लीमेंटेशन नहीं, ब्यहेवियर को टेस्ट करें'

  patterns:
    unit_tests:
      - 'शुद्ध फंक्शन को अलग से टेस्ट करें'
      - 'बाहरी dependencies को Mock करें'

    integration_tests:
      - 'कॉम्पोनेंट्स के बीच इंटरैक्शन टेस्ट करें'
      - 'वास्तविक डेटा fixtures का उपयोग करें'

    e2e_tests:
      - 'महत्वपूर्ण user journeys पर फोकस करें'
      - 'Happy path और edge cases दोनों को टेस्ट करें'

  tools:
    unit: 'vitest'
    integration: 'testing-library'
    e2e: 'playwright'

डायनेमिक कॉन्टेक्स्ट

Scope के आधार पर एक्टिवेशन

Playbooks काम की जा रही फाइल के आधार पर स्वचालित रूप से सक्रिय होते हैं:

# API routes के लिए Playbook
scope: "src/app/api/**"
context:
  api_patterns:
    - "Request validation के लिए zod का उपयोग करें"
    - "Consistent error format return करें"
    - "उचित HTTP status codes implement करें"

# UI components के लिए Playbook
scope: "src/components/**"
context:
  ui_patterns:
    - "Responsive design implement करें"
    - "Semantic HTML का उपयोग करें"
    - "Accessibility compliance सुनिश्चित करें"

Inheritance और Composition

# Base playbook
name: "base"
conventions:
  typescript: "strict"
  formatting: "prettier"

# Specialized playbook
name: "react-components"
extends: "base"  # Base से inherit करें
conventions:
  react:
    hooks: "recommended-rules"
    props: "interface-required"

Playbook प्रबंधन

नया Playbook बनाना

# Playbook template generate करें
hatcher playbook create --name ui-patterns --scope "src/components/**"

# दूसरे प्रोजेक्ट से import करें
hatcher playbook import --from ../other-project/.hatcher/playbooks/

Playbook वैलिडेशन

# Syntax और structure validate करें
hatcher playbook validate

# Codebase के विरुद्ध playbook test करें
hatcher playbook test --dry-run

Playbooks साझा करना

# Sharing के लिए export करें
hatcher playbook export --output team-playbooks.tar.gz

# Registry में publish करें
hatcher playbook publish --registry team-registry

Playbook Templates

Next.js Template

hatcher playbook install next-js-app-router
hatcher playbook install react-typescript
hatcher playbook install tailwind-css

Backend Template

hatcher playbook install express-typescript
hatcher playbook install prisma-orm
hatcher playbook install graphql-api

सर्वोत्तम प्रथाएं

1. सरल से शुरू करें

# मूलभूत कॉन्वेंशन से शुरू करें
conventions:
  - 'TypeScript strict mode का उपयोग करें'
  - 'ESLint recommendations का पालन करें'
  - 'Self-documenting code लिखें'

2. उपयोग के आधार पर पुनरावृत्ति

प्रोजेक्ट के विकसित होने के साथ अधिक विशिष्ट संदर्भ जोड़ें:

# Version 1.0 - Basic
conventions:
  naming: "functions के लिए camelCase"

# Version 1.1 - अधिक विशिष्ट
conventions:
  naming:
    functions: "camelCase"
    constants: "UPPER_SNAKE_CASE"
    types: "PascalCase"

3. फैसलों को दस्तावेज़ी करें

decisions:
  state_management: |
    Zustand का चयन किया गया क्योंकि:
    - छोटा bundle size
    - अच्छा TypeScript support
    - Boilerplate की आवश्यकता नहीं
    - Testing के लिए आसान

  styling_approach: |
    Tailwind + CSS Modules का संयोजन:
    - Utility classes के लिए Tailwind
    - जटिल कॉम्पोनेंट्स के लिए CSS Modules
    - Design system के साथ स्थिरता

4. Examples का उपयोग करें

examples:
  api_route: |
    ```typescript
    // src/app/api/users/route.ts
    import { NextRequest } from 'next/server'
    import { userSchema } from '@/schemas/user'

    export async function POST(request: NextRequest) {
      try {
        const body = await request.json()
        const userData = userSchema.parse(body)
        
        // Business logic यहां
        
        return Response.json({ success: true, data: userData })
      } catch (error) {
        return Response.json(
          { success: false, error: 'Invalid data' },
          { status: 400 }
        )
      }
    }
    ```

समस्या निवारण

Playbook लागू नहीं हो रहा

# Playbook activation debug करें
hatcher playbook debug --file src/components/Button.tsx

# Active playbooks देखें
hatcher playbook list --active

Playbooks के बीच Conflict

# Conflicts का विश्लेषण करें
hatcher playbook conflicts

# Priority के साथ resolve करें
hatcher playbook prioritize ui-components > general

---

Playbooks AI को आम सहायक से आपके प्रोजेक्ट के विशिष्ट संदर्भ को समझने वाले विकास पार्टनर में बदल देते हैं।