@folpe/loom 0.1.0 → 0.2.0

package/data/agents/orchestrator/AGENT.md

@@ -12,6 +12,8 @@ delegates-to:
   - database
   - tests
   - review-qa
+  - security
+  - performance
 model: claude-opus-4-6
 ---
 
@@ -35,7 +37,9 @@ You are the central coordinator for the Loom project. Your job is to understand
 - **ux-ui**: UI component design, design tokens, color palettes, spacing systems, accessibility audits, and responsive design patterns.
 - **database**: Schema design, migrations, seed data, query optimization, and ORM configuration.
 - **tests**: Unit tests, integration tests, end-to-end tests, and test infrastructure setup.
-- **review-qa**: Code review, security analysis, performance audits, and best-practice enforcement.
+- **review-qa**: Code review, best-practice enforcement, and comprehensive quality audits.
+- **security**: Security audits, vulnerability assessments, OWASP compliance, auth hardening, dependency scanning, and RLS policy review.
+- **performance**: Performance optimization, Core Web Vitals audits, bundle analysis, Lighthouse runs, query optimization, and rendering profiling.
 
 ## Workflow Guidelines
 

package/data/presets/api-backend.yaml

@@ -0,0 +1,40 @@
+name: API Backend
+description: API / service backend avec focus sécurité, validation, tests et performance.
+agents:
+  - orchestrator
+  - backend
+  - database
+  - security
+  - tests
+  - review-qa
+  - performance
+skills:
+  - nextjs-conventions
+  - supabase-patterns
+  - api-design
+constitution:
+  principles:
+    - Security first — validate all inputs, sanitize all outputs
+    - Type-safe contracts — use Zod schemas as single source of truth
+    - Test everything — unit tests for logic, integration tests for endpoints
+    - Fail gracefully — meaningful error messages, proper HTTP status codes
+  stack:
+    - Next.js 16+ (API Routes)
+    - TypeScript 5 (strict)
+    - Supabase (database + auth)
+    - Zod (validation)
+    - Vercel (deployment)
+  conventions:
+    - Define Zod schemas for all request/response payloads
+    - Use middleware for auth, rate limiting, and CORS
+    - Implement proper error handling with consistent error response format
+    - Write integration tests for every endpoint
+    - Use database transactions for multi-step mutations
+claudemd:
+  projectDescription: >
+    This is a backend API service scaffolded with Loom. It uses Next.js API Routes with Supabase
+    as the database layer. The orchestrator delegates security concerns to the security agent,
+    database schema work to the database agent, and testing to the tests agent.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/chrome-extension.yaml

@@ -0,0 +1,39 @@
+name: Chrome Extension
+description: Extension Chrome (Manifest V3) avec popup React, content scripts et background workers.
+agents:
+  - orchestrator
+  - frontend
+  - backend
+  - tests
+  - security
+  - review-qa
+skills:
+  - tailwind-patterns
+  - chrome-extension-patterns
+  - ui-ux-guidelines
+constitution:
+  principles:
+    - Minimal permissions — request only what the extension truly needs
+    - User privacy first — never collect data without explicit consent
+    - Fast popup — keep popup UI snappy, defer heavy work to background
+    - Cross-site safe — sanitize all DOM manipulation in content scripts
+  stack:
+    - TypeScript 5 (strict)
+    - Chrome APIs (Manifest V3)
+    - React 19 (popup / options page)
+    - Tailwind CSS 4
+    - tsup (bundling)
+  conventions:
+    - Use Manifest V3 service workers instead of background pages
+    - Separate concerns — popup, content scripts, and background have clear boundaries
+    - Use chrome.storage API for persistence, never localStorage in content scripts
+    - Validate all messages between content script and background worker
+    - Keep content script injection minimal to avoid page performance impact
+claudemd:
+  projectDescription: >
+    This is a Chrome extension scaffolded with Loom using Manifest V3. The orchestrator delegates
+    popup/options UI work to the frontend agent, background worker logic to the backend agent,
+    and security reviews of permissions and content scripts to the security agent.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/cli-tool.yaml

