cokit-cli 1.2.6 → 1.3.0

package/templates/repo/.github/skills/frontend-design/references/workflow-immersive.md

@@ -0,0 +1,82 @@
+# Immersive Design Workflow
+
+Create award-quality designs with storytelling, 3D experiences, and micro-interactions.
+
+## Prerequisites
+- Activate `ui-ux-pro-max` skill (if available) first
+
+## Initial Research
+```bash
+```
+
+## Workflow Steps
+
+### 1. Research Phase
+Use `researcher` subagent to investigate:
+- Design style and current trends
+- Font combinations and typography
+- Color theory for the context
+- Border and spacing patterns
+- Element positioning principles
+- Animation and interaction patterns
+
+### 2. Design Implementation
+Use `ui-ux-designer` subagent:
+- Build step by step from research
+- Create plan with `## Naming` pattern
+- Default to HTML/CSS/JS if unspecified
+
+### 3. Storytelling Elements
+Incorporate:
+- Narrative flow through scroll
+- Emotional pacing
+- Visual hierarchy for story beats
+- Progressive disclosure of content
+
+### 4. 3D Experiences
+If applicable, integrate:
+- Three.js scenes
+- Interactive 3D elements
+- Parallax depth effects
+- WebGL enhancements
+
+### 5. Micro-interactions
+Add polish:
+- Button feedback
+- Form interactions
+- Loading states
+- Hover effects
+- Scroll responses
+
+### 6. Asset Generation
+Use `ai-multimodal` (if available) skill:
+- Generate high-quality visuals
+- Create unique imagery
+- Verify asset quality
+- Remove backgrounds as needed
+
+### 7. Verify & Report
+- Review against inspiration
+- Report to user
+- Request approval
+- Update `./docs/design-guidelines.md`
+
+## Quality Standards
+Match award-winning sites:
+- Dribbble top shots
+- Behance featured
+- Awwwards winners
+- Mobbin patterns
+- TheFWA selections
+
+## Design Principles
+- **Bold aesthetic choices**: Commit fully to direction
+- **Attention to detail**: Every pixel matters
+- **Cohesive experience**: All elements work together
+- **Memorable moments**: Create surprise and delight
+- **Technical excellence**: Performance + polish
+
+## Related
+- `workflow-3d.md` - 3D implementation details
+- `animejs.md` - Animation patterns
+- `technical-best-practices.md` - Quality guidelines

package/templates/repo/.github/skills/frontend-design/references/workflow-quick.md

@@ -3,18 +3,16 @@
 Rapid design creation with minimal planning overhead.
 
 ## Prerequisites
-- Activate `ui-styling` skill first for design patterns
+- Activate `ui-ux-pro-max` skill (if available) first
 
 ## Initial Research
-Quick reference from `ui-styling` skill:
-- shadcn/ui components for rapid development
-- Tailwind CSS utility classes
-- Color and typography defaults
+```bash
+```
 
 ## Workflow Steps
 
 ### 1. Start Design Process
-Use `ui-ux-designer` agent directly:
+Use `ui-ux-designer` subagent directly:
 - Skip extensive planning
 - Move to implementation quickly
 - Make design decisions on-the-fly
@@ -24,11 +22,11 @@ Use `ui-ux-designer` agent directly:
 - Focus on core functionality
 - Maintain quality despite speed
 
-### 3. Process Assets
-Use CLI tools:
-- Process images with ImageMagick
-- Optimize assets for web
-- Quick adjustments as needed
+### 3. Generate Assets
+Use `ai-multimodal` (if available) skill:
+- Generate required visuals
+- Verify quality quickly
+- Use `media-processing` for adjustments
 
 ### 4. Report & Approve
 - Summarize changes briefly
@@ -50,5 +48,5 @@ While moving fast, maintain:
 - Clean code structure
 
 ## Related
-- `workflow-screenshot.md` - For exact replication
+- `workflow-immersive.md` - For comprehensive designs
 - `technical-overview.md` - Quick reference

package/templates/repo/.github/skills/frontend-design/references/workflow-screenshot.md

