@caoscompanybr/merlin 3.5.0

package/.merlin-core/skills/general/database-provision/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: database-provision
+description: Database provisioning and SQL execution skill. Handles creation, migrations, and queries with appropriate approval levels.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate:
+    [create-database, provision-db, run-sql, execute-query, database-setup]
+  tool_reminders:
+    [
+      Database creation requires HIGH approval — never auto-create databases,
+      Production database operations require ABSOLUTE approval (Constitution XI),
+      Always back up before destructive operations (DROP,
+      TRUNCATE,
+      ALTER),
+    ]
+---
+
+## Database Provisioning Protocol
+
+### 1. Approval Levels
+
+| Operation                   | Environment | Approval Level |
+| --------------------------- | ----------- | -------------- |
+| Create database             | Any         | HIGH           |
+| Drop database               | Staging     | HIGH           |
+| Drop database               | Production  | ABSOLUTE       |
+| Execute SQL (SELECT)        | Any         | MEDIUM         |
+| Execute SQL (INSERT/UPDATE) | Staging     | MEDIUM         |
+| Execute SQL (INSERT/UPDATE) | Production  | HIGH           |
+| Run migration               | Staging     | MEDIUM         |
+| Run migration               | Production  | HIGH           |
+| ALTER TABLE                 | Any         | HIGH           |
+
+### 2. Safety Protocol
+
+Before any database operation:
+
+- [ ] Confirm the target environment (dev/staging/production)
+- [ ] Verify connection string points to the correct database
+- [ ] For destructive operations: create a backup first
+- [ ] Review SQL for injection vulnerabilities
+
+### 3. Supported Databases
+
+- PostgreSQL (via Supabase, Railway, or direct)
+- SQLite (local development)
+- MySQL/MariaDB
+
+### 4. Migration Best Practices
+
+- Always create reversible migrations (up + down)
+- Test migrations on staging before production
+- Never modify existing migration files — create new ones
+- Use transaction-wrapped migrations when possible

package/.merlin-core/skills/general/deploy/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: deploy
+description: One-click deployment skill for Netlify, Vercel, and other platforms. Auto-detects framework and configures deployment.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate: [deploy, go-live, netlify, vercel, staging-deploy]
+  tool_reminders:
+    [
+      Deployment requires MEDIUM approval (HIGH for production) — use ApprovalEngine,
+      Auto-detect framework before deploying (Next.js,
+      Vite,
+      CRA,
+      static),
+    ]
+---
+
+## Operations Config Integration
+
+**Before deploying, check `project-config.yaml → operations.deploy[]` first.** If the project has an operations config, use it — it overrides the detection below. The ops-manual domain skill provides the full routing logic and checklists.
+
+If no operations config exists, fall back to auto-detection:
+
+## Deployment Protocol
+
+### 1. Framework Detection
+
+Before deploying, identify the project framework:
+
+- Check `package.json` for framework dependencies
+- Check for framework-specific config files (next.config.js, vite.config.ts, etc.)
+- Determine build command and output directory
+
+### 2. Platform Selection
+
+| Framework   | Recommended Platform | Build Command         | Output Dir |
+| ----------- | -------------------- | --------------------- | ---------- |
+| Next.js     | Vercel               | `next build`          | `.next/`   |
+| Vite/React  | Netlify or Vercel    | `vite build`          | `dist/`    |
+| CRA         | Netlify              | `react-scripts build` | `build/`   |
+| Static HTML | Netlify              | N/A                   | `./`       |
+
+### 3. Approval Levels
+
+- **Staging deploy**: MEDIUM approval (auto-approved in YOLO mode)
+- **Production deploy**: HIGH approval (never auto-approved)
+- **First-time deploy**: HIGH approval (creates new site/project)
+
+### 4. Pre-Deploy Checks
+
+Before deploying, verify:
+
+- [ ] Build passes locally (`npm run build`)
+- [ ] No TypeScript/lint errors
+- [ ] Environment variables are configured on the platform
+- [ ] Branch is up-to-date with main
+
+### 5. Post-Deploy Verification
+
+After deployment:
+
+- [ ] Site loads successfully at the deployment URL
+- [ ] No console errors
+- [ ] Critical user flows work (if browser MCP available)

package/.merlin-core/skills/general/design-inspiration/SKILL.md