@@ -0,0 +1,34 @@
+name: CLI Tool
+description: Outil CLI Node.js avec parsing d'arguments, UX terminal soignée et distribution npm.
+agents:
+  - orchestrator
+  - backend
+  - tests
+  - review-qa
+skills:
+  - cli-development
+constitution:
+  principles:
+    - Unix philosophy — do one thing well, compose with other tools
+    - Fail loudly — clear error messages with actionable suggestions
+    - Zero-config defaults — sensible defaults, override with flags
+    - Scriptable — support stdin/stdout piping and non-interactive mode
+  stack:
+    - TypeScript 5 (strict)
+    - Node.js 20+
+    - Commander.js (CLI framework)
+    - tsup (bundling)
+  conventions:
+    - Use Commander.js for argument parsing and subcommands
+    - Exit with proper codes — 0 for success, 1 for errors, 2 for usage errors
+    - Support --json flag for machine-readable output
+    - Use stderr for progress/logging, stdout for actual output
+    - Include a --version and --help flag on every command
+claudemd:
+  projectDescription: >
+    This is a CLI tool scaffolded with Loom. It uses Commander.js for argument parsing and tsup
+    for bundling. The orchestrator delegates implementation to the backend agent and testing to
+    the tests agent.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/e-commerce.yaml

@@ -0,0 +1,52 @@
+name: E-Commerce
+description: Boutique en ligne avec catalogue, panier, checkout Stripe et emails transactionnels.
+agents:
+  - orchestrator
+  - frontend
+  - backend
+  - database
+  - security
+  - tests
+  - review-qa
+  - ux-ui
+  - performance
+  - marketing
+skills:
+  - nextjs-conventions
+  - tailwind-patterns
+  - hero-copywriting
+  - supabase-patterns
+  - stripe-integration
+  - shadcn-ui
+  - seo-optimization
+  - api-design
+  - ui-ux-guidelines
+constitution:
+  principles:
+    - Trust through UX — clear pricing, no surprise fees, transparent shipping
+    - Payment security — never handle raw card data, always use Stripe Elements
+    - SEO drives traffic — product pages must be indexable with structured data
+    - Performance converts — every 100ms of load time impacts conversion rate
+  stack:
+    - Next.js 16+ (App Router)
+    - React 19
+    - TypeScript 5 (strict)
+    - Tailwind CSS 4
+    - ShadCN UI
+    - Supabase (auth + database)
+    - Stripe (payments)
+    - Vercel (deployment)
+  conventions:
+    - Use Stripe Checkout or Payment Elements — never collect card details directly
+    - Implement webhook handlers for Stripe events (payment success, refund, etc.)
+    - Use ISR or SSG for product catalog pages for performance
+    - Add JSON-LD structured data for products (price, availability, reviews)
+    - Implement optimistic cart updates with server validation
+claudemd:
+  projectDescription: >
+    This is an e-commerce application scaffolded with Loom. It includes product catalog, shopping
+    cart, Stripe checkout, and transactional emails. The orchestrator coordinates the full agent
+    team including marketing for copywriting and SEO.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/expo-mobile.yaml

@@ -0,0 +1,44 @@
+name: Expo Mobile
+description: App mobile React Native avec Expo, navigation, notifications push et offline-first.
+agents:
+  - orchestrator
+  - frontend
+  - backend
+  - database
+  - tests
+  - review-qa
+  - ux-ui
+  - performance
+skills:
+  - tailwind-patterns
+  - react-native-patterns
+  - supabase-patterns
+  - ui-ux-guidelines
+constitution:
+  principles:
+    - Native feel — respect platform conventions (iOS HIG, Material Design)
+    - Offline-first — the app must be usable without network connectivity
+    - Battery conscious — minimize background tasks and network requests
+    - Smooth animations — target 60fps, never block the JS thread
+  stack:
+    - Expo SDK 52+
+    - React Native
+    - TypeScript 5 (strict)
+    - NativeWind (Tailwind for React Native)
+    - Expo Router (file-based navigation)
+    - Supabase (auth + database)
+  conventions:
+    - Use Expo Router for all navigation — file-based routing
+    - Implement offline storage with async-storage or MMKV for critical data
+    - Use expo-notifications for push notifications setup
+    - Handle deep linking and universal links from the start
+    - Test on both iOS and Android — never assume platform parity
+claudemd:
+  projectDescription: >
+    This is a mobile application scaffolded with Loom using Expo and React Native. It uses
+    NativeWind for styling and Expo Router for navigation. The orchestrator delegates mobile UI
+    to the frontend agent, API integration to the backend agent, and native feature testing
+    to the tests agent.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/fullstack-auth.yaml

