@su-record/vibe 2.6.34 → 2.6.41

package/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,386 @@
+---
+name: ui-ux-pro-max
+description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
+---
+
+# UI/UX Pro Max - Design Intelligence
+
+Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
+
+## When to Apply
+
+Reference these guidelines when:
+- Designing new UI components or pages
+- Choosing color palettes and typography
+- Reviewing code for UX issues
+- Building landing pages or dashboards
+- Implementing accessibility requirements
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Domain |
+|----------|----------|--------|--------|
+| 1 | Accessibility | CRITICAL | `ux` |
+| 2 | Touch & Interaction | CRITICAL | `ux` |
+| 3 | Performance | HIGH | `ux` |
+| 4 | Layout & Responsive | HIGH | `ux` |
+| 5 | Typography & Color | MEDIUM | `typography`, `color` |
+| 6 | Animation | MEDIUM | `ux` |
+| 7 | Style Selection | MEDIUM | `style`, `product` |
+| 8 | Charts & Data | LOW | `chart` |
+
+## Quick Reference
+
+### 1. Accessibility (CRITICAL)
+
+- `color-contrast` - Minimum 4.5:1 ratio for normal text
+- `focus-states` - Visible focus rings on interactive elements
+- `alt-text` - Descriptive alt text for meaningful images
+- `aria-labels` - aria-label for icon-only buttons
+- `keyboard-nav` - Tab order matches visual order
+- `form-labels` - Use label with for attribute
+
+### 2. Touch & Interaction (CRITICAL)
+
+- `touch-target-size` - Minimum 44x44px touch targets
+- `hover-vs-tap` - Use click/tap for primary interactions
+- `loading-buttons` - Disable button during async operations
+- `error-feedback` - Clear error messages near problem
+- `cursor-pointer` - Add cursor-pointer to clickable elements
+
+### 3. Performance (HIGH)
+
+- `image-optimization` - Use WebP, srcset, lazy loading
+- `reduced-motion` - Check prefers-reduced-motion
+- `content-jumping` - Reserve space for async content
+
+### 4. Layout & Responsive (HIGH)
+
+- `viewport-meta` - width=device-width initial-scale=1
+- `readable-font-size` - Minimum 16px body text on mobile
+- `horizontal-scroll` - Ensure content fits viewport width
+- `z-index-management` - Define z-index scale (10, 20, 30, 50)
+
+### 5. Typography & Color (MEDIUM)
+
+- `line-height` - Use 1.5-1.75 for body text
+- `line-length` - Limit to 65-75 characters per line
+- `font-pairing` - Match heading/body font personalities
+
+### 6. Animation (MEDIUM)
+
+- `duration-timing` - Use 150-300ms for micro-interactions
+- `transform-performance` - Use transform/opacity, not width/height
+- `loading-states` - Skeleton screens or spinners
+
+### 7. Style Selection (MEDIUM)
+
+- `style-match` - Match style to product type
+- `consistency` - Use same style across all pages
+- `no-emoji-icons` - Use SVG icons, not emojis
+
+### 8. Charts & Data (LOW)
+
+- `chart-type` - Match chart type to data type
+- `color-guidance` - Use accessible color palettes
+- `data-table` - Provide table alternative for accessibility
+
+## How to Use
+
+Search specific domains using the CLI tool below.
+
+---
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, install it based on user's OS:
+
+**macOS:**
+```bash
+brew install python3
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo apt update && sudo apt install python3
+```
+
+**Windows:**
+```powershell
+winget install Python.Python.3.12
+```
+
+---
+
+## How to Use This Skill
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
+- **Industry**: healthcare, fintech, gaming, education, etc.
+- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+
+### Step 2: Generate Design System (REQUIRED)
+
+**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+This command:
+1. Searches 5 domains in parallel (product, style, color, landing, typography)
+2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
+3. Returns complete design system: pattern, style, colors, typography, effects
+4. Includes anti-patterns to avoid
+
+**Example:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+```
+
+### Step 2b: Persist Design System (Master + Overrides Pattern)
+
+To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+```
+
+This creates:
+- `design-system/MASTER.md` — Global Source of Truth with all design rules
+- `design-system/pages/` — Folder for page-specific overrides
+
+**With page-specific override:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+```
+
+This also creates:
+- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+
+**How hierarchical retrieval works:**
+1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+2. If the page file exists, its rules **override** the Master file
+3. If not, use `design-system/MASTER.md` exclusively
+
+**Context-aware retrieval prompt:**
+```
+I am building the [Page Name] page. Please read design-system/MASTER.md.
+Also check if design-system/pages/[page-name].md exists.
+If the page file exists, prioritize its rules.
+If not, use the Master rules exclusively.
+Now, generate the code...
+```
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+After getting the design system, use domain searches to get additional details:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**When to use detailed searches:**
+
+| Need | Domain | Example |
+|------|--------|---------|
+| More style options | `style` | `--domain style "glassmorphism dark"` |
+| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
+| UX best practices | `ux` | `--domain ux "animation accessibility"` |
+| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
+| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+
+### Step 4: Stack Guidelines (Default: html-tailwind)
+
+Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
+
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
+| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
+| `prompt` | AI prompts, CSS keywords | (style name) |
+
+### Available Stacks
+
+| Stack | Focus |
+|-------|-------|
+| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `react` | State, hooks, performance, patterns |
+| `nextjs` | SSR, routing, images, API routes |
+| `vue` | Composition API, Pinia, Vue Router |
+| `svelte` | Runes, stores, SvelteKit |
+| `swiftui` | Views, State, Navigation, Animation |
+| `react-native` | Components, Navigation, Lists |
+| `flutter` | Widgets, State, Layout, Theming |
+| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
+
+---
+
+## Example Workflow
+
+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
+
+### Step 1: Analyze Requirements
+- Product type: Beauty/Spa service
+- Style keywords: elegant, professional, soft
+- Industry: Beauty/Wellness
+- Stack: html-tailwind (default)
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
+```
+
+**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+```bash
+# Get UX guidelines for animation and accessibility
+python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
+
+# Get alternative typography options if needed
+python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
+```
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
+```
+
+**Then:** Synthesize design system + detailed searches and implement the design.
+
+---
+
+## Output Formats
+
+The `--design-system` flag supports two output formats:
+
+```bash
+# ASCII box (default) - best for terminal display
+python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+
+# Markdown - best for documentation
+python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+```
+
+---
+
+## Tips for Better Results
+
+1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
+2. **Search multiple times** - Different keywords reveal different insights
+3. **Combine domains** - Style + Typography + Color = Complete design system
+4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+5. **Use stack flag** - Get implementation-specific best practices
+6. **Iterate** - If first search doesn't match, try different keywords
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+
+### Icons & Visual Elements
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
+| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
+| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+
+### Interaction & Cursor
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
+| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
+| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift
+- [ ] Use theme colors directly (bg-primary) not var() wrapper
+
+### Interaction
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode
+- [ ] Borders visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 375px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+
+### Accessibility
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected

package/skills/vercel-react-best-practices/SKILL.md

@@ -0,0 +1,304 @@
+---
+name: vercel-react-best-practices
+description: "React/Next.js performance optimization guide (based on Vercel engineering). Auto-activates when writing, reviewing, or refactoring React components. 45 rules across 8 priority categories."
+triggers: [react, next.js, performance, optimization, vercel, component, rendering]
+priority: 60
+---
+
+# Vercel React Best Practices
+
+Comprehensive React/Next.js performance optimization guide from the Vercel engineering team. 45 rules organized into 8 categories with an impact-based priority system.
+
+## When to Apply
+
+- When writing React components or Next.js pages
+- When implementing data fetching (client/server)
+- During performance-focused code reviews
+- When refactoring existing React/Next.js code
+- When optimizing bundle size or load times
+
+## Priority System by Category
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Waterfall Elimination | CRITICAL | `async-` |
+| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
+| 3 | Server-side Performance | HIGH | `server-` |
+| 4 | Client Data Fetching | MEDIUM-HIGH | `client-` |
+| 5 | Re-render Optimization | MEDIUM | `rerender-` |
+| 6 | Rendering Performance | MEDIUM | `rendering-` |
+| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
+| 8 | Advanced Patterns | LOW | `advanced-` |
+
+## Quick Reference — 45 Rule Index
+
+### 1. Waterfall Elimination (CRITICAL)
+
+| Rule | Description |
+|------|-------------|
+| `async-defer-await` | Move await to the branch where the value is actually used |
+| `async-parallel` | Use `Promise.all()` for independent operations |
+| `async-dependencies` | Use better-all for partial dependencies |
+| `async-api-routes` | Start Promises early, await late |
+| `async-suspense-boundaries` | Stream content with Suspense |
+
+**Key Example — `async-parallel` (CRITICAL):**
+
+```typescript
+// ❌ Bad: sequential execution → waterfall
+const user = await getUser(id);
+const posts = await getPosts(id);
+const comments = await getComments(id);
+
+// ✅ Good: parallel execution
+const [user, posts, comments] = await Promise.all([
+  getUser(id),
+  getPosts(id),
+  getComments(id),
+]);
+```
+
+### 2. Bundle Size Optimization (CRITICAL)
+
+| Rule | Description |
+|------|-------------|
+| `bundle-barrel-imports` | Avoid barrel files, use direct imports |
+| `bundle-dynamic-imports` | Use `next/dynamic` for heavy components |
+| `bundle-defer-third-party` | Load analytics/logging after hydration |
+| `bundle-conditional` | Load modules only when feature is enabled |
+| `bundle-preload` | Preload on hover/focus for perceived speed |
+
+**Key Example — `bundle-barrel-imports` (CRITICAL):**
+
+```typescript
+// ❌ Bad: barrel import → included in entire bundle
+import { Button } from "@/components";
+
+// ✅ Good: direct import → tree-shakeable
+import { Button } from "@/components/Button";
+```
+
+### 3. Server-side Performance (HIGH)
+
+| Rule | Description |
+|------|-------------|
+| `server-cache-react` | Deduplicate per-request with `React.cache()` |
+| `server-cache-lru` | Cross-request caching with LRU cache |
+| `server-serialization` | Minimize data passed to client components |
+| `server-parallel-fetching` | Redesign component structure for parallel fetching |
+| `server-after-nonblocking` | Non-blocking post-processing with `after()` |
+
+**Key Example — `server-cache-react` (HIGH):**
+
+```typescript
+// ❌ Bad: duplicate DB calls within same request
+async function Layout() {
+  const user = await getUser(); // call 1
+  return <Header user={user}><Content /></Header>;
+}
+async function Content() {
+  const user = await getUser(); // call 2 (duplicate)
+  return <div>{user.name}</div>;
+}
+
+// ✅ Good: per-request deduplication with React.cache
+import { cache } from "react";
+const getUser = cache(async () => {
+  return await db.user.findUnique({ where: { id: currentUserId } });
+});
+```
+
+### 4. Client Data Fetching (MEDIUM-HIGH)
+
+| Rule | Description |
+|------|-------------|
+| `client-swr-dedup` | Auto-deduplicate requests with SWR |
+| `client-event-listeners` | Prevent duplicate global event listener registration |
+
+**Key Example — `client-swr-dedup` (MEDIUM-HIGH):**
+
+```typescript
+// ❌ Bad: duplicate API calls from multiple components
+function Header() {
+  const [user, setUser] = useState(null);
+  useEffect(() => { fetch("/api/user").then(r => r.json()).then(setUser); }, []);
+  return <div>{user?.name}</div>;
+}
+function Sidebar() {
+  const [user, setUser] = useState(null);
+  useEffect(() => { fetch("/api/user").then(r => r.json()).then(setUser); }, []);
+  return <div>{user?.email}</div>;
+}
+
+// ✅ Good: auto-deduplication + caching with SWR
+import useSWR from "swr";
+function useUser() {
+  return useSWR("/api/user", fetcher);
+}
+function Header() {
+  const { data: user } = useUser(); // same key → auto-deduplicated
+  return <div>{user?.name}</div>;
+}
+function Sidebar() {
+  const { data: user } = useUser(); // only 1 network request
+  return <div>{user?.email}</div>;
+}
+```
+
+### 5. Re-render Optimization (MEDIUM)
+
+| Rule | Description |
+|------|-------------|
+| `rerender-defer-reads` | Avoid subscribing to state used only in callbacks |
+| `rerender-memo` | Isolate expensive computations in memoized components |
+| `rerender-dependencies` | Use primitive values for effect dependencies |
+| `rerender-derived-state` | Subscribe to derived booleans instead of raw data |
+| `rerender-functional-setstate` | Use functional setState for stable callbacks |
+| `rerender-lazy-state-init` | Pass functions for expensive initial values |
+| `rerender-transitions` | Use startTransition for non-urgent updates |
+
+**Key Example — `rerender-memo` (MEDIUM):**
+
+```typescript
+// ❌ Bad: expensive computation re-runs on every parent re-render
+function Dashboard({ data, filter }) {
+  const processed = expensiveProcess(data); // runs every time
+  return <Chart data={processed} />;
+}
+
+// ✅ Good: isolate expensive computation in memoized component
+const ProcessedChart = memo(function ProcessedChart({ data }: { data: Data[] }) {
+  const processed = expensiveProcess(data);
+  return <Chart data={processed} />;
+});
+```
+
+### 6. Rendering Performance (MEDIUM)
+
+| Rule | Description |
+|------|-------------|
+| `rendering-animate-svg-wrapper` | Animate div wrapper instead of SVG elements |
+| `rendering-content-visibility` | Apply content-visibility to long lists |
+| `rendering-hoist-jsx` | Hoist static JSX outside components |
+| `rendering-svg-precision` | Reduce SVG coordinate precision |
+| `rendering-hydration-no-flicker` | Prevent client-only data flicker with inline scripts |
+| `rendering-activity` | Use Activity component for show/hide |
+| `rendering-conditional-render` | Use ternary instead of `&&` |
+
+**Key Example — `rendering-content-visibility` (MEDIUM):**
+
+```css
+/* ❌ Bad: render all items in a long list immediately */
+.list-item {
+  /* default: render all items */
+}
+
+/* ✅ Good: defer rendering for off-viewport items */
+.list-item {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
+}
+```
+
+**Key Example — `rendering-hoist-jsx` (MEDIUM):**
+
+```typescript
+// ❌ Bad: static JSX recreated on every re-render
+function Page({ data }) {
+  return (
+    <div>
+      <header><h1>My App</h1><nav>...</nav></header>
+      <main>{data.map(item => <Card key={item.id} {...item} />)}</main>
+    </div>
+  );
+}
+
+// ✅ Good: hoist static JSX outside component
+const HEADER = <header><h1>My App</h1><nav>...</nav></header>;
+
+function Page({ data }) {
+  return (
+    <div>
+      {HEADER}
+      <main>{data.map(item => <Card key={item.id} {...item} />)}</main>
+    </div>
+  );
+}
+```
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+
+| Rule | Description |
+|------|-------------|
+| `js-batch-dom-css` | Batch CSS changes via class or cssText |
+| `js-index-maps` | Index repeated lookups with Map |
+| `js-cache-property-access` | Cache object property access in loops |
+| `js-cache-function-results` | Cache function results in module-level Map |
+| `js-cache-storage` | Cache localStorage/sessionStorage reads |
+| `js-combine-iterations` | Combine multiple filter/map into single loop |
+| `js-length-check-first` | Check array length before expensive comparisons |
+| `js-early-exit` | Early return from functions |
+| `js-hoist-regexp` | Hoist RegExp creation out of loops |
+| `js-min-max-loop` | Calculate min/max with loop instead of sort |
+| `js-set-map-lookups` | Use Set/Map for O(1) lookups |
+| `js-tosorted-immutable` | Use toSorted() for immutable sorting |
+
+### 8. Advanced Patterns (LOW)
+
+| Rule | Description |
+|------|-------------|
+| `advanced-event-handler-refs` | Store event handlers in refs |
+| `advanced-use-latest` | Use useLatest for stable callback refs |
+
+**Key Example — `advanced-event-handler-refs` (LOW):**
+
+```typescript
+// ❌ Bad: event handler changes every render → effect re-runs
+function useInterval(callback: () => void, delay: number) {
+  useEffect(() => {
+    const id = setInterval(callback, delay);
+    return () => clearInterval(id);
+  }, [callback, delay]); // callback changes every time
+}
+
+// ✅ Good: ref holds latest handler → stable effect
+function useInterval(callback: () => void, delay: number) {
+  const savedCallback = useRef(callback);
+  useEffect(() => { savedCallback.current = callback; });
+  useEffect(() => {
+    const id = setInterval(() => savedCallback.current(), delay);
+    return () => clearInterval(id);
+  }, [delay]); // only depends on delay
+}
+```
+
+## Rule Count Summary by Category
+
+| Category | Rules | Impact |
+|----------|-------|--------|
+| Waterfall Elimination | 5 | CRITICAL |
+| Bundle Size Optimization | 5 | CRITICAL |
+| Server-side Performance | 5 | HIGH |
+| Client Data Fetching | 2 | MEDIUM-HIGH |
+| Re-render Optimization | 7 | MEDIUM |
+| Rendering Performance | 7 | MEDIUM |
+| JavaScript Performance | 12 | LOW-MEDIUM |
+| Advanced Patterns | 2 | LOW |
+| **Total** | **45** | |
+
+## Usage
+
+This skill provides a Quick Reference index and key examples per category. For detailed explanations and full code examples of each rule, refer to the CCPP AGENTS.md.
+
+### Priority-Based Application Strategy
+
+1. **CRITICAL (Priority 1-2)**: Must apply in all projects
+2. **HIGH (Priority 3)**: Apply when using server components
+3. **MEDIUM (Priority 4-6)**: Review first when performance issues arise
+4. **LOW (Priority 7-8)**: Selectively apply during optimization phase
+
+### VIBE Tool Integration
+
+- `core_analyze_complexity` — Analyze component complexity
+- `core_validate_code_quality` — Validate code quality
+- `/vibe.review` — 13+ agent parallel review (includes performance-reviewer)