@@ -3,12 +3,13 @@
 Replicate a design exactly from a provided screenshot.
 
 ## Prerequisites
-- Activate `ui-styling` skill first for design patterns
+- Activate `ui-ux-pro-max` skill (if available) first for design intelligence
+- Have `ai-multimodal` (if available) skill ready for visual analysis
 
 ## Workflow Steps
 
 ### 1. Analyze Screenshot Details
-Extract from screenshot:
+Use `ai-multimodal` (if available) skill to extract:
 - Design style and visual trends
 - Font names (predict Google Fonts), sizes, weights
 - Color palette with exact hex codes
@@ -22,7 +23,7 @@ Extract from screenshot:
 **Font Prediction**: Avoid defaulting to Inter/Poppins. Match actual fonts visible.
 
 ### 2. Create Implementation Plan
-Use `ui-ux-designer` agent:
+Use `ui-ux-designer` subagent:
 - Create plan directory (use `## Naming` pattern from hooks)
 - Write `plan.md` (<80 lines, generic overview)
 - Add `phase-XX-name.md` files with:
@@ -36,11 +37,11 @@ Use `ui-ux-designer` agent:
 - Default to HTML/CSS/JS if no framework specified
 - Match screenshot precisely
 
-### 4. Process Assets
-Use CLI tools:
-- Process images with ImageMagick
-- Remove backgrounds with RMBG CLI
-- Optimize assets for web
+### 4. Generate Assets
+Use `ai-multimodal` (if available) skill:
+- Generate images, icons, backgrounds
+- Verify generated assets match design
+- Remove backgrounds if needed with `media-processing`
 
 ### 5. Verify & Report
 - Compare implementation to screenshot

package/templates/repo/.github/skills/frontend-design/references/workflow-video.md

@@ -0,0 +1,74 @@
+# Video Replication Workflow
+
+Replicate a design including animations/interactions from a provided video.
+
+## Prerequisites
+- Activate `ui-ux-pro-max` skill (if available) first
+- Have `ai-multimodal` (if available) skill ready for video analysis
+
+## Workflow Steps
+
+### 1. Analyze Video Details
+Use `ai-multimodal` (if available) skill to describe:
+- Every visible element and its properties
+- All interactions and user flows
+- Animation timing, easing, duration
+- Transitions between states/pages
+- Color palette with hex codes
+- Typography (predict Google Fonts)
+- Borders, spacing, sizing
+- Textures, materials, lighting
+- Shadows, reflections, blur, glow
+- Background effects
+
+**Font Prediction**: Avoid defaulting to Inter/Poppins.
+
+### 2. Create Implementation Plan
+Use `ui-ux-designer` subagent:
+- Create plan directory (use `## Naming` pattern)
+- Write `plan.md` (<80 lines overview)
+- Add `phase-XX-name.md` files with full sections
+- Keep research reports under 150 lines
+
+### 3. Implement
+- Follow plan step by step
+- Default to HTML/CSS/JS if unspecified
+- Prioritize animation accuracy
+
+### 4. Animation Implementation
+Focus on:
+- Timing functions matching video
+- State transitions
+- Micro-interactions
+- Scroll-triggered effects
+- Hover/focus states
+- Loading animations
+
+Use `animejs.md` reference for animation patterns.
+
+### 5. Generate Assets
+Use `ai-multimodal` (if available) skill:
+- Generate static assets
+- Create animated sprites if needed
+- Verify quality matches video
+- Use `media-processing` for processing
+
+### 6. Verify & Report
+- Compare implementation to video
+- Test all interactions
+- Report summary to user
+- Request approval
+
+### 7. Document
+If approved, update `./docs/design-guidelines.md`
+
+## Quality Standards
+- Frame-accurate animation timing
+- Smooth 60fps performance
+- Responsive behavior preserved
+- All interactions functional
+
+## Related
+- `animejs.md` - Animation library reference
+- `design-extraction-overview.md` - Guidelines extraction
+- `technical-optimization.md` - Performance tips

package/templates/repo/.github/skills/frontend-development/SKILL.md