@@ -0,0 +1,48 @@
+name: Fullstack Auth
+description: SaaS avec authentification complète (email, OAuth, magic link), RBAC et dashboard admin.
+agents:
+  - orchestrator
+  - frontend
+  - backend
+  - database
+  - security
+  - tests
+  - review-qa
+  - ux-ui
+  - performance
+skills:
+  - nextjs-conventions
+  - tailwind-patterns
+  - supabase-patterns
+  - shadcn-ui
+  - api-design
+  - ui-ux-guidelines
+constitution:
+  principles:
+    - Auth is infrastructure — get it right once, never cut corners on security
+    - Least privilege — users and services get only the permissions they need
+    - Defense in depth — middleware, RLS, and API validation work together
+    - Session management — handle expiry, refresh, and revocation properly
+  stack:
+    - Next.js 16+ (App Router)
+    - React 19
+    - TypeScript 5 (strict)
+    - Tailwind CSS 4
+    - ShadCN UI
+    - Supabase Auth (email, OAuth, magic link)
+    - Supabase (database with RLS)
+    - Vercel (deployment)
+  conventions:
+    - Use Supabase Auth for all authentication flows
+    - Implement middleware for route protection and role checks
+    - Enable Row Level Security on all tables — no exceptions
+    - Use server-side session validation, never trust client-only auth state
+    - Separate admin and user dashboards with distinct layouts
+claudemd:
+  projectDescription: >
+    This is a fullstack SaaS with complete authentication scaffolded with Loom. It includes email,
+    OAuth, and magic link flows via Supabase Auth, plus RBAC and admin dashboard. The orchestrator
+    coordinates security, frontend, backend, and database agents for auth-related tasks.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/landing-page.yaml

@@ -0,0 +1,41 @@
+name: Landing Page
+description: Site vitrine / marketing avec focus SEO, conversion, animations et responsive design.
+agents:
+  - orchestrator
+  - frontend
+  - ux-ui
+  - marketing
+  - performance
+  - review-qa
+skills:
+  - nextjs-conventions
+  - tailwind-patterns
+  - hero-copywriting
+  - seo-optimization
+  - ui-ux-guidelines
+constitution:
+  principles:
+    - Conversion-first — every section must guide visitors toward a clear CTA
+    - Performance is UX — aim for perfect Lighthouse scores
+    - Mobile-first responsive — design for small screens, enhance for large
+    - Accessible by default — semantic HTML, ARIA, keyboard navigation
+  stack:
+    - Next.js 16+ (static export)
+    - React 19
+    - TypeScript 5 (strict)
+    - Tailwind CSS 4
+    - Vercel (deployment)
+  conventions:
+    - Use Server Components and static generation for maximum performance
+    - Optimize all images with next/image and proper srcset
+    - Implement structured data (JSON-LD) for SEO
+    - Use CSS animations and transitions over JS-based animation libraries
+    - Ensure all interactive elements have visible focus states
+claudemd:
+  projectDescription: >
+    This is a landing page / marketing site scaffolded with Loom. It focuses on SEO, conversion
+    optimization, and fast loading. The orchestrator delegates visual tasks to the frontend and
+    ux-ui agents, copywriting to marketing, and performance audits to the performance agent.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/mvp-lean.yaml

@@ -0,0 +1,38 @@
+name: MVP Lean
+description: Prototype rapide avec stack minimale. Vitesse et itération avant la perfection.
+agents:
+  - orchestrator
+  - frontend
+  - backend
+  - database
+skills:
+  - nextjs-conventions
+  - tailwind-patterns
+  - supabase-patterns
+constitution:
+  principles:
+    - Ship it — working software over perfect architecture
+    - Iterate fast — build the simplest thing that works, then improve
+    - Technical debt is acceptable — speed wins at the prototype stage
+    - Validate assumptions — build to learn, not to last
+  stack:
+    - Next.js 16+ (App Router)
+    - React 19
+    - TypeScript 5 (strict)
+    - Tailwind CSS 4
+    - Supabase (auth + database)
+    - Vercel (deployment)
+  conventions:
+    - Prefer inline styles and co-located logic over abstractions
+    - Use Supabase client directly — skip custom API layers when possible
+    - Minimal component hierarchy — flatten where you can
+    - Skip extensive error handling — focus on happy path first
+    - One file per feature when practical
+claudemd:
+  projectDescription: >
+    This is a lean MVP scaffolded with Loom. Speed and iteration are prioritized over architecture.
+    The orchestrator coordinates a small team of frontend, backend, and database agents to ship
+    features as fast as possible.
+  orchestratorRef: >
+    The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start
+    by delegating to the orchestrator, which will route tasks to the appropriate specialized agent.

package/data/presets/saas-default.yaml

