thanh-kit 2.5.0

package/templates/skills/frontend-design/references/visual-analysis-overview.md

@@ -0,0 +1,95 @@
+# Visual Analysis Overview
+
+Use AI multimodal vision to analyze generated assets and verify design standards.
+
+## Purpose
+
+- Verify generated assets align with aesthetic direction
+- Ensure professional quality before integration
+- Identify specific improvements needed for iteration
+- Make objective design decisions based on analysis
+- Extract actionable data (hex codes, composition insights)
+
+## Quick Start
+
+### Comprehensive Analysis
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/generated-hero.png \
+  --task analyze \
+  --prompt "[see analysis-prompts.md for detailed prompt]" \
+  --output docs/assets/analysis-report.md \
+  --model gemini-2.5-flash
+```
+
+### Compare Multiple Variations
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/option-1.png docs/assets/option-2.png docs/assets/option-3.png \
+  --task analyze \
+  --prompt "[see analysis-prompts.md for comparison prompt]" \
+  --output docs/assets/comparison-analysis.md \
+  --model gemini-2.5-flash
+```
+
+### Extract Color Palette
+```bash
+python scripts/gemini_batch_process.py \
+  --files docs/assets/final-asset.png \
+  --task analyze \
+  --prompt "Extract 5-8 dominant colors with hex codes. Classify as primary/accent/neutral. Suggest CSS variable names." \
+  --output docs/assets/color-palette.md \
+  --model gemini-2.5-flash
+```
+
+## Decision Framework
+
+### Score ≥ 8/10: Proceed to Integration
+**Actions**:
+- Optimize for web delivery
+- Create responsive variants
+- Document implementation guidelines
+- Extract color palette for CSS variables
+
+### Score 6-7/10: Minor Refinements Needed
+**Actions**:
+- Use `media-processing` skill for adjustments (brightness/contrast/saturation)
+- Consider selective regeneration of problem areas
+- May proceed with caution if time-constrained
+
+### Score < 6/10: Major Iteration Required
+**Actions**:
+- Analyze specific failure points from report
+- Refine generation prompt substantially
+- Regenerate with corrected parameters
+- Consider alternative aesthetic approach
+
+## Detailed References
+
+- `analysis-prompts.md` - All analysis prompt templates
+- `analysis-techniques.md` - Advanced analysis strategies
+- `analysis-best-practices.md` - Quality guidelines and pitfalls
+
+## Example Color Extraction Output
+
+```css
+/* Extracted Color Palette */
+:root {
+  /* Primary Colors */
+  --color-primary-600: #2C5F7D;  /* Dark teal - headers, CTAs */
+  --color-primary-400: #4A90B8;  /* Medium teal - links, accents */
+
+  /* Accent Colors */
+  --color-accent-500: #E8B44F;   /* Warm gold - highlights */
+
+  /* Neutral Colors */
+  --color-neutral-900: #1A1A1A;  /* Near black - body text */
+  --color-neutral-100: #F5F5F5;  /* Light gray - backgrounds */
+
+  /* Semantic Usage */
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-on-primary: #FFFFFF;
+  --color-background: var(--color-neutral-100);
+  --color-cta: var(--color-primary-600);
+}
+```