@@ -0,0 +1,146 @@
+---
+name: design-inspiration
+description: Generates binding design briefs before any visual work. The brief must be followed — no freestyle designing.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate: [wireframe, mockup, prototype, design-brief, visual-design]
+  file_triggers: [*.figma, *.svg]
+  tool_reminders: [Generate a design brief BEFORE any visual output — you MUST follow it, Brief must include: mood, palette, typography, layout grid, reference style, Always run the 4-phase reasoning engine: Analyze Request -> Match Product Type -> Apply Rules -> Generate Brief, Check anti-patterns for the target industry BEFORE finalizing the brief]
+---
+
+## Design Brief Protocol
+
+Before producing ANY visual output (wireframes, mockups, component designs, landing pages), you MUST first generate a binding design brief. Once generated, you MUST follow it — no deviations without explicit user approval.
+
+## Mandatory Brief Sections
+
+### 1. Mood & Tone
+
+- Describe the visual feeling in 3-5 adjectives (e.g., "clean, minimal, professional, warm")
+- Reference a design style (e.g., "Swiss minimalism", "Material Design 3", "Glassmorphism")
+
+### 2. Color Palette
+
+- Define 3-5 colors with hex values and semantic roles
+- Include: primary, background, text, accent, error
+- Specify light/dark mode approach if applicable
+
+### 3. Typography
+
+- Select font family(ies) — max 2
+- Define heading and body sizes using a type scale
+- Specify font weights used (regular, medium, bold)
+
+### 4. Layout Grid
+
+- Define the grid system: 12-column, max-width, gutters, margins
+- Specify breakpoints: mobile (<640px), tablet (<1024px), desktop (>=1024px)
+- Component spacing rhythm (e.g., 8px grid)
+
+### 5. Reference Style
+
+- Describe 1-3 reference sites or designs that embody the target aesthetic
+- Note what specifically to borrow: layout patterns, interaction styles, visual density
+
+## Binding Rule
+
+Once the design brief is created:
+
+- All subsequent visual output MUST conform to the brief
+- Deviations require explicit user approval with rationale
+- If the brief feels wrong during implementation, propose a brief amendment rather than silently diverging
+
+## Product-Type Reasoning Engine
+
+Before generating a design brief, run this 4-phase workflow:
+
+**Phase 1 — Analyze Request:** Extract product type, target industry, audience, and any style preferences from the user's prompt.
+
+**Phase 2 — Match Product Type:** Look up the product type in the table below to get style, palette direction, and landing pattern recommendations.
+
+**Phase 3 — Apply Reasoning Rules:** Cross-reference with industry anti-patterns. Apply decision conditionals (e.g., if luxury target, switch to Liquid Glass + dark palette).
+
+**Phase 4 — Generate Brief:** Produce the binding design brief using the matched recommendations, filling all 5 mandatory sections.
+
+### Product-Type to Style Mapping (Top 20)
+
+| Product Type          | Primary Style         | Secondary Style       | Landing Pattern          | Color Mood                     |
+| --------------------- | --------------------- | --------------------- | ------------------------ | ------------------------------ |
+| SaaS (General)        | Glassmorphism         | Flat Design           | Hero + Features + CTA    | Trust blue + orange CTA        |
+| Micro SaaS            | Minimalism            | Flat Design           | Minimal Single Column    | Clean neutral + single accent  |
+| E-commerce            | Conversion-Optimized  | Feature-Rich Showcase | Hero + Social Proof      | Success green + urgency orange |
+| E-commerce Luxury     | Liquid Glass          | Glassmorphism         | Feature-Rich Showcase    | Premium dark + gold accent     |
+| Fintech / Banking     | Dark Mode             | Glassmorphism         | Trust & Authority        | Dark bg + green indicators     |
+| Healthcare App        | Accessible & Ethical  | Neumorphism           | Trust & Authority        | Calming blue + white           |
+| AI / Chatbot Platform | AI-Native UI          | Minimalism            | Interactive Product Demo | AI purple + cyan               |
+| Portfolio / Agency    | Brutalism             | Motion-Driven         | Hero-Centric             | High contrast + accent         |
+| Blog / Content        | Minimalism            | Swiss Style           | Storytelling-Driven      | Neutral + readable             |
+| Dashboard / Analytics | Data-Dense            | Dark Mode             | Feature-Rich Showcase    | Dark bg + data colors          |
+| Mobile App            | Neumorphism           | Soft UI Evolution     | Hero + App Preview       | Vibrant + accessible           |
+| EdTech                | Accessible & Ethical  | Flat Design           | Feature-Rich Showcase    | Friendly blue + warm accent    |
+| Restaurant / Food     | Organic Biophilic     | Skeuomorphism         | Hero-Centric             | Warm earth + appetite colors   |
+| Real Estate           | Glassmorphism         | Minimalism            | Hero + Search            | Trust blue + luxury gold       |
+| Gaming                | Cyberpunk UI          | Dark Mode             | Interactive Product Demo | Neon purple + rose             |
+| Fitness / Wellness    | Vibrant & Block-based | Neumorphism           | Hero + Social Proof      | Energy green + motivating      |
+| Legal / Consulting    | Swiss Modernism 2.0   | Minimalism            | Trust & Authority        | Conservative navy + white      |
+| Travel / Hospitality  | Glassmorphism         | Parallax Storytelling | Storytelling-Driven      | Sky blue + warm sunset         |
+| Developer Tools       | Dark Mode             | Brutalism             | Feature-Rich Showcase    | Terminal green + dark          |
+| Marketplace           | Flat Design           | Bento Grid            | Hero + Categories        | Neutral + category colors      |
+
+## Style Recommendation Matrix (Top 25)
+
+| Style                 | Best For                       | Complexity | Accessibility      | Era         |
+| --------------------- | ------------------------------ | ---------- | ------------------ | ----------- |
+| Minimalism & Swiss    | Corporate, SaaS, content       | Low        | WCAG AAA           | 1950s+      |
+| Glassmorphism         | SaaS, fintech, modern apps     | Medium     | Ensure 4.5:1       | 2020s       |
+| Flat Design           | E-commerce, mobile, utilities  | Low        | WCAG AAA           | 2010s       |
+| Dark Mode (OLED)      | Dev tools, dashboards, media   | Low        | WCAG AAA           | 2020s       |
+| Brutalism             | Portfolios, agencies, creative | Low        | WCAG AAA           | 1950s+      |
+| Neumorphism           | Mobile, wellness, lifestyle    | Medium     | Low contrast risk  | 2020s       |
+| AI-Native UI          | AI products, chatbots          | Low        | WCAG AA            | 2020s       |
+| Accessible & Ethical  | Healthcare, education, gov     | Low        | WCAG AAA           | Universal   |
+| Claymorphism          | Children, casual, playful      | Medium     | Ensure contrast    | 2020s       |
+| Cyberpunk UI          | Gaming, crypto, entertainment  | Medium     | Custom focus       | 2020s       |
+| Bento Grid            | Apple-style, feature showcase  | Low        | WCAG AA            | 2020s       |
+| Liquid Glass          | Luxury, premium, high-end      | High       | Ensure contrast    | 2020s       |
+| Soft UI Evolution     | Lifestyle, wellness, social    | Medium     | Ensure 4.5:1       | 2020s       |
+| Motion-Driven         | Portfolios, storytelling       | High       | Reduced-motion alt | 2020s       |
+| Organic Biophilic     | Sustainability, food, nature   | Low        | WCAG AA            | 2020s       |
+| Neubrutalism          | Creative, startups, bold       | Low        | WCAG AAA           | 2020s       |
+| Swiss Modernism 2.0   | Corporate, legal, consulting   | Low        | WCAG AAA           | 1950s+2020s |
+| Retro-Futurism        | Entertainment, nostalgia       | Medium     | Custom             | 1980s       |
+| Skeuomorphism         | Food, luxury, tactile apps     | High       | Custom focus       | 2007-2012   |
+| Editorial Grid        | Magazine, publishing, fashion  | Low        | WCAG AA            | 2020s       |
+| Conversion-Optimized  | Landing pages, SaaS, e-comm    | Medium     | WCAG AA            | Universal   |
+| Data-Dense Dashboard  | BI, analytics, monitoring      | Medium     | Custom focus       | Universal   |
+| Parallax Storytelling | Travel, narrative, campaigns   | High       | Reduced-motion alt | 2020s       |
+| Hero-Centric          | Launch pages, products         | Medium     | WCAG AA            | Universal   |
+| Micro-interactions    | SaaS, mobile, UX-forward       | Medium     | Reduced-motion alt | 2020s       |
+
+## Anti-Pattern Enforcement
+
+Before finalizing any design brief, verify NONE of these industry-specific anti-patterns are violated:
+
+**Healthcare / Medical:** No neon or vibrant colors. No dark mode as default. No playful or novelty fonts. No complex animations. Accessibility is non-negotiable (WCAG AAA).
+
+**Finance / Banking:** No playful or casual fonts. No bright saturated backgrounds. No excessive animation. No informal tone in UI copy. Trust signals required.
+
+**E-commerce Luxury:** No flat design. No generic stock photography. No discount-red badges. No cluttered layouts. White space is mandatory.
+
+**SaaS / B2B:** No complex decorative elements. No more than 2 CTAs per viewport. No autoplay video. Social proof must be present.
+
+**Gaming / Entertainment:** No conservative corporate palette. No serif body fonts. No static layouts — motion expected. Performance budget: keep JS minimal despite visual complexity.
+
+**Education / EdTech:** No small text (16px minimum body). No low-contrast color combos. No complex navigation. Reading level of UI copy must match audience.
+
+**Legal / Consulting:** No trendy or novelty styles. No bright colors. No casual typography. Professional credibility must be the primary visual signal.
+
+**General (All Industries):**
+
+- Never use emoji as icons — SVG only (Heroicons, Lucide)
+- Never rely on color alone to convey information
+- Never skip loading states for async operations
+- Never omit focus states on interactive elements
+- Never use autoplay audio or video without user consent

