@codihaus/claude-skills 1.0.0 → 1.2.0

package/skills/dev-coding-frontend/SKILL.md

@@ -1,127 +1,106 @@
 ---
 name: dev-coding-frontend
 description: Frontend implementation patterns and workflows
-version: 1.3.0
+version: 2.0.0
 ---
 
 # /dev-coding-frontend - Frontend Implementation
 
-> **Skill Awareness**: See `skills/_registry.md` for all available skills.
-> - **Loaded by**: `/dev-coding` when UI work needed
-> - **Tools**: shadcn MCP (components), Playwright (visual), Context7 (docs)
-> - **References**: Load tech-specific from `references/` (nextjs.md, vue.md, etc.)
-> - **Before**: Backend API contract should be documented
-> - **After**: `/dev-test` auto-runs to verify UI works
+> **Loaded by**: `/dev-coding` when UI work needed
+> **Tools**: shadcn MCP, Playwright, Context7
+> **Before**: Backend API contract should be documented
 
-Frontend-specific patterns for UI components, pages, and client-side logic.
+Frontend-specific workflow for UI components, pages, and client-side logic.
 
-## When Loaded
+## Knowledge Loading (CRITICAL)
 
-This skill is loaded by `/dev-coding` when:
-- Spec requires UI components
-- Spec requires pages/routes
-- Spec requires client-side logic
+Before implementing, load relevant knowledge:
 
-## Workflow
+```
+1. Read stack.md → plans/scout/stack.md
+   → Identify: Framework, UI library, state management
 
-### Step 1: Understand Frontend Requirements
+2. Load stack knowledge based on detected tech:
+   | If using...  | Read...                           | Section           |
+   |--------------|-----------------------------------|-------------------|
+   | Nuxt.js      | knowledge/stacks/nuxt/_index.md      | "For /dev-coding" |
+   | Next.js      | knowledge/stacks/nextjs/_index.md    | "For /dev-coding" |
+   | Directus     | knowledge/stacks/directus/_index.md  | "SDK Integration" |
 
-From the UC spec, extract:
+3. Load domain knowledge (if applicable):
+   | If domain... | Read...                            | Section           |
+   |--------------|-----------------------------------|-------------------|
+   | SaaS         | knowledge/domains/saas/_index.md      | UI patterns       |
+   | E-commerce   | knowledge/domains/ecommerce/_index.md | Checkout flows    |
 
-```markdown
-## Frontend Requirements Checklist
+4. Use loaded knowledge for:
+   → Correct data fetching (useFetch vs useEffect vs Server Component)
+   → Framework-specific patterns (composables vs hooks)
+   → Domain-specific UI flows
+```
 
-[ ] Pages/Routes needed?
-    - Path
-    - Layout
-    - Auth required?
+## Workflow
+
+### Step 1: Extract Frontend Requirements
 
-[ ] Components needed?
-    - New components
-    - Modify existing
-    - Shared vs feature-specific
+From UC spec, identify:
+
+```
+[ ] Pages/Routes?
+    → Path, layout, auth required?
+
+[ ] Components?
+    → New, modify existing, shared vs feature-specific
 
 [ ] State management?
-    - Local state
-    - Global state
-    - Server state (API data)
+    → Local, global, server state
 
 [ ] Forms?
-    - Fields
-    - Validation rules
-    - Submit handling
+    → Fields, validation, submit handling
 
 [ ] API integration?
-    - Endpoints to call
-    - Request/response handling
-    - Loading/error states
+    → Endpoints, loading/error states
 ```
 
 ### Step 2: Review API Contract
 
-If backend was just implemented (or exists), review:
+From backend implementation:
 
 ```markdown
-## Available API
-
-From backend implementation notes:
-
 ### POST /api/auth/login
 - Request: `{ email, password }`
 - Response: `{ token, user }`
 - Errors: 400 (validation), 401 (credentials)
 ```
 
-Know this BEFORE building UI to match shapes.
+Match component shapes to API.
 
 ### Step 3: Component Architecture
 
-**Decide component structure:**
+**Order:** Base components → Feature components → Pages
 
 ```
