codehava-agent-kit 1.0.0 → 2.0.0

package/templates/.agent/skills/react-nextjs-development/SKILL.md

@@ -0,0 +1,228 @@
+---
+name: react-nextjs-development
+description: "React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns."
+category: granular-workflow-bundle
+risk: safe
+source: personal
+date_added: "2026-02-27"
+---
+
+# React/Next.js Development Workflow
+
+## Overview
+
+Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.
+
+## When to Use This Workflow
+
+Use this workflow when:
+- Building new React applications
+- Creating Next.js 14+ projects with App Router
+- Implementing Server Components
+- Setting up TypeScript with React
+- Styling with Tailwind CSS
+- Building full-stack Next.js applications
+
+## Workflow Phases
+
+### Phase 1: Project Setup
+
+#### Skills to Invoke
+- `app-builder` - Application scaffolding
+- `senior-fullstack` - Full-stack guidance
+- `nextjs-app-router-patterns` - Next.js 14+ patterns
+- `typescript-pro` - TypeScript setup
+
+#### Actions
+1. Choose project type (React SPA, Next.js app)
+2. Select build tool (Vite, Next.js, Create React App)
+3. Scaffold project structure
+4. Configure TypeScript
+5. Set up ESLint and Prettier
+
+#### Copy-Paste Prompts
+```
+Use @app-builder to scaffold a new Next.js 14 project with App Router
+```
+
+```
+Use @nextjs-app-router-patterns to set up Server Components
+```
+
+### Phase 2: Component Architecture
+
+#### Skills to Invoke
+- `frontend-developer` - Component development
+- `react-patterns` - React patterns
+- `react-state-management` - State management
+- `react-ui-patterns` - UI patterns
+
+#### Actions
+1. Design component hierarchy
+2. Create base components
+3. Implement layout components
+4. Set up state management
+5. Create custom hooks
+
+#### Copy-Paste Prompts
+```
+Use @frontend-developer to create reusable React components
+```
+
+```
+Use @react-patterns to implement proper component composition
+```
+
+```
+Use @react-state-management to set up Zustand store
+```
+
+### Phase 3: Styling and Design
+
+#### Skills to Invoke
+- `frontend-design` - UI design
+- `tailwind-patterns` - Tailwind CSS
+- `tailwind-design-system` - Design system
+- `core-components` - Component library
+
+#### Actions
+1. Set up Tailwind CSS
+2. Configure design tokens
+3. Create utility classes
+4. Build component styles
+5. Implement responsive design
+
+#### Copy-Paste Prompts
+```
+Use @tailwind-patterns to style components with Tailwind CSS v4
+```
+
+```
+Use @frontend-design to create a modern dashboard UI
+```
+
+### Phase 4: Data Fetching
+
+#### Skills to Invoke
+- `nextjs-app-router-patterns` - Server Components
+- `react-state-management` - React Query
+- `api-patterns` - API integration
+
+#### Actions
+1. Implement Server Components
+2. Set up React Query/SWR
+3. Create API client
+4. Handle loading states
+5. Implement error boundaries
+
+#### Copy-Paste Prompts
+```
+Use @nextjs-app-router-patterns to implement Server Components data fetching
+```
+
+### Phase 5: Routing and Navigation
+
+#### Skills to Invoke
+- `nextjs-app-router-patterns` - App Router
+- `nextjs-best-practices` - Next.js patterns
+
+#### Actions
+1. Set up file-based routing
+2. Create dynamic routes
+3. Implement nested routes
+4. Add route guards
+5. Configure redirects
+
+#### Copy-Paste Prompts
+```
+Use @nextjs-app-router-patterns to set up parallel routes and intercepting routes
+```
+
+### Phase 6: Forms and Validation
+
+#### Skills to Invoke
+- `frontend-developer` - Form development
+- `typescript-advanced-types` - Type validation
+- `react-ui-patterns` - Form patterns
+
+#### Actions
+1. Choose form library (React Hook Form, Formik)
+2. Set up validation (Zod, Yup)
+3. Create form components
+4. Handle submissions
+5. Implement error handling
+
+#### Copy-Paste Prompts
+```
+Use @frontend-developer to create forms with React Hook Form and Zod
+```
+
+### Phase 7: Testing
+
+#### Skills to Invoke
+- `javascript-testing-patterns` - Jest/Vitest
+- `playwright-skill` - E2E testing
+- `e2e-testing-patterns` - E2E patterns
+
+#### Actions
+1. Set up testing framework
+2. Write unit tests
+3. Create component tests
+4. Implement E2E tests
+5. Configure CI integration
+
+#### Copy-Paste Prompts
+```
+Use @javascript-testing-patterns to write Vitest tests
+```
+
+```
+Use @playwright-skill to create E2E tests for critical flows
+```
+
+### Phase 8: Build and Deployment
+
+#### Skills to Invoke
+- `vercel-deployment` - Vercel deployment
+- `vercel-deploy-claimable` - Vercel deployment
+- `web-performance-optimization` - Performance
+
+#### Actions
+1. Configure build settings
+2. Optimize bundle size
+3. Set up environment variables
+4. Deploy to Vercel
+5. Configure preview deployments
+
+#### Copy-Paste Prompts
+```
+Use @vercel-deployment to deploy Next.js app to production
+```
+
+## Technology Stack
+
+| Category | Technology |
+|----------|------------|
+| Framework | Next.js 14+, React 18+ |
+| Language | TypeScript 5+ |
+| Styling | Tailwind CSS v4 |
+| State | Zustand, React Query |
+| Forms | React Hook Form, Zod |
+| Testing | Vitest, Playwright |
+| Deployment | Vercel |
+
+## Quality Gates
+
+- [ ] TypeScript compiles without errors
+- [ ] All tests passing
+- [ ] Linting clean
+- [ ] Performance metrics met (LCP, CLS, FID)
+- [ ] Accessibility checked (WCAG 2.1)
+- [ ] Responsive design verified
+
+## Related Workflow Bundles
+
+- `development` - General development
+- `testing-qa` - Testing workflow
+- `documentation` - Documentation
+- `typescript-development` - TypeScript patterns