@@ -1,10 +1,6 @@
 name: SaaS Default
 description: Standard SaaS project preset with full agent team, Next.js conventions, and Tailwind patterns. Includes
   orchestrator-driven multi-agent workflow.
-boilerplate:
-  repo: https://github.com/vercel/next.js.git
-  branch: canary
-  shallow: true
 agents:
   - orchestrator
   - frontend
@@ -20,6 +16,10 @@ skills:
   - nextjs-conventions
   - tailwind-patterns
   - hero-copywriting
+  - supabase-patterns
+  - shadcn-ui
+  - api-design
+  - ui-ux-guidelines
 constitution:
   principles:
     - Ship fast, iterate often — prefer working software over perfect plans
@@ -48,6 +48,3 @@ claudemd:
   orchestratorRef: >
     The orchestrator agent (.claude/agents/orchestrator.md) is the main entry point. Always start by delegating to the
     orchestrator, which will route tasks to the appropriate specialized agent.
-specKit:
-  enabled: true
-  aiFlag: claude

package/data/skills/api-design/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: api-design
+description: "REST API design principles, error handling, validation, and security patterns. Use when building API routes, server actions, or backend services."
+allowed-tools: "Read, Write, Edit, Glob, Grep"
+---
+
+# API Design Principles
+
+## Route Structure
+
+- Use resource-based URLs: `/api/users`, `/api/posts/:id/comments`.
+- Use HTTP methods semantically:
+  - `GET` — read (no side effects)
+  - `POST` — create
+  - `PUT/PATCH` — update (PUT replaces, PATCH partial update)
+  - `DELETE` — remove
+- Nest sub-resources only one level deep: `/api/posts/:id/comments` — not deeper.
+- Use plural nouns for collections: `/api/users` (not `/api/user`).
+
+## Request Validation
+
+- Validate **all** incoming data with Zod schemas at the API boundary:
+  ```ts
+  const CreatePostSchema = z.object({
+    title: z.string().min(1).max(200),
+    content: z.string().min(1),
+    published: z.boolean().default(false),
+  })
+
+  const body = CreatePostSchema.parse(await request.json())
+  ```
+- Return 400 with structured validation errors:
+  ```json
+  { "error": "Validation failed", "details": [{ "field": "title", "message": "Required" }] }
+  ```
+- Validate path params, query params, and headers — not just body.
+
+## Response Format
+
+- Use consistent response shapes across all endpoints:
+  ```ts
+  // Success
+  { "data": { ... } }
+  { "data": [...], "pagination": { "total": 100, "page": 1, "pageSize": 20 } }
+
+  // Error
+  { "error": "Not found", "code": "RESOURCE_NOT_FOUND" }
+  ```
+- Always return appropriate HTTP status codes:
+  - `200` — success
+  - `201` — created
+  - `204` — no content (successful delete)
+  - `400` — bad request (validation error)
+  - `401` — unauthorized (no/invalid auth)
+  - `403` — forbidden (insufficient permissions)
+  - `404` — not found
+  - `409` — conflict (duplicate resource)
+  - `429` — too many requests (rate limit)
+  - `500` — internal server error
+
+## Error Handling
+
+- Catch errors at the route handler level with a consistent pattern:
+  ```ts
+  try {
+    // ... handler logic
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Validation failed', details: error.errors }, { status: 400 })
+    }
+    console.error('Unhandled error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+  ```
+- Never expose stack traces or internal details in production error responses.
+- Log errors server-side with request context (method, path, user ID).
+
+## Authentication & Authorization
+
+- Validate auth on every protected endpoint — middleware + route-level checks.
+- Extract user from session/token, never from request body.
+- Check permissions at the resource level: "Can this user access THIS specific post?"
+- Return `401` for missing/invalid auth, `403` for insufficient permissions.
+
+## Rate Limiting
+
+- Implement rate limiting on public endpoints and auth endpoints.
+- Use token bucket or sliding window algorithm.
+- Return `429` with `Retry-After` header when rate limited.
+- Rate limit by IP for public endpoints, by user ID for authenticated endpoints.
+
+## Pagination
+
+- Use cursor-based pagination for large datasets:
+  ```
+  GET /api/posts?cursor=abc123&limit=20
+  ```
+- Return pagination metadata: `{ "data": [...], "nextCursor": "def456", "hasMore": true }`
+- Default limit to 20, max to 100.
+- For simple cases, offset-based is acceptable: `?page=1&pageSize=20`.
+
+## Security
+
+- Validate Content-Type header on POST/PUT/PATCH requests.
+- Set CORS headers explicitly — never use `*` in production.
+- Sanitize user input before database queries.
+- Use parameterized queries — never string concatenation for SQL.
+- Set security headers: `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security`.

