@vodailoc/kilo-kit-mcp 1.1.0

package/skills/engineering/docs-seeker/references/tool-selection.md

@@ -0,0 +1,262 @@
+# Tool Selection Guide
+
+Complete reference for choosing and using the right tools for documentation discovery.
+
+## context7.com (PRIORITY)
+
+**Use FIRST for all llms.txt lookups**
+
+**Patterns:**
+
+GitHub repositories:
+```
+Pattern: https://context7.com/{org}/{repo}/llms.txt
+Examples:
+- https://github.com/vercel/next.js → https://context7.com/vercel/next.js/llms.txt
+- https://github.com/shadcn-ui/ui → https://context7.com/shadcn-ui/ui/llms.txt
+```
+
+Websites:
+```
+Pattern: https://context7.com/websites/{normalized-path}/llms.txt
+Examples:
+- https://docs.imgix.com/ → https://context7.com/websites/imgix/llms.txt
+- https://ffmpeg.org/doxygen/8.0/ → https://context7.com/websites/ffmpeg_doxygen_8_0/llms.txt
+```
+
+Topic-specific searches:
+```
+Pattern: https://context7.com/{path}/llms.txt?topic={query}
+Examples:
+- https://context7.com/shadcn-ui/ui/llms.txt?topic=date
+- https://context7.com/vercel/next.js/llms.txt?topic=cache
+- https://context7.com/websites/ffmpeg_doxygen_8_0/llms.txt?topic=compress
+```
+
+**Benefits:**
+- Comprehensive aggregator of documentation
+- Up-to-date content
+- Topic filtering for targeted results
+- Consistent format across libraries
+- Reduces search time
+
+**When to use:**
+- ALWAYS try context7.com first before WebSearch
+- Use topic parameter when user asks about specific feature
+- Fall back to WebSearch only if context7.com returns 404
+
+## WebSearch
+
+**Use when:**
+- context7.com unavailable or returns 404
+- Finding GitHub repository URLs
+- Locating official documentation sites
+- Identifying package registries
+- Searching for specific versions
+
+**Best practices:**
+- Try context7.com FIRST
+- Include domain in query: `site:docs.example.com`
+- Specify version when needed: `v2.0 llms.txt`
+- Use official terms: "official repository" "documentation"
+- Check multiple domains if first fails
+
+**Example queries:**
+```
+Good: "Next.js llms.txt site:nextjs.org"
+Good: "React v18 documentation site:react.dev"
+Good: "Vue 3 official github repository"
+
+Avoid: "how to use react" (too vague)
+Avoid: "best react tutorial" (not official)
+```
+
+## WebFetch
+
+**Use when:**
+- Reading llms.txt content
+- Accessing single documentation pages
+- Retrieving specific URLs
+- Checking documentation structure
+- Verifying content availability
+
+**Best practices:**
+- Use specific prompt: "Extract all documentation URLs"
+- Handle redirects properly
+- Check for rate limiting
+- Verify content is complete
+- Note last-modified dates when available
+
+**Limitations:**
+- Single URL at a time (use Explorer for multiple)
+- May timeout on very large pages
+- Cannot handle dynamic content
+- No JavaScript execution
+
+## Task Tool with Explore Subagent
+
+**Use when:**
+- Multiple URLs to read (3+)
+- Need parallel exploration
+- Comprehensive documentation coverage
+- Time-sensitive requests
+- Large documentation sets
+
+**Best practices:**
+- Launch all agents in single message
+- Distribute workload evenly
+- Group related URLs per agent
+- Maximum 7 agents per batch
+- Provide clear extraction goals
+
+**Example prompt:**
+```
+"Read the following URLs and extract:
+1. Installation instructions
+2. Core API methods
+3. Configuration options
+4. Common usage examples
+
+URLs:
+- [url1]
+- [url2]
+- [url3]"
+```
+
+## Task Tool with Researcher Subagent
+
+**Use when:**
+- No structured documentation found
+- Need diverse information sources
+- Community knowledge required
+- Scattered documentation
+- Comparative analysis needed
+
+**Best practices:**
+- Assign specific research areas per agent
+- Request source verification
+- Ask for date/version information
+- Prioritize official sources
+- Cross-reference findings
+
+**Example prompt:**
+```
+"Research [library] focusing on:
+1. Official installation methods
+2. Common usage patterns
+3. Known limitations or issues
+4. Community best practices
+
+Prioritize official sources and note version/date for all findings."
+```
+
+## Repomix
+
+**Use when:**
+- GitHub repository available
+- Need complete codebase analysis
+- Documentation scattered in repository
+- Want to analyze code structure
+- API documentation in code comments
+
+**Installation:**
+```bash
+# Check if installed
+which repomix
+
+# Install globally if needed
+npm install -g repomix
+
+# Verify installation
+repomix --version
+```
+
+**Usage:**
+```bash
+# Basic usage
+git clone [repo-url] /tmp/docs-analysis
+cd /tmp/docs-analysis
+repomix --output repomix-output.xml
+
+# Focus on specific directory
+repomix --include "docs/**" --output docs-only.xml
+
+# Exclude large files
+repomix --exclude "*.png,*.jpg,*.pdf" --output repomix-output.xml
+```
+
+**When Repomix may fail:**
+- Repository > 1GB (too large)
+- Requires authentication (private repo)
+- Slow network connection
+- Limited disk space
+- Binary-heavy repository
+
+**Alternatives if Repomix fails:**
+```bash
+# Option 1: Focus on docs directory only
+repomix --include "docs/**,README.md" --output docs.xml
+
+# Option 2: Use Explorer agents to read specific files
+# Launch agents to read key documentation files directly
+
+# Option 3: Manual repository exploration
+# Read README, then explore /docs directory structure
+```
+
+## Tool Selection Decision Tree
+
+```
+Need documentation?
+  ↓
+Try context7.com first
+  ↓
+Know GitHub org/repo?
+  YES → https://context7.com/{org}/{repo}/llms.txt
+  NO → Continue
+  ↓
+Know website URL?
+  YES → https://context7.com/websites/{normalized-path}/llms.txt
+  NO → Continue
+  ↓
+Specific topic/feature?
+  YES → Add ?topic={query} parameter
+  NO → Use base llms.txt URL
+  ↓
+context7.com found?
+  YES → Process llms.txt URLs (go to URL count check)
+  NO → Continue
+  ↓
+Fallback: WebSearch for llms.txt
+  ↓
+Single URL?
+  YES → WebFetch
+  NO → Continue
+  ↓
+1-3 URLs?
+  YES → Single Explorer agent
+  NO → Continue
+  ↓
+4+ URLs?
+  YES → Multiple Explorer agents (3-7)
+  NO → Continue
+  ↓
+Need repository analysis?
+  YES → Repomix (if available)
+  NO → Continue
+  ↓
+No structured docs?
+  YES → Researcher agents
+```
+
+## Quick Reference
+
+| Tool | Best For | Speed | Coverage | Complexity |
+|------|----------|-------|----------|------------|
+| context7.com | llms.txt lookup | Instant | High | Low |
+| context7.com?topic= | Targeted search | Instant | Focused | Low |
+| WebSearch | Finding URLs | Fast | Narrow | Low |
+| WebFetch | Single page | Fast | Single | Low |
+| Explorer | Multiple URLs | Fast | Medium | Medium |
+| Researcher | Scattered info | Slow | Wide | High |
+| Repomix | Repository | Medium | Complete | Medium |

package/skills/engineering/frontend-development/SKILL.md

@@ -0,0 +1,399 @@
+---
+name: frontend-dev-guidelines
+description: Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
+---
+
+# 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