-Feature component structure:
 src/
 ├── components/
-│   ├── ui/              # Shared/base components
-│   │   ├── Button.tsx
-│   │   └── Input.tsx
+│   ├── ui/              # Shared (Button, Input)
 │   └── features/
-│       └── auth/        # Feature-specific
-│           ├── LoginForm.tsx
-│           └── SignupForm.tsx
+│       └── auth/        # Feature-specific (LoginForm)
 ├── app/ (or pages/)
-│   └── login/
-│       └── page.tsx     # Page that uses LoginForm
+│   └── login/page.tsx
 ```
 
-**Follow project conventions** (from scout):
-- Where components live
-- Naming pattern
-- Export style
+**Follow project conventions** from scout.
 
 ### Step 4: Build Components
 
-**Order:** Base components → Feature components → Pages
-
-```
-1. Check if base components exist (Button, Input, etc.)
-2. Create feature components
-3. Create/modify pages
-4. Wire up routing
-```
-
-**Component Pattern:**
+Essential component pattern:
 
 ```tsx
-// Follow project conventions
-// This is a common pattern, adapt to project
-
-interface LoginFormProps {
-  onSuccess?: (user: User) => void;
-  redirectTo?: string;
+interface Props {
+  onSuccess?: (data: Data) => void;
 }
 
-export function LoginForm({ onSuccess, redirectTo = '/' }: LoginFormProps) {
+export function FeatureForm({ onSuccess }: Props) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -131,9 +110,8 @@ export function LoginForm({ onSuccess, redirectTo = '/' }: LoginFormProps) {
     setError(null);
 
     try {
-      const result = await login(formData);
-      onSuccess?.(result.user);
-      router.push(redirectTo);
+      const result = await apiCall(formData);
+      onSuccess?.(result);
     } catch (err) {
       setError(err.message);
     } finally {
@@ -146,389 +124,157 @@ export function LoginForm({ onSuccess, redirectTo = '/' }: LoginFormProps) {
       {error && <Alert variant="error">{error}</Alert>}
       {/* Form fields */}
       <Button type="submit" disabled={isLoading}>
-        {isLoading ? 'Loading...' : 'Login'}
+        {isLoading ? 'Loading...' : 'Submit'}
       </Button>
     </form>
   );
 }
 ```
 
-### Step 5: API Integration
-
-**Create API client functions:**
-
-```typescript
-// lib/api/auth.ts
-export async function login(credentials: LoginCredentials) {
-  const response = await fetch('/api/auth/login', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(credentials),
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.message || 'Login failed');
-  }
-
-  return response.json();
-}
-```
-
-**Handle states:**
+### Step 5: Handle States
 
 ```tsx
-// Loading state
+// Loading
 {isLoading && <Spinner />}
 
-// Error state
+// Error
 {error && <Alert variant="error">{error}</Alert>}
 
-// Empty state
-{items.length === 0 && <EmptyState message="No items found" />}
-
-// Success state
-{items.map(item => <ItemCard key={item.id} item={item} />)}
-```
-
-### Step 6: Form Handling
+// Empty
+{items.length === 0 && <EmptyState />}
 
-**Validation Pattern:**
-
-```tsx
-// Client-side validation
-const validateForm = (data: FormData) => {
-  const errors: Record<string, string> = {};
-
-  if (!data.email) {
-    errors.email = 'Email is required';
-  } else if (!isValidEmail(data.email)) {
-    errors.email = 'Invalid email format';
-  }
-
-  if (!data.password) {
-    errors.password = 'Password is required';
-  } else if (data.password.length < 8) {
-    errors.password = 'Password must be at least 8 characters';
-  }
-
-  return errors;
-};
-
-// Show errors
-{errors.email && <span className="error">{errors.email}</span>}
+// Success
+{items.map(item => <Card key={item.id} {...item} />)}
 ```
 
-**Form Libraries** (use if project has them):
-- react-hook-form
-- formik
-- native form handling
+### Step 6: Verify
 
-### Step 7: Quick Verification
-
-Before `/dev-test` auto-runs, do quick sanity checks:
-
-**Visual verification:**
+Quick sanity check before `/dev-test`:
 
 ```typescript
-// Option 1: Playwright snapshot
-await mcp__playwright__browser_navigate({ url: 'http://localhost:3000/login' });
+// Visual snapshot
+await mcp__playwright__browser_navigate({ url: 'http://localhost:3000/page' });
 await mcp__playwright__browser_snapshot({});
-
-// Option 2: Manual check
-// Navigate to page in browser, verify appearance
 ```
 
-**Quick checklist:**
 ```
 [ ] Page renders without console errors
 [ ] Components display correctly
 [ ] Forms accept input
 ```
 
-### Step 8: Hand Off to Testing
-
-After frontend complete, `/dev-coding` auto-triggers `/dev-test` which:
-
-```
-1. Navigate to implemented page
-2. Execute user flow from spec
-3. Capture console errors
-4. Capture network failures
-5. Report issues or confirm pass
-```
-
-**What /dev-test catches:**
-- Console errors (React errors, JS exceptions)
-- Network failures (API 4xx/5xx, CORS, timeouts)
-- Missing elements (render failures)
-- Broken interactions (form submit, navigation)
-
-**Verification checklist (covered by /dev-test):**
-```
-[auto] Page renders without errors
-[auto] Console clean (no errors/warnings)
-[auto] API calls succeed (2xx responses)
-[auto] User flow completes
-[ ] Mobile responsive (manual if required)
-```
-
-## Common Patterns
-
-### Conditional Rendering
-
-```tsx
-// Auth guard
-{isAuthenticated ? <Dashboard /> : <Redirect to="/login" />}
-
-// Loading
-{isLoading ? <Spinner /> : <Content />}
-
-// Permission
-{user.canEdit && <EditButton />}
-```
-
-### Data Fetching
-
-```tsx
-// Server component (Next.js App Router)
-async function PostsPage() {
-  const posts = await getPosts(); // Fetches on server
-  return <PostList posts={posts} />;
-}
-
-// Client component with useEffect
-function PostsPage() {
-  const [posts, setPosts] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    getPosts().then(setPosts).finally(() => setIsLoading(false));
-  }, []);
-
-  if (isLoading) return <Spinner />;
-  return <PostList posts={posts} />;
-}
-
-// With SWR/React Query
-function PostsPage() {
-  const { data: posts, error, isLoading } = useSWR('/api/posts', fetcher);
-
-  if (isLoading) return <Spinner />;
-  if (error) return <Error message={error.message} />;
-  return <PostList posts={posts} />;
-}
-```
-
-### Navigation
-
-```tsx
-// Next.js
-import { useRouter } from 'next/navigation';
-const router = useRouter();
-router.push('/dashboard');
-
-// React Router
-import { useNavigate } from 'react-router-dom';
-const navigate = useNavigate();
-navigate('/dashboard');
-```
-
-### Toast/Notifications
-
-```tsx
-// Success feedback
-toast.success('Saved successfully');
-
-// Error feedback
-toast.error('Failed to save. Please try again.');
-
-// Use project's toast library (sonner, react-hot-toast, etc.)
-```
-
-## Accessibility Checklist
+## Essential Checklists
 
+### Accessibility
 ```
 [ ] Images have alt text
 [ ] Form inputs have labels
 [ ] Buttons have accessible names