package/data/skills/chrome-extension-patterns/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: chrome-extension-patterns
+description: "Chrome extension development patterns for Manifest V3, content scripts, popup UI, and service workers. Use when building browser extensions."
+allowed-tools: "Read, Write, Edit, Glob, Grep"
+---
+
+# Chrome Extension Patterns (Manifest V3)
+
+## Manifest
+
+- Always use **Manifest V3** — Manifest V2 is deprecated.
+- Define minimal permissions — request only what the extension needs:
+  ```json
+  {
+    "manifest_version": 3,
+    "permissions": ["storage", "activeTab"],
+    "host_permissions": ["https://specific-site.com/*"]
+  }
+  ```
+- Use `activeTab` instead of broad `<all_urls>` when possible.
+- Declare content scripts and their match patterns explicitly.
+- Use `"action"` (not `"browser_action"`) for the extension button.
+
+## Architecture
+
+- **Popup** (`popup.html/tsx`): lightweight UI shown on extension icon click. Keep it fast — no heavy initialization.
+- **Options page** (`options.html/tsx`): settings and configuration UI.
+- **Background service worker** (`background.ts`): event-driven logic, API calls, alarms, message routing.
+- **Content scripts** (`content.ts`): code injected into web pages to read/modify DOM.
+- Keep these four concerns strictly separated — never mix responsibilities.
+
+## Service Workers (Background)
+
+- Service workers are **event-driven and ephemeral** — they start on events and stop when idle.
+- Never rely on global state persisting between activations. Use `chrome.storage` instead.
+- Register event listeners at the top level (not inside async callbacks):
+  ```ts
+  chrome.runtime.onInstalled.addListener(() => { /* ... */ })
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { /* ... */ })
+  ```
+- Use `chrome.alarms` for periodic tasks — never `setInterval`.
+- Return `true` from `onMessage` listener to send async responses.
+
+## Content Scripts
+
+- Content scripts run in an **isolated world** — they can access the page DOM but not the page's JS variables.
+- Sanitize all DOM manipulation to prevent XSS:
+  ```ts
+  element.textContent = userInput // Safe
+  element.innerHTML = userInput   // DANGEROUS — never do this
+  ```
+- Minimize content script footprint — inject only what's necessary.
+- Use `MutationObserver` for dynamic pages instead of polling.
+- Communicate with background via `chrome.runtime.sendMessage()`.
+
+## Storage
+
+- Use `chrome.storage.local` for large data (up to 10MB).
+- Use `chrome.storage.sync` for user settings that should sync across devices (100KB limit).
+- Never use `localStorage` in content scripts — it belongs to the host page.
+- Listen for storage changes:
+  ```ts
+  chrome.storage.onChanged.addListener((changes, area) => { /* ... */ })
+  ```
+
+## Messaging
+
+- Use `chrome.runtime.sendMessage` for popup/options ↔ background communication.
+- Use `chrome.tabs.sendMessage` for background → content script communication.
+- Define a message type system for type-safe messaging:
+  ```ts
+  type Message =
+    | { type: 'GET_DATA'; payload: { key: string } }
+    | { type: 'SAVE_DATA'; payload: { key: string; value: unknown } }
+  ```
+- Validate all incoming messages — never trust message content blindly.
+
+## Popup UI (React)
+
+- Keep popup bundle small — lazy load heavy features.
+- Use React for popup and options page, bundled with tsup or Vite.
+- Popup window is destroyed on close — persist state to `chrome.storage`.
+- Set a fixed width/height for popup: `min-width: 320px; min-height: 400px`.
+
+## Security
+
+- Never inject user-generated content into web pages without sanitization.
+- Use Content Security Policy (CSP) in manifest.
+- Validate all data from external sources (APIs, messages, storage).
+- Never include API keys or secrets in content scripts — they're visible to the page.
+- Audit `host_permissions` — overly broad permissions trigger Chrome Web Store review delays.
+
+## Development
+
+- Use `chrome://extensions` with Developer Mode for loading unpacked extensions.
+- Enable "Errors" view for debugging service worker issues.
+- Use Chrome DevTools to inspect popup (right-click → Inspect) and background (service worker link).
+- Hot-reload: rebuild with tsup watch, then click "Update" in `chrome://extensions`.