package/.merlin-core/skills/general/design-palette/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: design-palette
+description: Industry-specific color intelligence — selects palettes by product type, maps hex values to semantic tokens, enforces contrast and dark mode rules.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate: [color-palette, brand-colors, color-scheme, dark-mode, light-mode]
+  file_triggers: [*.css, *.scss, tailwind.config.*]
+  tool_reminders: [Always verify color contrast meets WCAG AA (4.5:1 normal text, 3:1 large text) before finalizing palette, Map all hex values to semantic tokens from the design-system skill — never use raw hex in components]
+---
+
+## Color Selection Workflow
+
+1. **Identify product type** — What is the product? (SaaS, e-commerce, fintech, healthcare, etc.)
+2. **Select industry palette** — Use the quick reference table below to get the starting palette
+3. **Customize** — Adjust if the user specifies brand colors or preferences, keeping the semantic structure
+4. **Map to tokens** — Assign each color to a semantic token: primary, secondary, background, surface, text, CTA, error, success
+5. **Verify contrast** — Check all text/background pairs meet WCAG AA (4.5:1), CTA buttons meet 3:1
+6. **Define dark mode** — Same tokens, different values; ensure contrast holds in both modes
+
+## Quick Reference: Top 20 Industry Palettes
+
+| #   | Product Type       | Primary | Secondary | CTA     | Background | Text    | Notes                            |
+| --- | ------------------ | ------- | --------- | ------- | ---------- | ------- | -------------------------------- |
+| 1   | SaaS (General)     | #2563EB | #7C3AED   | #F97316 | #F8FAFC    | #0F172A | Trust blue + orange CTA contrast |
+| 2   | SaaS Startup       | #6366F1 | #EC4899   | #F59E0B | #FFFFFF    | #1E293B | Indigo energy + amber urgency    |
+| 3   | E-commerce         | #059669 | #0EA5E9   | #F97316 | #FFFFFF    | #1E293B | Success green + urgency orange   |
+| 4   | E-commerce Luxury  | #1C1917 | #78716C   | #CA8A04 | #FAFAF9    | #1C1917 | Premium dark + gold accent       |
+| 5   | Fintech / Banking  | #0F172A | #1E40AF   | #22C55E | #020617    | #F8FAFC | Dark trust + green positive      |
+| 6   | Crypto / Web3      | #7C3AED | #06B6D4   | #F59E0B | #0F0B1A    | #F8FAFC | Neon purple + cyan on dark       |
+| 7   | Healthcare         | #0284C7 | #0D9488   | #2563EB | #F0F9FF    | #0C4A6E | Calming blue + teal trust        |
+| 8   | AI / Chatbot       | #7C3AED | #3B82F6   | #06B6D4 | #0F172A    | #F8FAFC | AI purple + cyan interactions    |
+| 9   | EdTech             | #2563EB | #F59E0B   | #059669 | #FFFFFF    | #1E293B | Friendly blue + warm accent      |
+| 10  | Portfolio          | #0F172A | #6366F1   | #F97316 | #FFFFFF    | #0F172A | High contrast + accent pop       |
+| 11  | Restaurant / Food  | #B91C1C | #CA8A04   | #059669 | #FFFBEB    | #1C1917 | Appetite red + warm earth        |
+| 12  | Gaming             | #7C3AED | #F43F5E   | #FACC15 | #0F0B1A    | #F8FAFC | Neon purple + rose action        |
+| 13  | Fitness / Wellness | #059669 | #14B8A6   | #F97316 | #FFFFFF    | #1E293B | Energy green + motivating        |
+| 14  | Real Estate        | #1E40AF | #CA8A04   | #2563EB | #FFFFFF    | #0F172A | Trust blue + luxury gold         |
+| 15  | Legal / Consulting | #1E3A5F | #475569   | #2563EB | #F8FAFC    | #0F172A | Conservative navy + clean        |
+| 16  | Travel             | #0EA5E9 | #F59E0B   | #059669 | #FFFFFF    | #1E293B | Sky blue + warm sunset           |
+| 17  | Developer Tools    | #22C55E | #3B82F6   | #F59E0B | #0F172A    | #E2E8F0 | Terminal green + dark            |
+| 18  | Marketplace        | #2563EB | #059669   | #F97316 | #FFFFFF    | #1E293B | Neutral + category colors        |
+| 19  | Beauty / Spa       | #E8B4B8 | #A8D5BA   | #D4AF37 | #FFF5F5    | #1C1917 | Soft pink + sage + gold          |
+| 20  | Music / Streaming  | #EF4444 | #0F172A   | #FACC15 | #0A0A0A    | #F8FAFC | Bold red + dark + yellow         |
+
+For the complete 96-palette catalog, read `references/full-palettes.md`.
+
+## Semantic Token Mapping
+
+Map every palette to these semantic tokens (bridges to the design-system skill):
+
+| Token              | Role                        | Example (SaaS)     |
+| ------------------ | --------------------------- | ------------------ |
+| `primary`          | Main brand, primary buttons | #2563EB            |
+| `primary-hover`    | Primary hover state         | Darken primary 10% |
+| `secondary`        | Secondary actions, accents  | #7C3AED            |
+| `background`       | Page background             | #F8FAFC            |
+| `surface`          | Card/panel background       | #FFFFFF            |
+| `surface-elevated` | Modals, dropdowns           | #FFFFFF + shadow   |
+| `text-primary`     | Body text                   | #0F172A            |
+| `text-secondary`   | Captions, labels            | #475569            |
+| `text-muted`       | Placeholders, disabled      | #94A3B8            |
+| `border`           | Input borders, dividers     | #E2E8F0            |
+| `cta`              | Call-to-action buttons      | #F97316            |
+| `error`            | Error states                | #EF4444            |
+| `warning`          | Warning states              | #F59E0B            |
+| `success`          | Success states              | #22C55E            |
+| `info`             | Informational states        | #3B82F6            |
+
+## Dark Mode Rules
+
+- Use the SAME token names with DIFFERENT values — never branch on mode in components
+- Background: use near-black (#0F172A or #020617), never pure black (#000000) — reduces eye strain
+- Surface layers: increment lightness slightly (bg < surface < surface-elevated)
+- Text: use near-white (#F8FAFC or #E2E8F0), never pure white (#FFFFFF) on dark bg
+- CTA and accent colors may need lightness adjustments to maintain contrast on dark backgrounds
+- Re-verify ALL contrast ratios after switching to dark mode values
+
+## Color Accessibility
+
+**WCAG AA Minimums (mandatory):**
+
+- Normal text (< 18px): 4.5:1 contrast ratio
+- Large text (>= 18px or >= 14px bold): 3:1 contrast ratio
+- UI components and graphical objects: 3:1 against adjacent colors
+
+**WCAG AAA Targets (recommended for healthcare, education, government):**
+
+- Normal text: 7:1 | Large text: 4.5:1
+
+**Verification:** Use browser DevTools contrast checker, or calculate: `(L1 + 0.05) / (L2 + 0.05)` where L1 is lighter relative luminance.
+
+**Common Pitfalls:**
+
+- Light gray text on white background (fails AA)
+- Colored text on colored background without checking (e.g., blue on purple)
+- Placeholder text too low contrast (must still meet 4.5:1 or use alternative patterns)
+- Dark mode inversions that break previously-passing contrast ratios

package/.merlin-core/skills/general/design-palette/references/full-palettes.md

@@ -0,0 +1,144 @@
+# Complete Color Palette Catalog (96 Palettes)
+
+> Reference data for the design-palette skill. Agents should Read this file when they need the full palette catalog beyond the top 20 in SKILL.md.
+
+## SaaS & Technology (1-10)
+
+| #   | Product Type    | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                            |
+| --- | --------------- | ------- | --------- | ------- | ---------- | ------- | ------- | -------------------------------- |
+| 1   | SaaS (General)  | #2563EB | #7C3AED   | #F97316 | #F8FAFC    | #0F172A | #E2E8F0 | Trust blue + orange CTA contrast |
+| 2   | SaaS Startup    | #6366F1 | #EC4899   | #F59E0B | #FFFFFF    | #1E293B | #E2E8F0 | Indigo energy + amber urgency    |
+| 3   | Micro SaaS      | #3B82F6 | #A78BFA   | #10B981 | #FFFFFF    | #1E293B | #E2E8F0 | Focused blue + green success     |
+| 4   | B2B Enterprise  | #1E3A5F | #475569   | #2563EB | #F8FAFC    | #0F172A | #CBD5E1 | Conservative navy + action blue  |
+| 5   | Developer Tools | #22C55E | #3B82F6   | #F59E0B | #0F172A    | #E2E8F0 | #334155 | Terminal green + dark bg         |
+| 6   | AI / Chatbot    | #7C3AED | #3B82F6   | #06B6D4 | #0F172A    | #F8FAFC | #334155 | AI purple + cyan interactions    |
+| 7   | API Platform    | #0F172A | #3B82F6   | #22C55E | #FFFFFF    | #0F172A | #E2E8F0 | Documentation-friendly           |
+| 8   | DevOps / CI-CD  | #F97316 | #3B82F6   | #22C55E | #0F172A    | #F8FAFC | #334155 | Pipeline orange + status green   |
+| 9   | Cloud Platform  | #0EA5E9 | #6366F1   | #F59E0B | #F0F9FF    | #0F172A | #BAE6FD | Sky blue + cloud metaphor        |
+| 10  | Cybersecurity   | #00FF41 | #EF4444   | #F59E0B | #0A0A0A    | #00FF41 | #1A1A2E | Matrix green + alert red         |
+
+## E-commerce (11-20)
+
+| #   | Product Type         | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                          |
+| --- | -------------------- | ------- | --------- | ------- | ---------- | ------- | ------- | ------------------------------ |
+| 11  | E-commerce (General) | #059669 | #0EA5E9   | #F97316 | #FFFFFF    | #1E293B | #E2E8F0 | Success green + urgency orange |
+| 12  | E-commerce Luxury    | #1C1917 | #78716C   | #CA8A04 | #FAFAF9    | #1C1917 | #D6D3D1 | Premium dark + gold accent     |
+| 13  | Marketplace          | #2563EB | #059669   | #F97316 | #FFFFFF    | #1E293B | #E2E8F0 | Neutral + category colors      |
+| 14  | Subscription Box     | #EC4899 | #8B5CF6   | #F59E0B | #FFF1F2    | #1E293B | #FECDD3 | Playful pink + surprise        |
+| 15  | Dropshipping         | #F97316 | #3B82F6   | #EF4444 | #FFFFFF    | #1E293B | #E2E8F0 | Urgency orange + action red    |
+| 16  | Fashion              | #0F172A | #EC4899   | #F59E0B | #FFFFFF    | #0F172A | #F1F5F9 | Minimal dark + pink accent     |
+| 17  | Electronics          | #3B82F6 | #0F172A   | #F97316 | #F8FAFC    | #0F172A | #E2E8F0 | Tech blue + clean              |
+| 18  | Food & Grocery       | #059669 | #F59E0B   | #EF4444 | #FFFFFF    | #1E293B | #D1FAE5 | Fresh green + warm             |
+| 19  | Handmade / Artisan   | #92400E | #78716C   | #CA8A04 | #FFFBEB    | #1C1917 | #D6D3D1 | Craft brown + artisan gold     |
+| 20  | Pet Products         | #F59E0B | #059669   | #EF4444 | #FFFBEB    | #1E293B | #FDE68A | Warm amber + friendly          |
+
+## Finance (21-30)
+
+| #   | Product Type        | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                        |
+| --- | ------------------- | ------- | --------- | ------- | ---------- | ------- | ------- | ---------------------------- |
+| 21  | Fintech (General)   | #0F172A | #1E40AF   | #22C55E | #020617    | #F8FAFC | #1E293B | Dark trust + green positive  |
+| 22  | Banking             | #1E3A5F | #0F172A   | #2563EB | #F8FAFC    | #0F172A | #CBD5E1 | Conservative navy + trust    |
+| 23  | Crypto / Web3       | #7C3AED | #06B6D4   | #F59E0B | #0F0B1A    | #F8FAFC | #4C1D95 | Neon purple + cyan           |
+| 24  | Insurance           | #1E40AF | #059669   | #F97316 | #FFFFFF    | #0F172A | #BFDBFE | Stable blue + safety green   |
+| 25  | Trading Dashboard   | #0F172A | #22C55E   | #EF4444 | #020617    | #E2E8F0 | #1E293B | Green gain + red loss        |
+| 26  | Investment Platform | #1E3A5F | #CA8A04   | #059669 | #F8FAFC    | #0F172A | #CBD5E1 | Navy trust + gold premium    |
+| 27  | Payment Gateway     | #6366F1 | #0F172A   | #22C55E | #FFFFFF    | #0F172A | #E2E8F0 | Modern indigo + success      |
+| 28  | Accounting / Tax    | #475569 | #1E40AF   | #059669 | #F8FAFC    | #0F172A | #CBD5E1 | Professional gray + trust    |
+| 29  | Personal Finance    | #3B82F6 | #22C55E   | #F97316 | #FFFFFF    | #1E293B | #E2E8F0 | Friendly blue + growth       |
+| 30  | Neobank             | #0F172A | #7C3AED   | #06B6D4 | #020617    | #F8FAFC | #1E293B | Dark premium + modern accent |
+
+## Healthcare & Wellness (31-40)
+
+| #   | Product Type         | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                     |
+| --- | -------------------- | ------- | --------- | ------- | ---------- | ------- | ------- | ------------------------- |
+| 31  | Healthcare (General) | #0284C7 | #0D9488   | #2563EB | #F0F9FF    | #0C4A6E | #BAE6FD | Calming blue + teal trust |
+| 32  | Medical Clinic       | #0369A1 | #FFFFFF   | #059669 | #F0F9FF    | #0C4A6E | #BAE6FD | Professional blue + clean |
+| 33  | Pharmacy             | #059669 | #0284C7   | #F97316 | #F0FDF4    | #14532D | #BBF7D0 | Health green + pharmacy   |
+| 34  | Mental Health        | #7C3AED | #A78BFA   | #059669 | #FAF5FF    | #4C1D95 | #DDD6FE | Calming purple + gentle   |
+| 35  | Dental               | #0EA5E9 | #FFFFFF   | #2563EB | #F0F9FF    | #0C4A6E | #BAE6FD | Clean blue + white        |
+| 36  | Fitness / Wellness   | #059669 | #14B8A6   | #F97316 | #FFFFFF    | #1E293B | #D1FAE5 | Energy green + motivating |
+| 37  | Nutrition / Diet     | #22C55E | #F59E0B   | #EF4444 | #F0FDF4    | #14532D | #BBF7D0 | Fresh green + food warmth |
+| 38  | Veterinary           | #0EA5E9 | #F59E0B   | #059669 | #F0F9FF    | #0C4A6E | #BAE6FD | Friendly blue + warm      |
+| 39  | Meditation / Yoga    | #7C3AED | #A78BFA   | #14B8A6 | #FAF5FF    | #4C1D95 | #DDD6FE | Serene purple + teal calm |
+| 40  | Beauty / Spa         | #E8B4B8 | #A8D5BA   | #D4AF37 | #FFF5F5    | #1C1917 | #FECDD3 | Soft pink + sage + gold   |
+
+## Education (41-46)
+
+| #   | Product Type          | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                        |
+| --- | --------------------- | ------- | --------- | ------- | ---------- | ------- | ------- | ---------------------------- |
+| 41  | EdTech                | #2563EB | #F59E0B   | #059669 | #FFFFFF    | #1E293B | #BFDBFE | Friendly blue + warm         |
+| 42  | Online Course         | #6366F1 | #EC4899   | #F59E0B | #FFFFFF    | #1E293B | #C7D2FE | Modern indigo + engaging     |
+| 43  | LMS Platform          | #1E40AF | #059669   | #F97316 | #F8FAFC    | #0F172A | #BFDBFE | Stable blue + progress green |
+| 44  | Kids Education        | #F59E0B | #EC4899   | #059669 | #FFFBEB    | #1E293B | #FDE68A | Playful warm + pink accent   |
+| 45  | University / Academic | #1E3A5F | #CA8A04   | #2563EB | #F8FAFC    | #0F172A | #CBD5E1 | Traditional navy + gold      |
+| 46  | Tutoring Platform     | #3B82F6 | #22C55E   | #F97316 | #FFFFFF    | #1E293B | #BFDBFE | Trust blue + success green   |
+
+## Creative & Media (47-56)
+
+| #   | Product Type      | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                        |
+| --- | ----------------- | ------- | --------- | ------- | ---------- | ------- | ------- | ---------------------------- |
+| 47  | Portfolio         | #0F172A | #6366F1   | #F97316 | #FFFFFF    | #0F172A | #F1F5F9 | High contrast + accent pop   |
+| 48  | Agency            | #0F172A | #EF4444   | #F59E0B | #FFFFFF    | #0F172A | #E2E8F0 | Bold dark + red energy       |
+| 49  | Photography       | #0F172A | #78716C   | #FFFFFF | #0A0A0A    | #FAFAF9 | #262626 | Minimal dark + gallery focus |
+| 50  | Music / Streaming | #EF4444 | #0F172A   | #FACC15 | #0A0A0A    | #F8FAFC | #262626 | Bold red + dark + yellow     |
+| 51  | Video Platform    | #EF4444 | #0F172A   | #FFFFFF | #0F0F0F    | #F8FAFC | #262626 | Video red + dark cinema      |
+| 52  | Podcast           | #7C3AED | #F97316   | #22C55E | #0F172A    | #F8FAFC | #334155 | Audio purple + warm          |
+| 53  | Gaming            | #7C3AED | #F43F5E   | #FACC15 | #0F0B1A    | #F8FAFC | #4C1D95 | Neon purple + rose           |
+| 54  | Design Tool       | #3B82F6 | #EC4899   | #F59E0B | #FFFFFF    | #0F172A | #E2E8F0 | Creative blue + pink         |
+| 55  | Newsletter        | #0F172A | #3B82F6   | #F97316 | #FFFFFF    | #0F172A | #E2E8F0 | Clean + readable             |
+| 56  | Social Media      | #6366F1 | #EC4899   | #F59E0B | #FFFFFF    | #1E293B | #C7D2FE | Engaging indigo + pink       |
+
+## Services & Professional (57-70)
+
+| #   | Product Type        | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                       |
+| --- | ------------------- | ------- | --------- | ------- | ---------- | ------- | ------- | --------------------------- |
+| 57  | Restaurant / Food   | #B91C1C | #CA8A04   | #059669 | #FFFBEB    | #1C1917 | #FDE68A | Appetite red + warm earth   |
+| 58  | Hotel / Hospitality | #1E3A5F | #CA8A04   | #2563EB | #FFFFFF    | #0F172A | #CBD5E1 | Navy trust + gold luxury    |
+| 59  | Travel              | #0EA5E9 | #F59E0B   | #059669 | #FFFFFF    | #1E293B | #BAE6FD | Sky blue + sunset warmth    |
+| 60  | Real Estate         | #1E40AF | #CA8A04   | #2563EB | #FFFFFF    | #0F172A | #BFDBFE | Trust blue + luxury gold    |
+| 61  | Legal               | #1E3A5F | #475569   | #2563EB | #F8FAFC    | #0F172A | #CBD5E1 | Conservative navy + clean   |
+| 62  | Consulting          | #0F172A | #475569   | #3B82F6 | #F8FAFC    | #0F172A | #CBD5E1 | Professional dark + blue    |
+| 63  | Automotive          | #0F172A | #EF4444   | #F59E0B | #FFFFFF    | #0F172A | #E2E8F0 | Bold dark + performance red |
+| 64  | Construction        | #F59E0B | #0F172A   | #EF4444 | #FFFFFF    | #1E293B | #FDE68A | Safety yellow + industrial  |
+| 65  | Logistics           | #3B82F6 | #F97316   | #22C55E | #F8FAFC    | #0F172A | #BFDBFE | Reliable blue + tracking    |
+| 66  | Recruitment         | #6366F1 | #059669   | #F97316 | #FFFFFF    | #1E293B | #C7D2FE | Modern indigo + success     |
+| 67  | Event Management    | #EC4899 | #7C3AED   | #F59E0B | #FFFFFF    | #1E293B | #FECDD3 | Vibrant pink + purple       |
+| 68  | Wedding             | #E8B4B8 | #CA8A04   | #D4AF37 | #FFF5F5    | #1C1917 | #FECDD3 | Romantic pink + gold        |
+| 69  | Non-Profit / NGO    | #059669 | #0284C7   | #F97316 | #FFFFFF    | #1E293B | #D1FAE5 | Hope green + action         |
+| 70  | Government / Civic  | #1E40AF | #0F172A   | #059669 | #F8FAFC    | #0F172A | #BFDBFE | Official blue + trust       |
+
+## Emerging & Specialized (71-86)
+
+| #   | Product Type         | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                     |
+| --- | -------------------- | ------- | --------- | ------- | ---------- | ------- | ------- | ------------------------- |
+| 71  | IoT Dashboard        | #06B6D4 | #3B82F6   | #22C55E | #0F172A    | #E2E8F0 | #164E63 | Connected cyan + data     |
+| 72  | AR / VR Platform     | #7C3AED | #EC4899   | #06B6D4 | #0F0B1A    | #F8FAFC | #4C1D95 | Immersive purple + cyan   |
+| 73  | Robotics             | #3B82F6 | #475569   | #22C55E | #0F172A    | #E2E8F0 | #1E293B | Technical blue + steel    |
+| 74  | Space Tech           | #0F172A | #6366F1   | #06B6D4 | #020617    | #F8FAFC | #1E293B | Deep space + stellar      |
+| 75  | Climate / Green Tech | #059669 | #22C55E   | #F59E0B | #F0FDF4    | #14532D | #BBF7D0 | Eco green + nature        |
+| 76  | Blockchain           | #F59E0B | #7C3AED   | #06B6D4 | #0F172A    | #F8FAFC | #334155 | Gold chain + tech purple  |
+| 77  | NFT / Digital Art    | #EC4899 | #7C3AED   | #F59E0B | #0A0A0A    | #F8FAFC | #4C1D95 | Bold pink + purple dark   |
+| 78  | Quantum Computing    | #00FFFF | #FF00FF   | #F59E0B | #0A0A0A    | #E0FFFF | #1A1A2E | Quantum cyan + magenta    |
+| 79  | Autonomous Systems   | #3B82F6 | #F97316   | #22C55E | #0F172A    | #E2E8F0 | #1E293B | Navigation blue + alert   |
+| 80  | Biotech              | #0D9488 | #7C3AED   | #059669 | #F0FDFA    | #134E4A | #99F6E4 | Bio teal + science purple |
+| 81  | Spatial / VisionOS   | #FFFFFF | #3B82F6   | #007AFF | #F2F2F7    | #1C1C1E | #C6C6C8 | Glass white + system blue |
+| 82  | Sustainability       | #059669 | #92400E   | #F59E0B | #FFFFFF    | #14532D | #D1FAE5 | Earth green + brown       |
+| 83  | 3D Printing          | #F97316 | #3B82F6   | #22C55E | #FFFFFF    | #0F172A | #FED7AA | Maker orange + tech       |
+| 84  | Drone / UAV          | #0EA5E9 | #0F172A   | #22C55E | #F0F9FF    | #0C4A6E | #BAE6FD | Sky blue + flight         |
+| 85  | Energy / Utilities   | #F59E0B | #059669   | #2563EB | #FFFFFF    | #1E293B | #FDE68A | Energy amber + green      |
+| 86  | Cybersecurity        | #00FF41 | #EF4444   | #F59E0B | #0A0A0A    | #00FF41 | #1A1A2E | Matrix green + alert red  |
+
+## Lifestyle & Consumer (87-96)
+
+| #   | Product Type       | Primary | Secondary | CTA     | Background | Text    | Border  | Notes                      |
+| --- | ------------------ | ------- | --------- | ------- | ---------- | ------- | ------- | -------------------------- |
+| 87  | Dating App         | #EF4444 | #EC4899   | #F59E0B | #FFF1F2    | #1E293B | #FECDD3 | Love red + warm pink       |
+| 88  | Social Network     | #3B82F6 | #059669   | #F97316 | #FFFFFF    | #1E293B | #BFDBFE | Connect blue + social      |
+| 89  | News / Media       | #0F172A | #EF4444   | #2563EB | #FFFFFF    | #0F172A | #E2E8F0 | Serious dark + alert red   |
+| 90  | Weather App        | #0EA5E9 | #F59E0B   | #3B82F6 | #F0F9FF    | #0C4A6E | #BAE6FD | Sky blue + sun amber       |
+| 91  | Productivity       | #6366F1 | #059669   | #F59E0B | #FFFFFF    | #1E293B | #C7D2FE | Focus indigo + success     |
+| 92  | CRM                | #2563EB | #059669   | #F97316 | #F8FAFC    | #0F172A | #BFDBFE | Relationship blue + growth |
+| 93  | Project Management | #7C3AED | #3B82F6   | #22C55E | #FFFFFF    | #1E293B | #DDD6FE | Task purple + status       |
+| 94  | Note-Taking        | #F59E0B | #0F172A   | #059669 | #FFFBEB    | #1C1917 | #FDE68A | Paper amber + ink dark     |
+| 95  | Meditation App     | #7C3AED | #A78BFA   | #14B8A6 | #FAF5FF    | #4C1D95 | #DDD6FE | Serene purple + teal       |
+| 96  | Kids App           | #F59E0B | #EC4899   | #059669 | #FFF7ED    | #1E293B | #FDE68A | Playful + safe + bright    |

package/.merlin-core/skills/general/design-system/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: design-system
+description: Enforces design system constraints — semantic tokens only, limited palette, consistent spacing. Prevents direct color/size classes.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate: [design-system, design-tokens, tailwind-config, component-library]
+  file_triggers: [*.css, *.scss, *.tsx, *.jsx, *.vue, *.svelte]
+  tool_reminders: [No direct color classes (bg-red-500) — use semantic tokens only (bg-primary, text-error), Maximum 3-5 colors total, max 2 font families, Spacing via design tokens only — no arbitrary pixel values, Run pre-delivery checklist before presenting any UI work to the user]
+---
+
+## Color System
+
+Use semantic color tokens exclusively. Never reference raw color values or utility color classes directly.
+
+**Semantic Tokens:**
+
+- `primary`, `primary-hover`, `primary-active` — main brand actions
+- `secondary` — secondary actions and accents
+- `background`, `surface`, `surface-elevated` — layout layers
+- `text-primary`, `text-secondary`, `text-muted` — typography hierarchy
+- `border`, `border-subtle` — separators and outlines
+- `error`, `warning`, `success`, `info` — semantic status colors
+
+**Rules:**
+
+- Maximum 3-5 base colors in the palette; derive shades programmatically
+- Dark mode uses the same token names with different values — never branch on mode in components
+- Contrast ratio: text on background must meet WCAG AA (4.5:1 normal, 3:1 large)
+
+## Typography
+
+- Maximum 2 font families: one for headings, one for body (or a single family for both)
+- Use a type scale with consistent ratios (e.g., 1.25 major third)
+- Sizes via tokens: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`
+- Line height: 1.5 for body text, 1.2 for headings
+- Never set font-size with arbitrary pixel values
+
+## Spacing
+
+- Use a spacing scale based on a 4px or 8px grid: `space-1` (4px), `space-2` (8px), `space-3` (12px), `space-4` (16px), `space-6` (24px), `space-8` (32px)
+- Never use arbitrary margin/padding values; always reference the spacing scale
+- Component internal padding: `space-3` to `space-4`
+- Section gaps: `space-6` to `space-8`
+
+## Component Patterns
+
+- Buttons: primary, secondary, ghost, danger variants only
+- Inputs: consistent border, focus ring, error state across all form elements
+- Cards: uniform border-radius, shadow elevation, padding
+- Icons: single icon library, consistent sizing (16px, 20px, 24px)
+
+## Icon Discipline
+
+Enforce a single visual language for icons across the entire product:
+
+- **One icon set** — Choose one library (Heroicons, Lucide, Phosphor, etc.) and use it exclusively
+- **Consistent sizing** — Define tokens: `icon-sm` (16px), `icon-md` (20px), `icon-lg` (24px), `icon-xl` (32px)
+- **Stroke consistency** — Use the same stroke width within the same visual layer (1.5px or 2px, never mixed)
+- **Filled vs Outline** — Pick one style per hierarchy level. Don't mix filled and outline at the same level
+- **No emoji as icons** — SVG only for structural UI elements (navigation, settings, controls)
+- **Icon alignment** — Align icons to text baseline, maintain consistent padding around icons
+- **Icon contrast** — WCAG 3:1 minimum for UI glyphs, 4.5:1 for small icon elements
+- **Touch target** — Icons used as buttons must have ≥44px interactive area (use padding or `hitSlop`)
+
+## Pre-Delivery Validation Checklist
+
+Before presenting ANY UI work to the user, verify all of the following:
+
+1. **No emoji icons** — use SVG icons only (Heroicons, Lucide, or project's chosen library)
+2. **cursor-pointer** on all clickable elements (buttons, links, interactive cards)
+3. **Smooth transitions** — 150-300ms duration on hover/focus/active state changes
+4. **WCAG AA contrast** — 4.5:1 ratio for normal text, 3:1 for large text (18px+ or 14px+ bold)
+5. **Keyboard focus states** — visible focus ring on all interactive elements, logical tab order
+6. **prefers-reduced-motion** — wrap animations in `@media (prefers-reduced-motion: no-preference)`
+7. **Responsive breakpoints** — test at 375px (mobile), 768px (tablet), 1024px (laptop), 1440px (desktop)
+8. **No layout shifts** — hover/focus/interaction must not cause surrounding elements to move
+
+## Design System Persistence
+
+When generating a design system for a project, use the Master + Override pattern:
+
+**Master file** — `design-system/MASTER.md`:
+
+- Single source of truth for the entire project
+- Contains: color palette (hex + token names), typography (fonts, scale, weights), spacing scale, component variants, icon library choice
+- All pages inherit from MASTER by default
+
+**Page overrides** — `design-system/pages/<page-name>.md`:
+
+- Only declares deviations from MASTER (e.g., a landing page using a hero-specific accent color)
+- Must explicitly reference which MASTER tokens are overridden and why
+- Everything not overridden inherits from MASTER unchanged