-[ ] Color contrast sufficient
 [ ] Keyboard navigation works
 [ ] Focus states visible
-[ ] Screen reader tested (if critical)
 ```
 
-## Responsive Checklist
-
+### Responsive
 ```
-[ ] Mobile layout (< 768px)
-[ ] Tablet layout (768px - 1024px)
-[ ] Desktop layout (> 1024px)
-[ ] Touch targets large enough (44px minimum)
-[ ] No horizontal scroll on mobile
+[ ] Mobile (< 768px)
+[ ] Tablet (768px - 1024px)
+[ ] Desktop (> 1024px)
+[ ] Touch targets 44px minimum
 ```
 
-## Debugging
-
-### Component Not Rendering
+## Quick Debugging
 
 ```bash
-# Check console for errors
-# Browser DevTools → Console
-
-# Check if component imported correctly
-# Check if props passed correctly
-# Check conditional rendering logic
+# Console errors → Browser DevTools
+# Network failures → Network tab, check CORS
+# Styling issues → Elements panel, check classes
 ```
 
-### API Call Failing
-
-```bash
-# Check Network tab in DevTools
-# Verify URL, method, headers
-# Check CORS if cross-origin
-# Verify backend is running
-```
-
-### Styling Issues
-
-```bash
-# Check if styles imported
-# Check class names (typos)
-# Check CSS specificity
-# Check for conflicting styles
-# Use DevTools Elements panel
-```
-
-### Using Playwright for Debug
-
 ```typescript