@@ -0,0 +1,400 @@
+---
+name: frontend-development
+description: Build React/TypeScript frontends with modern patterns. Use for components, Suspense, lazy loading, useSuspenseQuery, MUI v7 styling, TanStack Router, performance optimization.
+argument-hint: "[component or feature]"
+---
+
+# Frontend Development Guidelines
+
+## Purpose
+
+Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.
+
+## When to Use This Skill
+
+- Creating new components or pages
+- Building new features
+- Fetching data with TanStack Query
+- Setting up routing with TanStack Router
+- Styling components with MUI v7
+- Performance optimization
+- Organizing frontend code
+- TypeScript best practices
+
+---
+
+## Quick Start
+
+### New Component Checklist
+
+Creating a component? Follow this checklist:
+
+- [ ] Use `React.FC<Props>` pattern with TypeScript
+- [ ] Lazy load if heavy component: `React.lazy(() => import())`
+- [ ] Wrap in `<SuspenseLoader>` for loading states
+- [ ] Use `useSuspenseQuery` for data fetching
+- [ ] Import aliases: `@/`, `~types`, `~components`, `~features`
+- [ ] Styles: Inline if <100 lines, separate file if >100 lines
+- [ ] Use `useCallback` for event handlers passed to children
+- [ ] Default export at bottom
+- [ ] No early returns with loading spinners
+- [ ] Use `useMuiSnackbar` for user notifications
+
+### New Feature Checklist
+
+Creating a feature? Set up this structure:
+
+- [ ] Create `features/{feature-name}/` directory
+- [ ] Create subdirectories: `api/`, `components/`, `hooks/`, `helpers/`, `types/`
+- [ ] Create API service file: `api/{feature}Api.ts`
+- [ ] Set up TypeScript types in `types/`
+- [ ] Create route in `routes/{feature-name}/index.tsx`
+- [ ] Lazy load feature components
+- [ ] Use Suspense boundaries
+- [ ] Export public API from feature `index.ts`
+
+---
+
+## Import Aliases Quick Reference
+
+| Alias | Resolves To | Example |
+|-------|-------------|---------|
+| `@/` | `src/` | `import { apiClient } from '@/lib/apiClient'` |
+| `~types` | `src/types` | `import type { User } from '~types/user'` |
+| `~components` | `src/components` | `import { SuspenseLoader } from '~components/SuspenseLoader'` |
+| `~features` | `src/features` | `import { authApi } from '~features/auth'` |
+
+Defined in: [vite.config.ts](../../vite.config.ts) lines 180-185
+
+---
+
+## Common Imports Cheatsheet
+
+```typescript
+// React & Lazy Loading
+import React, { useState, useCallback, useMemo } from 'react';
+const Heavy = React.lazy(() => import('./Heavy'));
+
+// MUI Components
+import { Box, Paper, Typography, Button, Grid } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+
+// TanStack Query (Suspense)
+import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query';
+
+// TanStack Router
+import { createFileRoute } from '@tanstack/react-router';
+
+// Project Components
+import { SuspenseLoader } from '~components/SuspenseLoader';
+
+// Hooks
+import { useAuth } from '@/hooks/useAuth';
+import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';
+
+// Types
+import type { Post } from '~types/post';
+```
+
+---
+
+## Topic Guides
+
+### 🎨 Component Patterns
+
+**Modern React components use:**
+- `React.FC<Props>` for type safety
+- `React.lazy()` for code splitting
+- `SuspenseLoader` for loading states
+- Named const + default export pattern
+
+**Key Concepts:**
+- Lazy load heavy components (DataGrid, charts, editors)
+- Always wrap lazy components in Suspense
+- Use SuspenseLoader component (with fade animation)
+- Component structure: Props → Hooks → Handlers → Render → Export
+
+**[📖 Complete Guide: resources/component-patterns.md](resources/component-patterns.md)**
+
+---
+
+### 📊 Data Fetching
+
+**PRIMARY PATTERN: useSuspenseQuery**
+- Use with Suspense boundaries
+- Cache-first strategy (check grid cache before API)
+- Replaces `isLoading` checks
+- Type-safe with generics
+
+**API Service Layer:**
+- Create `features/{feature}/api/{feature}Api.ts`
+- Use `apiClient` axios instance
+- Centralized methods per feature
+- Route format: `/form/route` (NOT `/api/form/route`)
+
+**[📖 Complete Guide: resources/data-fetching.md](resources/data-fetching.md)**
+
+---
+
+### 📁 File Organization
+
+**features/ vs components/:**
+- `features/`: Domain-specific (posts, comments, auth)
+- `components/`: Truly reusable (SuspenseLoader, CustomAppBar)
+
+**Feature Subdirectories:**
+```
+features/
+  my-feature/
+    api/          # API service layer
+    components/   # Feature components
+    hooks/        # Custom hooks
+    helpers/      # Utility functions
+    types/        # TypeScript types
+```
+
+**[📖 Complete Guide: resources/file-organization.md](resources/file-organization.md)**
+
+---
+
+### 🎨 Styling
+
+**Inline vs Separate:**
+- <100 lines: Inline `const styles: Record<string, SxProps<Theme>>`
+- >100 lines: Separate `.styles.ts` file
+
+**Primary Method:**
+- Use `sx` prop for MUI components
+- Type-safe with `SxProps<Theme>`
+- Theme access: `(theme) => theme.palette.primary.main`
+
+**MUI v7 Grid:**
+```typescript
+<Grid size={{ xs: 12, md: 6 }}>  // ✅ v7 syntax
+<Grid xs={12} md={6}>             // ❌ Old syntax
+```
+
+**[📖 Complete Guide: resources/styling-guide.md](resources/styling-guide.md)**
+
+---
+
+### 🛣️ Routing
+
+**TanStack Router - Folder-Based:**
+- Directory: `routes/my-route/index.tsx`
+- Lazy load components
+- Use `createFileRoute`
+- Breadcrumb data in loader
+
+**Example:**
+```typescript
+import { createFileRoute } from '@tanstack/react-router';
+import { lazy } from 'react';
+
+const MyPage = lazy(() => import('@/features/my-feature/components/MyPage'));
+
+export const Route = createFileRoute('/my-route/')({
+    component: MyPage,
+    loader: () => ({ crumb: 'My Route' }),
+});
+```
+
+**[📖 Complete Guide: resources/routing-guide.md](resources/routing-guide.md)**
+
+---
+
+### ⏳ Loading & Error States
+
+**CRITICAL RULE: No Early Returns**
+
+```typescript
+// ❌ NEVER - Causes layout shift
+if (isLoading) {
+    return <LoadingSpinner />;
+}
+
+// ✅ ALWAYS - Consistent layout
+<SuspenseLoader>
+    <Content />
+</SuspenseLoader>
+```
+
+**Why:** Prevents Cumulative Layout Shift (CLS), better UX
+
+**Error Handling:**
+- Use `useMuiSnackbar` for user feedback
+- NEVER `react-toastify`
+- TanStack Query `onError` callbacks
+
+**[📖 Complete Guide: resources/loading-and-error-states.md](resources/loading-and-error-states.md)**
+
+---
+
+### ⚡ Performance
+
+**Optimization Patterns:**
+- `useMemo`: Expensive computations (filter, sort, map)
+- `useCallback`: Event handlers passed to children
+- `React.memo`: Expensive components
+- Debounced search (300-500ms)
+- Memory leak prevention (cleanup in useEffect)
+
+**[📖 Complete Guide: resources/performance.md](resources/performance.md)**
+
+---
+
+### 📘 TypeScript
+
+**Standards:**
+- Strict mode, no `any` type
+- Explicit return types on functions
+- Type imports: `import type { User } from '~types/user'`
+- Component prop interfaces with JSDoc
+
+**[📖 Complete Guide: resources/typescript-standards.md](resources/typescript-standards.md)**
+
+---
+
+### 🔧 Common Patterns
+
+**Covered Topics:**
+- React Hook Form with Zod validation
+- DataGrid wrapper contracts
+- Dialog component standards
+- `useAuth` hook for current user
+- Mutation patterns with cache invalidation
+
+**[📖 Complete Guide: resources/common-patterns.md](resources/common-patterns.md)**
+
+---
+
+### 📚 Complete Examples
+
+**Full working examples:**
+- Modern component with all patterns
+- Complete feature structure
+- API service layer
+- Route with lazy loading
+- Suspense + useSuspenseQuery
+- Form with validation
+
+**[📖 Complete Guide: resources/complete-examples.md](resources/complete-examples.md)**
+
+---
+
+## Navigation Guide
+
+| Need to... | Read this resource |
+|------------|-------------------|
+| Create a component | [component-patterns.md](resources/component-patterns.md) |
+| Fetch data | [data-fetching.md](resources/data-fetching.md) |
+| Organize files/folders | [file-organization.md](resources/file-organization.md) |
+| Style components | [styling-guide.md](resources/styling-guide.md) |
+| Set up routing | [routing-guide.md](resources/routing-guide.md) |
+| Handle loading/errors | [loading-and-error-states.md](resources/loading-and-error-states.md) |
+| Optimize performance | [performance.md](resources/performance.md) |
+| TypeScript types | [typescript-standards.md](resources/typescript-standards.md) |
+| Forms/Auth/DataGrid | [common-patterns.md](resources/common-patterns.md) |
+| See full examples | [complete-examples.md](resources/complete-examples.md) |
+
+---
+
+## Core Principles
+
+1. **Lazy Load Everything Heavy**: Routes, DataGrid, charts, editors
+2. **Suspense for Loading**: Use SuspenseLoader, not early returns
+3. **useSuspenseQuery**: Primary data fetching pattern for new code
+4. **Features are Organized**: api/, components/, hooks/, helpers/ subdirs
+5. **Styles Based on Size**: <100 inline, >100 separate
+6. **Import Aliases**: Use @/, ~types, ~components, ~features
+7. **No Early Returns**: Prevents layout shift
+8. **useMuiSnackbar**: For all user notifications
+
+---
+
+## Quick Reference: File Structure
+
+```
+src/
+  features/
+    my-feature/
+      api/
+        myFeatureApi.ts       # API service
+      components/
+        MyFeature.tsx         # Main component
+        SubComponent.tsx      # Related components
+      hooks/
+        useMyFeature.ts       # Custom hooks
+        useSuspenseMyFeature.ts  # Suspense hooks
+      helpers/
+        myFeatureHelpers.ts   # Utilities
+      types/
+        index.ts              # TypeScript types
+      index.ts                # Public exports
+
+  components/
+    SuspenseLoader/
+      SuspenseLoader.tsx      # Reusable loader
+    CustomAppBar/
+      CustomAppBar.tsx        # Reusable app bar
+
+  routes/
+    my-route/
+      index.tsx               # Route component
+      create/
+        index.tsx             # Nested route
+```
+
+---
+
+## Modern Component Template (Quick Copy)
+
+```typescript
+import React, { useState, useCallback } from 'react';
+import { Box, Paper } from '@mui/material';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { featureApi } from '../api/featureApi';
+import type { FeatureData } from '~types/feature';
+
+interface MyComponentProps {
+    id: number;
+    onAction?: () => void;
+}
+
+export const MyComponent: React.FC<MyComponentProps> = ({ id, onAction }) => {
+    const [state, setState] = useState<string>('');
+
+    const { data } = useSuspenseQuery({
+        queryKey: ['feature', id],
+        queryFn: () => featureApi.getFeature(id),
+    });
+
+    const handleAction = useCallback(() => {
+        setState('updated');
+        onAction?.();
+    }, [onAction]);
+
+    return (
+        <Box sx={{ p: 2 }}>
+            <Paper sx={{ p: 3 }}>
+                {/* Content */}
+            </Paper>
+        </Box>
+    );
+};
+
+export default MyComponent;
+```
+
+For complete examples, see [resources/complete-examples.md](resources/complete-examples.md)
+
+---
+
+## Related Skills
+
+- **error-tracking**: Error tracking with Sentry (applies to frontend too)
+- **backend-dev-guidelines**: Backend API patterns that frontend consumes
+
+---
+
+**Skill Status**: Modular structure with progressive loading for optimal context management