yetone · yetone · May 13, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/.claude/skills/first-builder-project-scaffold/SKILL.md b/.claude/skills/first-builder-project-scaffold/SKILL.md
@@ -0,0 +1,6 @@
+---
+name: first-builder-project-scaffold
+description: Initialize a new Vite + React + TypeScript + Tailwind project as the first scenario builder. Use when setting up a new frontend project from scratch, creating shared resources (types, utils, hooks, layout), generating stub components for parallel scenario development, or establishing project conventions.
+---
+
+See [README.md](references/README.md) for full documentation.
diff --git a/.claude/skills/first-builder-project-scaffold/references/README.md b/.claude/skills/first-builder-project-scaffold/references/README.md
@@ -0,0 +1,116 @@
+# First Builder Project Scaffold
+
+## Overview
+
+Initialize a Vite + React + TypeScript + Tailwind CSS project as the first scenario builder. Creates the complete project structure with shared resources (types, utilities, hooks, layout) and stub components for all remaining scenarios to enable parallel development.
+
+## When to Use This Skill
+
+Use this skill when users request:
+
+- Setting up a new frontend project from scratch
+- Creating a Vite + React + TypeScript project
+- Initializing project structure with Tailwind CSS
+- Creating shared resources for multi-scenario development
+- Generating stub components for parallel scenario work
+
+## Core Capabilities
+
+### 1. Project Initialization
+
+```bash
+npm create vite@latest <project-name> -- --template react-ts
+cd <project-name>
+npm install
+npm install tailwindcss @tailwindcss/vite vitest @testing-library/react \
+  @testing-library/jest-dom @testing-library/user-event jsdom clsx tailwind-merge
+```
+
+### 2. Vite Configuration
+
+Configure Vite with Tailwind plugin and Vitest:
+
+```ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './tests/setup.ts',
+    css: true,
+  },
+})
+```
+
+### 3. Shared Resources
+
+Create these files as the first builder:
+
+| File | Purpose |
+|------|---------|
+| `src/types/index.ts` | Shared TypeScript interfaces (MirDBFeature, ComparisonRow, etc.) |
+| `src/utils/cn.ts` | Tailwind class merge utility (clsx + tailwind-merge) |
+| `src/utils/constants.ts` | App-wide constants (URLs, repo links) |
+| `src/components/Layout/index.tsx` | Page shell with Header, Footer, skip-to-content link |
+| `src/styles/globals.css` | Tailwind directives and base theme tokens |
+
+### 4. Stub Components
+
+Create placeholder components with proper `id` attributes for anchor navigation:
+
+```tsx
+// Example stub for QuickStart (Scenario 4)
+export default function QuickStart() {
+  return (
+    <section id="quick-start" className="py-16 px-4 max-w-7xl mx-auto">
+      <h2 className="text-3xl font-bold text-center mb-8">Quick Start</h2>
+      {/* Implemented by Scenario 4 */}
+    </section>
+  );
+}
+```
+
+### 5. Folder Structure
+
+```
+src/
+├── components/
+│   ├── Hero/          # Scenario 1
+│   ├── Features/      # Scenario 2
+│   ├── Demo/          # Scenario 3
+│   ├── QuickStart/    # Scenario 4
+│   ├── Docs/          # Scenario 5
+│   ├── Comparison/    # Scenario 6
+│   ├── Roadmap/       # Scenario 7
+│   ├── GitHubLink/    # Scenario 8
+│   ├── ThemeToggle/   # Scenario 9
+│   ├── Layout/        # Shared
+│   └── SEO/           # Scenario 12
+├── hooks/             # Shared hooks
+├── utils/             # Shared utilities
+├── types/             # Shared types
+└── styles/            # Global styles
+tests/
+├── unit/              # Component unit tests
+├── integration/       # Integration tests
+└── setup.ts           # Test setup (jest-dom matchers)
+```
+
+## Best Practices
+
+- Each stub component must have an `id` attribute matching anchor targets
+- Use `export default` for all components (consistent pattern)
+- CSS smooth scroll on `<html>` for no-JS graceful degradation
+- All interactive elements use native HTML (`<a>`, `<button>`) not divs with onClick
+- Assets (logo.gif, usage.gif) go in `public/assets/`
+- Test setup imports `@testing-library/jest-dom/vitest` for DOM matchers
+
+## Resources
+
+### references/
+
+- `README.md` - This documentation
diff --git a/.claude/skills/mirdb-feature-grid/SKILL.md b/.claude/skills/mirdb-feature-grid/SKILL.md
@@ -0,0 +1,6 @@
+---
+name: mirdb-feature-grid
+description: Build responsive feature card grids with Tailwind CSS, Lucide icons, hover effects, and dark mode support
+---
+
+See [README.md](references/README.md) for full documentation.
diff --git a/.claude/skills/mirdb-feature-grid/references/README.md b/.claude/skills/mirdb-feature-grid/references/README.md
@@ -0,0 +1,33 @@
+# Mirdb Feature Grid
+
+## Overview
+
+[TODO: 1-2 sentences explaining what this skill enables]
+
+## When to Use This Skill
+
+Use this skill when users request:
+
+- [TODO: Example request 1]
+- [TODO: Example request 2]
+
+## Core Capabilities
+
+### 1. [TODO: Capability Name]
+
+[TODO: Description and examples]
+
+## Best Practices
+
+- [TODO: Best practice 1]
+- [TODO: Best practice 2]
+
+## Resources
+
+### scripts/
+
+[TODO: Describe helper scripts, or delete this section if none]
+
+### references/
+
+- `README.md` - This documentation
diff --git a/.claude/skills/react-card-nav-links/SKILL.md b/.claude/skills/react-card-nav-links/SKILL.md
@@ -0,0 +1,6 @@
+---
+name: react-card-nav-links
+description: Build card-based navigation link components in React with Tailwind CSS. Use when creating documentation sections, resource links, or navigation cards with hover/focus states and keyboard accessibility.
+---
+
+See [README.md](references/README.md) for full documentation.
diff --git a/.claude/skills/react-card-nav-links/references/README.md b/.claude/skills/react-card-nav-links/references/README.md
@@ -0,0 +1,148 @@
+# React Card Navigation Links
+
+## Overview
+
+This skill covers building card-based navigation link components in React with Tailwind CSS, following the MirDB homepage patterns. Cards use native anchor elements for keyboard accessibility, group-hover for coordinated hover effects, and data from shared constants.
+
+## When to Use This Skill
+
+Use this skill when users request:
+
+- Creating documentation or resource link cards
+- Building card-based navigation sections
+- Adding hover and focus states to card components
+- Making link cards keyboard accessible
+- Testing card components with Vitest and Testing Library
+
+## Core Capabilities
+
+### 1. Card Component Structure
+
+Each card is a native `<a>` element wrapping icon, heading, description, and visual indicator:
+
+```tsx
+<a
+  href={link.url}
+  target="_blank"
+  rel="noopener noreferrer"
+  className="group block rounded-xl border border-gray-200 bg-white p-6
+    transition-all duration-200
+    hover:border-brand-400 hover:shadow-md
+    focus-visible:border-brand-500 focus-visible:shadow-md focus-visible:outline-none
+    dark:border-gray-800 dark:bg-gray-950"
+>
+  <div className="...group-hover:bg-brand-100...">
+    {IconComponent && <IconComponent />}
+  </div>
+  <h3>{link.title}</h3>
+  <p>{link.description}</p>
+  <span className="...group-hover:translate-x-0.5...">Learn more →</span>
+</a>
+```
+
+Key patterns:
+- `group` on the anchor enables `group-hover` on children
+- `focus-visible:` classes mirror hover styling for keyboard users
+- Native `<a>` element provides inherent keyboard accessibility
+
+### 2. Data-Driven Rendering
+
+Documentation links are defined in shared constants, not hardcoded:
+
+```typescript
+// src/types/index.ts
+export interface DocLink {
+  id: string;
+  title: string;
+  description: string;
+  url: string;
+  icon: string; // Lucide icon name
+}
+
+// src/utils/constants.ts
+export const DOC_LINKS: DocLink[] = [
+  {
+    id: 'readme',
+    title: 'Project Overview',
+    description: 'README with project goals, features, and getting started guide.',
+    url: GITHUB_REPO_URL,
+    icon: 'BookOpen',
+  },
+  // ... more links
+];
+```
+
+### 3. Dynamic Icon Resolution
+
+Lucide icons are resolved from string names:
+
+```tsx
+import * as Icons from 'lucide-react';
+
+const IconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[link.icon];
+```
+
+### 4. Responsive Grid Layout
+
+Cards use Tailwind responsive grid:
+
+```tsx
+<div className="mt-10 grid gap-6 md:grid-cols-3">
+  {DOC_LINKS.map((link) => (/* card */))}
+</div>
+```
+
+### 5. Testing Card Components
+
+Test with Vitest + React Testing Library:
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+describe('Docs component', () => {
+  it('renders at least 3 documentation cards', () => {
+    render(<Docs />);
+    const cards = screen.getAllByRole('link');
+    expect(cards.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('each card has hover classes', () => {
+    render(<Docs />);
+    const cards = screen.getAllByRole('link');
+    for (const card of cards) {
+      const hasHover = card.className.includes('hover:border')
+        || card.className.includes('hover:shadow')
+        || card.className.includes('group-hover:');
+      expect(hasHover).toBe(true);
+    }
+  });
+
+  it('cards are keyboard focusable', () => {
+    render(<Docs />);
+    const cards = screen.getAllByRole('link');
+    for (const card of cards) {
+      const hasFocus = card.className.includes('focus-visible:');
+      expect(hasFocus).toBe(true);
+    }
+  });
+});
+```
+
+## Best Practices
+
+- Use native `<a>` elements, not `<div onClick>` — ensures keyboard accessibility
+- Match `focus-visible` styles to hover styles for equivalent visual feedback
+- Use `group`/`group-hover` pattern for coordinated child hover effects
+- Define link data in shared constants, typed via shared interfaces
+- Set `target="_blank"` and `rel="noopener noreferrer"` for external links
+- Add `aria-label` on section elements for screen reader landmarks
+- Use `section` with `aria-label` instead of `aria-labelledby` for simpler setup
+- Test CSS classes directly (className.includes) rather than visual appearance
+- Use `getAllByRole('link')` to count and iterate card elements
+
+## Resources
+
+### references/
+
+- `README.md` - This documentation
diff --git a/.claude/skills/react-component-testing/SKILL.md b/.claude/skills/react-component-testing/SKILL.md
@@ -0,0 +1,6 @@
+---
+name: react-component-testing
+description: Test React components with Vitest + React Testing Library. Use when writing unit or integration tests for React components, testing accessibility attributes, verifying DOM content, or testing user interactions. Covers jsdom environment setup, ARIA role queries, and user-event simulation.
+---
+
+See [README.md](references/README.md) for full documentation.