-// Take screenshot of current state
-await mcp__playwright__browser_take_screenshot({
-  filename: 'debug-screenshot.png'
-});
-
-// Check console messages
-await mcp__playwright__browser_console_messages({
-  level: 'error'
-});
-
-// Check network requests
+// Playwright debugging
+await mcp__playwright__browser_console_messages({ level: 'error' });
 await mcp__playwright__browser_network_requests({});
+await mcp__playwright__browser_take_screenshot({ filename: 'debug.png' });
 ```
 
-## Tech-Specific References
-
-Load additional patterns based on detected tech:
-
-| Tech | Reference File |
-|------|---------------|
-| Next.js | `references/nextjs.md` |
-| Vue | `references/vue.md` |
-| React | `references/react.md` |
-| shadcn/ui | `references/shadcn.md` |
-| Tailwind | `references/tailwind.md` |
-
-These files contain tech-specific patterns, gotchas, and best practices. Add them as your projects use different stacks.
-
-## Tools
+## Stack-Specific Patterns
 
-### shadcn/ui Components (MCP)
+**Do not implement generic patterns. Load from stacks/:**
 
-When project uses shadcn/ui, use these tools to get components:
+| Stack | What to load | Key patterns |
+|-------|--------------|--------------|
+| Nuxt.js | `stacks/nuxt/` | Composables, useFetch, SSR |
+| Next.js | `stacks/nextjs/` | Server Components, Actions |
+| Vue | `stacks/vue/` (future) | Composition API, reactivity |
+| React | `stacks/react/` (future) | Hooks, state patterns |
 
+**Example - if using Nuxt:**
+```
+1. Read knowledge/stacks/nuxt/_index.md
+2. Use useFetch (not raw fetch)
+3. Use composables pattern
+4. Handle SSR hydration
 ```
-1. Check available components
-   → mcp__shadcn__list_components
-
-2. Get component source code
-   → mcp__shadcn__get_component("button")
-   → mcp__shadcn__get_component("dialog")
-
-3. Get usage examples
-   → mcp__shadcn__get_component_demo("button")
-   → mcp__shadcn__get_component_demo("form")
 
-4. Get component metadata
-   → mcp__shadcn__get_component_metadata("card")
+## Domain-Specific UI
 
-5. Get pre-built blocks (dashboard, login, etc.)
-   → mcp__shadcn__list_blocks
-   → mcp__shadcn__get_block("login-01")
-   → mcp__shadcn__get_block("dashboard-01")
-```
+**Load from domains/ when applicable:**
 
-**Workflow with shadcn:**
+| Domain | What to load | Key patterns |
+|--------|--------------|--------------|
+| SaaS | `domains/saas/_index.md` | Pricing tables, subscription UI |
+| E-commerce | `domains/ecommerce/_index.md` | Cart, checkout, product cards |
 