package/templates/.agent/skills/react-patterns/SKILL.md

@@ -0,0 +1,203 @@
+---
+name: react-patterns
+description: "Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices."
+risk: unknown
+source: community
+date_added: "2026-02-27"
+---
+
+# React Patterns
+
+> Principles for building production-ready React applications.
+
+---
+
+## 1. Component Design Principles
+
+### Component Types
+
+| Type | Use | State |
+|------|-----|-------|
+| **Server** | Data fetching, static | None |
+| **Client** | Interactivity | useState, effects |
+| **Presentational** | UI display | Props only |
+| **Container** | Logic/state | Heavy state |
+
+### Design Rules
+
+- One responsibility per component
+- Props down, events up
+- Composition over inheritance
+- Prefer small, focused components
+
+---
+
+## 2. Hook Patterns
+
+### When to Extract Hooks
+
+| Pattern | Extract When |
+|---------|-------------|
+| **useLocalStorage** | Same storage logic needed |
+| **useDebounce** | Multiple debounced values |
+| **useFetch** | Repeated fetch patterns |
+| **useForm** | Complex form state |
+
+### Hook Rules
+
+- Hooks at top level only
+- Same order every render
+- Custom hooks start with "use"
+- Clean up effects on unmount
+
+---
+
+## 3. State Management Selection
+
+| Complexity | Solution |
+|------------|----------|
+| Simple | useState, useReducer |
+| Shared local | Context |
+| Server state | React Query, SWR |
+| Complex global | Zustand, Redux Toolkit |
+
+### State Placement
+
+| Scope | Where |
+|-------|-------|
+| Single component | useState |
+| Parent-child | Lift state up |
+| Subtree | Context |
+| App-wide | Global store |
+
+---
+
+## 4. React 19 Patterns
+
+### New Hooks
+
+| Hook | Purpose |
+|------|---------|
+| **useActionState** | Form submission state |
+| **useOptimistic** | Optimistic UI updates |
+| **use** | Read resources in render |
+
+### Compiler Benefits
+
+- Automatic memoization
+- Less manual useMemo/useCallback
+- Focus on pure components
+
+---
+
+## 5. Composition Patterns
+
+### Compound Components
+
+- Parent provides context
+- Children consume context
+- Flexible slot-based composition
+- Example: Tabs, Accordion, Dropdown
+
+### Render Props vs Hooks
+
+| Use Case | Prefer |
+|----------|--------|
+| Reusable logic | Custom hook |
+| Render flexibility | Render props |
+| Cross-cutting | Higher-order component |
+
+---
+
+## 6. Performance Principles
+
+### When to Optimize
+
+| Signal | Action |
+|--------|--------|
+| Slow renders | Profile first |
+| Large lists | Virtualize |
+| Expensive calc | useMemo |
+| Stable callbacks | useCallback |
+
+### Optimization Order
+
+1. Check if actually slow
+2. Profile with DevTools
+3. Identify bottleneck
+4. Apply targeted fix
+
+---
+
+## 7. Error Handling
+
+### Error Boundary Usage
+
+| Scope | Placement |
+|-------|-----------|
+| App-wide | Root level |
+| Feature | Route/feature level |
+| Component | Around risky component |
+
+### Error Recovery
+
+- Show fallback UI
+- Log error
+- Offer retry option
+- Preserve user data
+
+---
+
+## 8. TypeScript Patterns
+
+### Props Typing
+
+| Pattern | Use |
+|---------|-----|
+| Interface | Component props |
+| Type | Unions, complex |
+| Generic | Reusable components |
+
+### Common Types
+
+| Need | Type |
+|------|------|
+| Children | ReactNode |
+| Event handler | MouseEventHandler |
+| Ref | RefObject<Element> |
+
+---
+
+## 9. Testing Principles
+
+| Level | Focus |
+|-------|-------|
+| Unit | Pure functions, hooks |
+| Integration | Component behavior |
+| E2E | User flows |
+
+### Test Priorities
+
+- User-visible behavior
+- Edge cases
+- Error states
+- Accessibility
+
+---
+
+## 10. Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|-------|
+| Prop drilling deep | Use context |
+| Giant components | Split smaller |
+| useEffect for everything | Server components |
+| Premature optimization | Profile first |
+| Index as key | Stable unique ID |
+
+---
+
+> **Remember:** React is about composition. Build small, combine thoughtfully.
+
+## When to Use
+This skill is applicable to execute the workflow or actions described in the overview.