package/templates/skills/frontend-design-pro/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: frontend-design-pro
+description: Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
+---
+
+You are a world-class creative frontend engineer AND visual director. Every interface you build must feel like a $50k+ agency project.
+
+## 1. Choose One Bold Aesthetic Direction (commit 100%)
+| Style Category              | Core Keywords (copy-paste ready)                                      | Color Palette Ideas                                      | Signature Effects & Details                                                                      |
+|-----------------------------|----------------------------------------------------------------------|----------------------------------------------------------|--------------------------------------------------------------------------------------------------|
+| Minimalism & Swiss Style    | clean, swiss, grid-based, generous whitespace, typography-first     | Monochrome + one bold accent, beige/gray neutrals        | Razor-sharp hierarchy, subtle hover lifts, micro-animations, perfect alignment                   |
+| Neumorphism                 | soft ui, embossed, concave/convex, subtle depth, monochromatic      | Single pastel + light/dark variations                    | Multi-layer soft shadows, press/release animations, no hard borders                             |
+| Glassmorphism               | frosted glass, translucent, vibrant backdrop, blur, layered         | Aurora/sunset backgrounds + semi-transparent whites      | backdrop-filter: blur(), glowing borders, light reflections, floating layers                    |
+| Brutalism                   | raw, unpolished, asymmetric, high contrast, intentionally ugly      | Harsh primaries, black/white, occasional neon            | Sharp corners, huge bold text, exposed grid, "broken" aesthetic                                  |
+| Claymorphism                | clay, chunky 3D, toy-like, bubbly, double shadows, pastel           | Candy pastels, soft gradients                            | Inner + outer shadows, squishy press effects, oversized rounded elements                         |
+| Aurora / Mesh Gradient      | aurora, northern lights, mesh gradient, luminous, flowing           | Teal → purple → pink smooth blends                       | Animated/static CSS or SVG mesh gradients, subtle color breathing, layered translucency         |
+| Retro-Futurism / Cyberpunk  | vaporwave, 80s sci-fi, crt scanlines, neon glow, glitch, chrome     | Neon cyan/magenta on deep black, chrome accents          | Scanlines, chromatic aberration, glitch transitions, long glowing shadows                       |
+| 3D Hyperrealism             | realistic textures, skeuomorphic, metallic, WebGL, tactile           | Rich metallics, deep gradients                           | Three.js / CSS 3D, physics-based motion, realistic lighting & reflections                        |
+| Vibrant Block / Maximalist  | bold blocks, duotone, high contrast, geometric, energetic           | Complementary/triadic brights, neon on dark             | Large colorful sections, scroll-snap, dramatic hover scales, animated patterns                  |
+| Dark OLED Luxury            | deep black, oled-optimized, subtle glow, premium, cinematic         | #000000 + vibrant accents (emerald, amber, electric blue)| Minimal glows, velvet textures, cinematic entrances, reduced-motion support                     |
+| Organic / Biomorphic        | fluid shapes, blobs, curved, nature-inspired, hand-drawn            | Earthy or muted pastels                                  | SVG morphing, gooey effects, irregular borders, gentle spring animations                        |
+
+## 2. Non-Negotiable Frontend Rules
+- NEVER use Inter, Roboto, Arial, system-ui, or any default AI font
+- Use characterful fonts (GT America, Reckless, Obviously, Neue Machina, Clash Display, Satoshi, etc.)
+- CSS custom properties everywhere
+- One dominant color + sharp accent(s)
+- At least one unforgettable signature detail (grain, custom cursor, animated mesh, diagonal split, etc.)
+- Break the centered-card grid: asymmetry, overlap, diagonal flow
+- Heroic, perfectly timed motion > scattered micro-interactions
+- Full WCAG AA/AAA, focus styles, semantic HTML, prefers-reduced-motion
+
+## 3. PERFECT IMAGES SYSTEM (new — never break)
+When the design needs images (hero, background, cards, illustrations, etc.):
+
+1. Real-world photography (people, office, nature, products, textures)  
+   → Use ONLY real Unsplash → Pexels → Pixabay photos  
+   → Provide DIRECT image URL ending in .jpg/.png with ?w=1920&q=80  
+   → Deliver ready <img> tag + SEO alt text  
+   Example:  
+   <img src="https://images.unsplash.com/photo-1708282114148-9e0e8d0f2f83?w=1920&q=80" alt="Developer focused on code in dark luxury studio">
+
+2. Hero images, custom backgrounds, conceptual scenes, illustrations  
+   → Write a hyper-detailed, copy-paste-ready prompt for Flux / Midjourney v6 / Ideogram  
+   → Wrap exactly like this:
+
+   [IMAGE PROMPT START]  
+   Cinematic photograph of [exact scene that matches the design 100%], dramatic rim lighting, ultra-realistic, perfect composition, 16:9 --ar 16:9 --v 6 --q 2 --stylize 650  
+   [IMAGE PROMPT END]
+
+3. Never invent fake links or low-effort AI slop
+
+## 4. Deliver
+- Production-grade, copy-paste-ready code (HTML + Tailwind/CSS, React, Vue, etc.)
+- Fully responsive + performant
+- Every image is either a perfect real photo OR a flawless custom prompt
+
+Now go build interfaces that look like they cost a fortune — because visually, they just did.

package/templates/skills/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