-```
-1. Check if project uses shadcn/ui
-   → Look for components.json
-   → Look for @/components/ui/
-
-2. If yes, use shadcn tools:
-   → List available components
-   → Get source for needed components
-   → Get demos for usage patterns
-   → Get blocks for complex layouts
-
-3. Adapt to project's style
-   → Check existing component customizations
-   → Follow project's variant patterns
-```
+## Tools
 
-**Example:**
+### shadcn/ui Components
 
 ```
-Need: Login form with validation
+# List components
+mcp__shadcn__list_components
 
-1. mcp__shadcn__get_block("login-01")
-   → Get full login block
+# Get component source
+mcp__shadcn__get_component("button")
 
-2. mcp__shadcn__get_component_demo("form")
-   → See form validation patterns
+# Get usage demo
+mcp__shadcn__get_component_demo("form")
 
-3. Adapt to project's API endpoints
-   → Change form action
-   → Match project's auth flow
+# Get pre-built blocks
+mcp__shadcn__list_blocks
+mcp__shadcn__get_block("login-01")
+mcp__shadcn__get_block("dashboard-01")
 ```
 
-### Playwright (Visual Testing)
+**Workflow:**
+1. Check if project uses shadcn (look for `components.json`)
+2. List available components
+3. Get demos for patterns
+4. Adapt to project's API
 
-Use Playwright for visual verification during development:
+### Playwright (Visual Verification)
 
 ```
-# Take screenshot to verify UI
-mcp__playwright__browser_take_screenshot
-
-# Get accessibility snapshot
-mcp__playwright__browser_snapshot
-
-# Check for console errors
+mcp__playwright__browser_navigate({ url })
+mcp__playwright__browser_snapshot({})
+mcp__playwright__browser_take_screenshot({ filename })
 mcp__playwright__browser_console_messages({ level: "error" })
-
-# Verify network requests
-mcp__playwright__browser_network_requests
+mcp__playwright__browser_network_requests({})
 ```
 
-### Context7 (Documentation Lookup)
+### Context7 (Documentation)
 
-Look up framework/library documentation:
+```typescript
+// Find library
+mcp__context7__resolve-library-id({
+  libraryName: "react-hook-form",
+  query: "form validation"
+})
 
-```
-1. Find library ID
-   → mcp__context7__resolve-library-id({
-       libraryName: "react-hook-form",
-       query: "form validation"
-     })
-
-2. Query documentation
-   → mcp__context7__query-docs({
-       libraryId: "/react-hook-form/react-hook-form",
-       query: "how to validate email field"
-     })
+// Query docs
+mcp__context7__query-docs({
+  libraryId: "/react-hook-form/react-hook-form",
+  query: "validate email field"
+})
 ```
 
-**Use Context7 for:**
-- Framework-specific patterns (Next.js, Vue, etc.)
-- Library APIs (React Query, Zustand, etc.)
-- CSS framework docs (Tailwind, etc.)
+Use for: Framework patterns, library APIs, CSS framework docs.

package/skills/dev-review/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: dev-review
 description: Code review with focus on quality, security, and best practices
-version: 1.2.0
+version: 1.3.0
 ---
 
 # /dev-review - Code Review
@@ -84,7 +84,18 @@ Reviews can be based on:
    → CLAUDE.md
    → .eslintrc, tsconfig.json
 
-3. Read related spec (if UC provided)
+3. Read stack.md and stack knowledge
+   → plans/scout/stack.md
+   → Check "Stack Knowledge References" section
+   → Read each referenced knowledge/stacks/*.md file
+   → Use "For /dev-review" sections for review checklists
+
+   Examples:
+   - Directus project → Read knowledge/stacks/directus/_index.md
+   - Nuxt project → Read knowledge/stacks/nuxt/_index.md
+   - Next.js project → Read knowledge/stacks/nextjs/_index.md
+
+4. Read related spec (if UC provided)
    → plans/features/{feature}/specs/{UC}/README.md
 ```