@caoscompanybr/merlin 3.5.0

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

@@ -0,0 +1,115 @@
+---
+name: design-typography
+description: Font pairing intelligence — curated pairings by mood and industry, with ready-to-use CSS imports and Tailwind configs.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate: [typography, typeface, font-pairing, type-scale, google-fonts]
+  file_triggers: [*.css, *.scss, tailwind.config.*]
+  tool_reminders: [Maximum 2 font families per project — one for headings, one for body (or single family for both), Minimum 16px body font size — never smaller for readability, Always provide Google Fonts import or next/font config for chosen pairing]
+---
+
+## Font Selection Workflow
+
+1. **Identify mood** — What feeling should the typography convey? (professional, playful, elegant, technical, friendly)
+2. **Match industry** — Use the product type to narrow category (Serif+Sans for luxury, Mono+Sans for dev tools, etc.)
+3. **Select pairing** — Pick from the quick reference table below or the full catalog in `references/full-pairings.md`
+4. **Implement** — Use the provided CSS import / Tailwind config from the catalog
+5. **Verify** — Check line height (1.5 body, 1.2 headings), line length (65-75ch), and minimum 16px body
+
+## Quick Reference: Top 20 Font Pairings
+
+| #   | Pairing Name        | Heading               | Body                  | Category     | Best For                      |
+| --- | ------------------- | --------------------- | --------------------- | ------------ | ----------------------------- |
+| 1   | Classic Elegant     | Playfair Display      | Inter                 | Serif + Sans | Luxury, fashion, editorial    |
+| 2   | Modern Professional | Poppins               | Inter                 | Sans + Sans  | SaaS, corporate, clean        |
+| 3   | Tech Startup        | Space Grotesk         | DM Sans               | Sans + Sans  | Startups, tech, modern        |
+| 4   | Editorial Premium   | Lora                  | Source Sans 3         | Serif + Sans | Blogs, magazines, content     |
+| 5   | Minimal Swiss       | Inter                 | Inter                 | Sans + Sans  | Minimal, dashboard, utility   |
+| 6   | Creative Bold       | Sora                  | Nunito                | Sans + Sans  | Creative, portfolio, agency   |
+| 7   | Corporate Trust     | Merriweather          | Open Sans             | Serif + Sans | Finance, legal, consulting    |
+| 8   | Friendly Warm       | Quicksand             | Nunito                | Sans + Sans  | Education, kids, casual       |
+| 9   | Developer Mono      | JetBrains Mono        | IBM Plex Sans         | Mono + Sans  | Dev tools, code, technical    |
+| 10  | Luxury Display      | Cormorant Garamond    | Montserrat            | Serif + Sans | Luxury, spa, high-end         |
+| 11  | News Editorial      | Source Serif 4        | Source Sans 3         | Serif + Sans | News, publishing, long-form   |
+| 12  | Geometric Clean     | Outfit                | Work Sans             | Sans + Sans  | Modern SaaS, fintech          |
+| 13  | Playful Rounded     | Nunito                | Quicksand             | Sans + Sans  | Kids, games, casual apps      |
+| 14  | Brutalist Raw       | Space Mono            | Space Mono            | Mono + Mono  | Portfolio, creative, bold     |
+| 15  | Healthcare Calm     | Libre Franklin        | Lato                  | Sans + Sans  | Healthcare, wellness, calm    |
+| 16  | E-commerce Trust    | Rubik                 | Open Sans             | Sans + Sans  | E-commerce, marketplace       |
+| 17  | Dashboard Data      | IBM Plex Sans         | IBM Plex Mono         | Sans + Mono  | Dashboards, analytics, data   |
+| 18  | Crypto Web3         | Orbitron              | Exo 2                 | Sans + Sans  | Crypto, Web3, futuristic      |
+| 19  | Accessibility First | Atkinson Hyperlegible | Atkinson Hyperlegible | Sans + Sans  | Accessibility-critical, gov   |
+| 20  | Restaurant Charm    | Playfair Display      | Lato                  | Serif + Sans | Restaurant, food, hospitality |
+
+For the complete 57-pairing catalog with CSS imports and Tailwind configs, read `references/full-pairings.md`.
+
+## Implementation Patterns
+
+**Vanilla CSS (Google Fonts):**
+
+```css
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap");
+
+:root {
+  --font-heading: "Poppins", sans-serif;
+  --font-body: "Inter", sans-serif;
+}
+```
+
+**Tailwind CSS:**
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    fontFamily: {
+      heading: ["Poppins", "sans-serif"],
+      body: ["Inter", "sans-serif"],
+    },
+  },
+};
+```
+
+**Next.js (next/font — best performance):**
+
+```tsx
+import { Inter, Poppins } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-body" });
+const poppins = Poppins({
+  weight: ["600", "700"],
+  subsets: ["latin"],
+  variable: "--font-heading",
+});
+
+export default function RootLayout({ children }) {
+  return (
+    <html className={`${inter.variable} ${poppins.variable}`}>{children}</html>
+  );
+}
+```
+
+## Typography Rules
+
+**Type Scale (1.25 ratio — major third):**
+
+| Token     | Size            | Use                    |
+| --------- | --------------- | ---------------------- |
+| text-xs   | 12px / 0.75rem  | Captions, fine print   |
+| text-sm   | 14px / 0.875rem | Labels, secondary text |
+| text-base | 16px / 1rem     | Body text (minimum)    |
+| text-lg   | 20px / 1.25rem  | Lead paragraphs        |
+| text-xl   | 25px / 1.563rem | H4, card titles        |
+| text-2xl  | 31px / 1.953rem | H3, section titles     |
+| text-3xl  | 39px / 2.441rem | H2, page titles        |
+| text-4xl  | 49px / 3.052rem | H1, hero titles        |
+
+**Line Height:** 1.5 for body text, 1.2 for headings, 1.7 for long-form reading
+
+**Line Length:** 65-75 characters per line for optimal readability (use `max-w-prose` in Tailwind)
+
+**Font Weights:** Limit to 3 weights per family (e.g., 400 regular, 500 medium, 700 bold) to minimize load
+
+**Font Loading:** Always use `display=swap` for Google Fonts to prevent FOIT (Flash of Invisible Text)

package/.merlin-core/skills/general/design-typography/references/full-pairings.md

@@ -0,0 +1,144 @@
+# Complete Font Pairing Catalog (57 Pairings)
+
+> Reference data for the design-typography skill. Agents should Read this file when they need the full pairing catalog with implementation code.
+
+## Serif + Sans Serif Pairings (1-15)
+
+| #   | Pairing Name      | Heading            | Body          | Mood                      | Best For                   | Google Fonts URL                                                                                    |
+| --- | ----------------- | ------------------ | ------------- | ------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------- |
+| 1   | Classic Elegant   | Playfair Display   | Inter         | Elegant, sophisticated    | Luxury, fashion, editorial | fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600        |
+| 2   | Editorial Premium | Lora               | Source Sans 3 | Warm, authoritative       | Blogs, magazines, content  | fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600        |
+| 3   | Corporate Trust   | Merriweather       | Open Sans     | Trustworthy, professional | Finance, legal, consulting | fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@400;500;600            |
+| 4   | Luxury Display    | Cormorant Garamond | Montserrat    | Refined, premium          | Luxury, spa, high-end      | fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500 |
+| 5   | News Editorial    | Source Serif 4     | Source Sans 3 | Authoritative, readable   | News, publishing           | fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Source+Sans+3:wght@400;500      |
+| 6   | Restaurant Charm  | Playfair Display   | Lato          | Warm, inviting            | Restaurant, food           | fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;700             |
+| 7   | Storytelling      | Vollkorn           | Karla         | Narrative, warm           | Storytelling, blogs        | fonts.googleapis.com/css2?family=Vollkorn:wght@600;700&family=Karla:wght@400;500                    |
+| 8   | Academic Classic  | Crimson Pro        | Work Sans     | Scholarly, clear          | University, academic       | fonts.googleapis.com/css2?family=Crimson+Pro:wght@600;700&family=Work+Sans:wght@400;500             |
+| 9   | Boutique Refined  | DM Serif Display   | DM Sans       | Elegant, modern           | Boutique, artisan          | fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700                   |
+| 10  | Heritage          | Bitter             | Cabin         | Grounded, reliable        | Heritage brands, artisan   | fonts.googleapis.com/css2?family=Bitter:wght@600;700&family=Cabin:wght@400;500;600                  |
+| 11  | Legal Formal      | Noto Serif         | Noto Sans     | Formal, universal         | Legal, government          | fonts.googleapis.com/css2?family=Noto+Serif:wght@600;700&family=Noto+Sans:wght@400;500;600          |
+| 12  | Magazine Style    | Fraunces           | Commissioner  | Expressive, editorial     | Magazine, lifestyle        | fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Commissioner:wght@400;500             |
+| 13  | Wedding Romantic  | Cormorant Garamond | Quicksand     | Romantic, gentle          | Wedding, events            | fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Quicksand:wght@400;500      |
+| 14  | Book Layout       | Libre Baskerville  | Source Sans 3 | Classic, readable         | Long-form reading          | fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Source+Sans+3:wght@400;500   |
+| 15  | Museum / Gallery  | Spectral           | Inter         | Curated, refined          | Art, gallery, museum       | fonts.googleapis.com/css2?family=Spectral:wght@500;600;700&family=Inter:wght@400;500                |
+
+## Sans + Sans Pairings (16-38)
+
+| #   | Pairing Name        | Heading               | Body                  | Mood                   | Best For                    | Google Fonts URL                                                                              |
+| --- | ------------------- | --------------------- | --------------------- | ---------------------- | --------------------------- | --------------------------------------------------------------------------------------------- |
+| 16  | Modern Professional | Poppins               | Inter                 | Clean, professional    | SaaS, corporate             | fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600           |
+| 17  | Tech Startup        | Space Grotesk         | DM Sans               | Modern, technical      | Startups, tech              | fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500   |
+| 18  | Minimal Swiss       | Inter                 | Inter                 | Minimal, utility       | Dashboards, utility         | fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700                                   |
+| 19  | Creative Bold       | Sora                  | Nunito                | Creative, energetic    | Portfolio, agency           | fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Nunito:wght@400;500;600             |
+| 20  | Friendly Warm       | Quicksand             | Nunito                | Friendly, approachable | Education, kids             | fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Nunito:wght@400;500        |
+| 21  | Geometric Clean     | Outfit                | Work Sans             | Geometric, clean       | Fintech, modern SaaS        | fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Work+Sans:wght@400;500        |
+| 22  | Playful Rounded     | Nunito                | Quicksand             | Playful, soft          | Kids, games, casual         | fonts.googleapis.com/css2?family=Nunito:wght@600;700&family=Quicksand:wght@400;500            |
+| 23  | Healthcare Calm     | Libre Franklin        | Lato                  | Calm, trustworthy      | Healthcare, wellness        | fonts.googleapis.com/css2?family=Libre+Franklin:wght@500;600;700&family=Lato:wght@400;700     |
+| 24  | E-commerce Trust    | Rubik                 | Open Sans             | Trustworthy, practical | E-commerce, marketplace     | fonts.googleapis.com/css2?family=Rubik:wght@500;600;700&family=Open+Sans:wght@400;500;600     |
+| 25  | Crypto Web3         | Orbitron              | Exo 2                 | Futuristic, technical  | Crypto, Web3                | fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Exo+2:wght@400;500          |
+| 26  | Sports Energy       | Barlow Condensed      | Barlow                | Dynamic, athletic      | Sports, fitness             | fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500     |
+| 27  | Fintech Precision   | Plus Jakarta Sans     | Inter                 | Sharp, precise         | Fintech, trading            | fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=Inter:wght@400;500 |
+| 28  | Social Friendly     | Manrope               | Nunito Sans           | Friendly, social       | Social media, community     | fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Nunito+Sans:wght@400;500     |
+| 29  | Government Neutral  | Public Sans           | Public Sans           | Neutral, accessible    | Government, civic           | fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700                             |
+| 30  | Startup Fresh       | Albert Sans           | DM Sans               | Fresh, modern          | Startup, product            | fonts.googleapis.com/css2?family=Albert+Sans:wght@500;600;700&family=DM+Sans:wght@400;500     |
+| 31  | Data Dashboard      | Geist                 | Geist                 | Technical, clean       | Dashboards, analytics       | Self-hosted (Vercel Geist) — use next/font/local                                              |
+| 32  | Accessibility       | Atkinson Hyperlegible | Atkinson Hyperlegible | Clear, accessible      | Accessibility-critical, gov | fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700                           |
+| 33  | Travel Adventure    | Josefin Sans          | Raleway               | Adventurous, open      | Travel, outdoor             | fonts.googleapis.com/css2?family=Josefin+Sans:wght@600;700&family=Raleway:wght@400;500        |
+| 34  | Music Bold          | Urbanist              | Outfit                | Bold, rhythmic         | Music, entertainment        | fonts.googleapis.com/css2?family=Urbanist:wght@600;700;800&family=Outfit:wght@400;500         |
+| 35  | Real Estate         | Lexend                | Inter                 | Clear, trustworthy     | Real estate, property       | fonts.googleapis.com/css2?family=Lexend:wght@500;600;700&family=Inter:wght@400;500            |
+| 36  | Science Research    | IBM Plex Sans         | IBM Plex Sans         | Technical, precise     | Science, research           | fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700                           |
+| 37  | Non-Profit Warm     | Cabin                 | Hind                  | Warm, inclusive        | Non-profit, NGO             | fonts.googleapis.com/css2?family=Cabin:wght@500;600;700&family=Hind:wght@400;500              |
+| 38  | Kids Bubble         | Baloo 2               | Nunito                | Fun, bubbly            | Kids apps, children         | fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Nunito:wght@400;500          |
+
+## Monospace & Display Pairings (39-50)
+
+| #   | Pairing Name      | Heading          | Body           | Mood                 | Best For                | Google Fonts URL                                                                                  |
+| --- | ----------------- | ---------------- | -------------- | -------------------- | ----------------------- | ------------------------------------------------------------------------------------------------- |
+| 39  | Developer Mono    | JetBrains Mono   | IBM Plex Sans  | Technical, precise   | Dev tools, code docs    | fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=IBM+Plex+Sans:wght@400;500    |
+| 40  | Dashboard Data    | IBM Plex Sans    | IBM Plex Mono  | Data-focused         | Dashboards, analytics   | fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500 |
+| 41  | Brutalist Raw     | Space Mono       | Space Mono     | Raw, bold            | Portfolio, creative     | fonts.googleapis.com/css2?family=Space+Mono:wght@400;700                                          |
+| 42  | Terminal          | Fira Code        | Fira Sans      | Hacker, terminal     | Developer tools, CLI    | fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&family=Fira+Sans:wght@400;500         |
+| 43  | Retro Code        | VT323            | Press Start 2P | Retro, pixel         | Gaming retro, nostalgic | fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P                                      |
+| 44  | Typewriter        | Courier Prime    | Lato           | Typewriter, literary | Writing, publishing     | fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Lato:wght@400;700              |
+| 45  | Science Fiction   | Orbitron         | Rajdhani       | Sci-fi, futuristic   | Gaming, sci-fi          | fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@400;500;600           |
+| 46  | Pixel Retro       | Press Start 2P   | VT323          | Pixelated, arcade    | Retro gaming            | fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323                                      |
+| 47  | Handwritten Touch | Caveat           | Inter          | Personal, hand-drawn | Personal brand, casual  | fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Inter:wght@400;500                |
+| 48  | Neon Display      | Bungee           | DM Sans        | Bold, attention      | Posters, landing hero   | fonts.googleapis.com/css2?family=Bungee&family=DM+Sans:wght@400;500                               |
+| 49  | Graffiti          | Permanent Marker | Roboto         | Street, urban        | Street culture, youth   | fonts.googleapis.com/css2?family=Permanent+Marker&family=Roboto:wght@400;500                      |
+| 50  | Calligraphy       | Great Vibes      | Montserrat     | Calligraphic, formal | Wedding, invitations    | fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@400;500                       |
+
+## Specialized Pairings (51-57)
+
+| #   | Pairing Name    | Heading              | Body             | Mood              | Best For             | Google Fonts URL                                                                                     |
+| --- | --------------- | -------------------- | ---------------- | ----------------- | -------------------- | ---------------------------------------------------------------------------------------------------- |
+| 51  | Japanese Modern | Zen Kaku Gothic New  | Noto Sans JP     | Modern Japanese   | Japanese market      | fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&family=Noto+Sans+JP:wght@400;500   |
+| 52  | Arabic Elegant  | Noto Naskh Arabic    | Noto Sans Arabic | Elegant Arabic    | Arabic market        | fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@500;700&family=Noto+Sans+Arabic:wght@400;500 |
+| 53  | Korean Clean    | Noto Sans KR         | Noto Sans KR     | Clean Korean      | Korean market        | fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700                                       |
+| 54  | Chinese Modern  | Noto Sans SC         | Noto Sans SC     | Modern Chinese    | Chinese (Simplified) | fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700                                       |
+| 55  | Hindi Universal | Noto Sans Devanagari | Noto Sans        | Clear Hindi       | Hindi/Devanagari     | fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;700&family=Noto+Sans:wght@400;500 |
+| 56  | Variable Weight | Inter Variable       | Inter Variable   | Flexible, modern  | Performance-critical | fonts.googleapis.com/css2?family=Inter:wght@100..900                                                 |
+| 57  | System Stack    | system-ui            | system-ui        | Native, zero-load | Performance-extreme  | No import needed — use system-ui, -apple-system, BlinkMacSystemFont                                  |
+
+## Tailwind Config Templates
+
+### Serif + Sans Pattern
+
+```js
+module.exports = {
+  theme: {
+    fontFamily: {
+      heading: ["Playfair Display", "Georgia", "serif"],
+      body: ["Inter", "system-ui", "sans-serif"],
+    },
+  },
+};
+```
+
+### Sans + Sans Pattern
+
+```js
+module.exports = {
+  theme: {
+    fontFamily: {
+      heading: ["Poppins", "sans-serif"],
+      body: ["Inter", "system-ui", "sans-serif"],
+    },
+  },
+};
+```
+
+### Mono + Sans Pattern (Dev Tools)
+
+```js
+module.exports = {
+  theme: {
+    fontFamily: {
+      heading: ["JetBrains Mono", "monospace"],
+      body: ["IBM Plex Sans", "sans-serif"],
+      mono: ["JetBrains Mono", "Fira Code", "monospace"],
+    },
+  },
+};
+```
+
+### Next.js Font Optimization Pattern
+
+```tsx
+import { Inter, Playfair_Display } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+})
+
+const playfair = Playfair_Display({
+  subsets: ['latin'],
+  variable: '--font-heading',
+  display: 'swap',
+  weight: ['600', '700'],
+})
+
+// In layout.tsx:
+<html className={`${inter.variable} ${playfair.variable}`}>
+```

package/.merlin-core/skills/general/design-ux-patterns/SKILL.md

@@ -0,0 +1,155 @@
+---
+name: design-ux-patterns
+description: UX pattern intelligence — landing page architectures, chart type selection, forms & feedback, navigation patterns, data visualization, and 133 critical UX guidelines for building production-grade interfaces.
+license: Apache-2.0
+metadata:
+  author: merlin-framework
+  version: "3.0.0"
+  auto_activate: [ux-pattern, landing-page, dashboard-design, conversion-funnel, usability]
+  file_triggers: [*.html, *.tsx, *.jsx, *.vue]
+  tool_reminders: [Select a landing page pattern BEFORE building — match it to the product type, Touch targets must be 44x44px minimum on all interactive elements, Always implement loading states for async operations — never leave the user without feedback]
+---
+
+## Landing Page Pattern Selection
+
+Choose the pattern that matches the product type and conversion goal:
+
+| #   | Pattern                  | Best For                      | Key Sections                                         | Conversion Strategy        |
+| --- | ------------------------ | ----------------------------- | ---------------------------------------------------- | -------------------------- |
+| 1   | Hero + Features + CTA    | SaaS, general products        | Hero, feature grid, pricing, CTA                     | Feature-driven persuasion  |
+| 2   | Hero + Social Proof      | E-commerce, marketplaces      | Hero, testimonials, logos, CTA                       | Trust-driven conversion    |
+| 3   | Feature-Rich Showcase    | Complex products, B2B         | Hero, feature details, comparison, demo CTA          | Detail-driven evaluation   |
+| 4   | Minimal Single Column    | Micro SaaS, simple tools      | Hero, brief description, single CTA                  | Friction-free signup       |
+| 5   | Interactive Product Demo | AI tools, dev tools           | Hero, live demo embed, features, CTA                 | Try-before-buy             |
+| 6   | Trust & Authority        | Finance, healthcare, legal    | Hero, credentials, case studies, compliance badges   | Authority-driven trust     |
+| 7   | Storytelling-Driven      | Brand, travel, lifestyle      | Full-width sections, narrative flow, emotional CTA   | Emotion-driven narrative   |
+| 8   | Video-First              | Media, entertainment, courses | Hero video, benefits, testimonials                   | Visual-first engagement    |
+| 9   | Comparison Table         | B2B, SaaS with tiers          | Hero, competitor/plan comparison, CTA                | Comparison-driven decision |
+| 10  | Lead Magnet              | Newsletters, content, courses | Hero, value prop, email capture, sample content      | Content-gated capture      |
+| 11  | Pricing Page             | SaaS, subscription services   | Plan cards, feature matrix, FAQ, CTA                 | Price-anchored decision    |
+| 12  | Waitlist / Coming Soon   | Pre-launch, beta products     | Hero, teaser, email capture, countdown               | Scarcity-driven signup     |
+| 13  | App Store Style          | Mobile apps                   | Hero with device mockup, features, reviews, download | App-store conversion       |
+| 14  | Bento Grid Showcase      | Design-forward, Apple-style   | Bento grid cards, visual features, minimal text      | Visual-first discovery     |
+| 15  | Funnel 3-Step            | High-intent conversion        | Step 1 hook, Step 2 qualify, Step 3 convert          | Progressive commitment     |
+
+For the complete 30-pattern catalog with section breakdowns, read `references/landing-patterns.md`.
+
+## Chart Type Selection
+
+Match the data goal to the right visualization:
+
+| Data Goal          | Chart Type             | Library Recommendation | Accessibility                   |
+| ------------------ | ---------------------- | ---------------------- | ------------------------------- |
+| Trend over time    | Line chart             | Recharts, Chart.js     | Add data table alt              |
+| Compare categories | Bar chart (vertical)   | Recharts, Nivo         | Color-blind safe palette        |
+| Part-to-whole      | Donut / Pie chart      | Recharts, D3           | Label each segment              |
+| Ranking / sorted   | Horizontal bar         | Recharts, Nivo         | Order by value                  |
+| Correlation        | Scatter plot           | Nivo, D3               | Tooltip on each point           |
+| Distribution       | Histogram / Box plot   | D3, Plotly             | Label axes clearly              |
+| Geographic         | Choropleth map         | D3, Mapbox             | Pattern fills + color           |
+| Flow / funnel      | Sankey / Funnel        | D3, Nivo               | Label each stage                |
+| Progress           | Gauge / Progress bar   | Custom, Recharts       | Numeric + visual                |
+| Hierarchy          | Treemap / Sunburst     | D3, Nivo               | Breadcrumb navigation           |
+| Real-time          | Streaming line         | D3, custom WebSocket   | Update rate indicator           |
+| Comparison matrix  | Heatmap                | Nivo, D3               | Numeric labels in cells         |
+| Financial          | Candlestick            | Lightweight Charts     | OHLC tooltip                    |
+| Network            | Node graph             | D3, Cytoscape          | Focus + zoom controls           |
+| Forecast           | Line + confidence band | D3, Recharts custom    | Distinguish actual vs predicted |
+
+## Critical UX Rules (HIGH Severity)
+
+These rules are non-negotiable for production interfaces:
+
+**Accessibility:**
+
+- Color contrast: 4.5:1 minimum for normal text, 3:1 for large text and UI components
+- Never rely on color alone — use icons, patterns, or text labels alongside color
+- All images need alt text (decorative images: `alt=""`)
+- Heading hierarchy: never skip levels (h1 -> h2 -> h3, not h1 -> h3)
+- Keyboard navigation: all interactive elements reachable via Tab, activatable via Enter/Space
+- Skip link: provide "Skip to content" link as first focusable element
+
+**Touch & Interaction:**
+
+- Touch targets: 44x44px minimum (48x48px recommended) with 8px spacing between targets
+- Focus states: visible focus ring on ALL interactive elements (never `outline: none` without replacement)
+- Hover states: must not cause layout shifts — use transform/opacity, not size changes
+- Loading states: show skeleton/spinner for ANY async operation — never leave blank screen
+- Disabled states: use `aria-disabled` + visual dimming, explain WHY it's disabled
+
+**Forms:**
+
+- Labels: every input MUST have a visible label (not just placeholder)
+- Error messages: display inline near the input, not just as toast notifications
+- Input types: use correct HTML5 types (`type="email"`, `type="tel"`, `type="url"`)
+- Submit feedback: disable button + show spinner during submission, show success/error after
+
+**Responsive:**
+
+- Mobile-first: design for 375px first, then scale up
+- Font size: minimum 16px body text (prevents iOS zoom on input focus)
+- No horizontal scroll: test at all breakpoints, use `overflow-x: hidden` only as last resort
+- Viewport meta: always include `<meta name="viewport" content="width=device-width, initial-scale=1">`
+
+**Performance:**
+
+- Image optimization: use WebP/AVIF with `<picture>` fallbacks, set explicit width/height to prevent CLS
+- Lazy loading: `loading="lazy"` on below-fold images
+- prefers-reduced-motion: wrap all animations in `@media (prefers-reduced-motion: no-preference)`
+- Transition duration: 150-300ms for micro-interactions, never exceed 500ms
+
+## UI Style Quick Reference
+
+Top 15 styles for rapid style selection:
+
+| Style                | Best For                 | Complexity | Accessibility |
+| -------------------- | ------------------------ | ---------- | ------------- |
+| Minimalism           | Corporate, SaaS, content | Low        | WCAG AAA      |
+| Glassmorphism        | SaaS, fintech, modern    | Medium     | Ensure 4.5:1  |
+| Flat Design          | E-commerce, mobile       | Low        | WCAG AAA      |
+| Dark Mode            | Dev tools, dashboards    | Low        | WCAG AAA      |
+| Brutalism            | Portfolio, creative      | Low        | WCAG AAA      |
+| Neumorphism          | Mobile, wellness         | Medium     | Contrast risk |
+| AI-Native UI         | AI products, chatbots    | Low        | WCAG AA       |
+| Bento Grid           | Feature showcase         | Low        | WCAG AA       |
+| Cyberpunk UI         | Gaming, crypto           | Medium     | Custom        |
+| Neubrutalism         | Startups, bold           | Low        | WCAG AAA      |
+| Swiss Modernism      | Corporate, legal         | Low        | WCAG AAA      |
+| Organic Biophilic    | Sustainability, food     | Low        | WCAG AA       |
+| Conversion-Optimized | Landing pages            | Medium     | WCAG AA       |
+| Data-Dense Dashboard | Analytics, BI            | Medium     | Custom        |
+| Editorial Grid       | Magazine, publishing     | Low        | WCAG AA       |
+
+For the full 67-style catalog with all properties, read `references/style-catalog.md`.
+
+## Forms & Feedback (Quick Rules)
+
+The most overlooked form UX issues that make interfaces feel broken:
+
+- **Progressive disclosure** — Show basic fields first; reveal advanced options behind a toggle. Never overwhelm upfront.
+- **Focus management** — After submit error, auto-focus the first invalid field and scroll it into view
+- **Error summary** — For multiple errors, show a summary at the top with anchor links to each field
+- **Form autosave** — Long forms (5+ fields) should auto-save drafts to prevent data loss on navigation
+- **Undo support** — Destructive/bulk actions need a time-limited undo toast, not just a confirmation dialog
+
+For the complete 119-rule guidelines (including 12 advanced form rules), read `references/ux-guidelines.md`.
+
+## Navigation Patterns (Quick Rules)
+
+Navigation mistakes that make apps feel confusing:
+
+- **Bottom nav limit** — Maximum 5 items, always with both icon and text label
+- **Adaptive navigation** — Large screens (≥1024px) use sidebar; small screens use bottom nav or top bar
+- **State preservation** — Back navigation must restore scroll position, filters, and input values
+- **Modal vs navigation** — Modals are for confirmations and self-contained tasks, never for primary user flows
+- **Persistent nav** — Core navigation must remain reachable from deep pages; never hide it entirely
+
+For the complete 20 navigation rules, read `references/ux-guidelines.md`.
+
+## Charts & Data Visualization
+
+For chart type selection, see the table above. For comprehensive data visualization UX rules (30 rules covering accessibility, responsive behavior, interaction patterns, and anti-patterns), read `references/charts-data-guidelines.md`.
+
+## Pre-Delivery Checklist
+
+For an expanded professional UI checklist (37 items across visual quality, interaction, light/dark mode, layout, and accessibility), read `references/professional-ui-checklist.md`.

package/.merlin-core/skills/general/design-ux-patterns/references/charts-data-guidelines.md

@@ -0,0 +1,197 @@
+# Charts & Data Visualization Guidelines (30 Rules)
+
+> Reference data for the design-ux-patterns skill. Rules for accessible, performant, and user-friendly data visualization.
+> Source: Cherry-picked from ui-ux-pro-max (nextlevelbuilder, v2.2.1) — adapted for Merlin ecosystem.
+
+## Chart Type Selection (1-3)
+
+### 1. Match Chart to Data Type
+
+- **Do:** Use line charts for trends over time, bar charts for category comparison, donut/pie for part-to-whole, scatter for correlation
+- **Don't:** Use pie charts for comparing values or line charts for categorical data — match the chart to what the data communicates
+- **Severity:** High
+
+### 2. Accessible Color Palettes
+
+- **Do:** Use accessible color palettes that work for colorblind users. Supplement color with patterns, textures, or shapes.
+- **Don't:** Rely on red/green distinction or use color alone to differentiate data series
+- **Severity:** Critical
+
+### 3. Data Table Alternative
+
+- **Do:** Provide a table alternative for every chart — charts alone are not screen-reader friendly
+- **Don't:** Ship charts without any text/table fallback for users who can't see the visualization
+- **Severity:** High
+- **Code:** `<details><summary>View data table</summary><table>...</table></details>`
+
+## Labels & Readability (4-10)
+
+### 4. Legend Visibility
+
+- **Do:** Always show the legend. Position it near the chart, not detached below a scroll fold.
+- **Don't:** Hide the legend or place it where users must scroll to find it
+- **Severity:** High
+
+### 5. Axis Labels
+
+- **Do:** Label both axes with units and readable scale. Use abbreviations for large numbers (1K, 1M).
+- **Don't:** Truncate, rotate, or cram axis labels on small screens — simplify the scale instead
+- **Severity:** High
+
+### 6. Axis Readability
+
+- **Do:** Maintain readable tick spacing. Auto-skip ticks on small screens to prevent overlap.
+- **Don't:** Render all ticks regardless of space — cramped labels are unreadable
+- **Severity:** Medium
+
+### 7. Number Formatting
+
+- **Do:** Use locale-aware formatting for numbers, dates, and currencies on axes and labels
+- **Don't:** Display raw numbers (1000000) or ambiguous date formats (01/02/03)
+- **Severity:** Medium
+
+### 8. Direct Labeling
+
+- **Do:** For small datasets (≤5 series), label values directly on the chart to reduce eye travel to legend
+- **Don't:** Force users to match colors between distant legend and chart for simple datasets
+- **Severity:** Low
+
+### 9. Time Scale Clarity
+
+- **Do:** Time series charts must clearly label time granularity (day/week/month) and offer switching between scales
+- **Don't:** Show time axis without indicating granularity — users can't interpret the data correctly
+- **Severity:** Medium
+
+### 10. Legend Interactive
+
+- **Do:** Make legends clickable to toggle series visibility — helps users focus on specific data
+- **Don't:** Use static legends when multiple series overlap and obscure each other
+- **Severity:** Low
+
+## Accessibility (11-17)
+
+### 11. Pattern & Texture
+
+- **Do:** Supplement color with patterns (hatching, dots, dashes) so data is distinguishable without color
+- **Don't:** Differentiate data series by color alone — fails WCAG and excludes colorblind users
+- **Severity:** Critical
+
+### 12. Contrast for Data Elements
+
+- **Do:** Data lines/bars vs background must meet ≥3:1 contrast. Data text labels must meet ≥4.5:1.
+- **Don't:** Use light-colored data elements on light backgrounds or dark on dark
+- **Severity:** High
+
+### 13. Focusable Elements
+
+- **Do:** Interactive chart elements (points, bars, slices) must be keyboard-navigable with Tab/Arrow keys
+- **Don't:** Make chart elements mouse-only — keyboard users are locked out of the data
+- **Severity:** High
+
+### 14. Screen Reader Summary
+
+- **Do:** Provide a text summary or `aria-label` describing the chart's key insight (e.g., "Revenue grew 23% in Q4")
+- **Don't:** Leave charts without any accessible description — screen readers see nothing
+- **Severity:** High
+- **Code:** `<figure role="img" aria-label="Revenue trend: 23% growth in Q4 2025"><canvas id="chart"></canvas></figure>`
+
+### 15. Tooltip Keyboard Access
+
+- **Do:** Tooltip content must be keyboard-reachable — not hover-only. Use focus events to trigger tooltips.
+- **Don't:** Rely on mouse hover alone for showing data values in charts
+- **Severity:** High
+
+### 16. Sortable Table State
+
+- **Do:** Data tables must support sorting with `aria-sort` indicating current sort state and direction
+- **Don't:** Implement visual sort indicators without accessible state announcement
+- **Severity:** Medium
+- **Code:** `<th aria-sort="ascending">Revenue</th>`
+
+### 17. Animation Respects Motion
+
+- **Do:** Chart entrance animations must respect `prefers-reduced-motion`. Data should be readable immediately.
+- **Don't:** Gate data comprehension behind mandatory animation that can't be skipped
+- **Severity:** Medium
+
+## Responsive & Performance (18-23)
+
+### 18. Responsive Charts
+
+- **Do:** Charts must reflow or simplify on small screens — use horizontal bar instead of vertical, fewer ticks, smaller legends
+- **Don't:** Render desktop-sized charts on mobile that require horizontal scrolling
+- **Severity:** High
+
+### 19. Large Dataset Handling
+
+- **Do:** For 1000+ data points, aggregate or sample the data. Provide drill-down for detail.
+- **Don't:** Render all data points at once — it's slow, cluttered, and incomprehensible
+- **Severity:** Medium
+
+### 20. Loading State
+
+- **Do:** Show skeleton or shimmer placeholder while chart data loads. Include axis frame to indicate what's coming.
+- **Don't:** Show an empty blank area or only a spinner with no context while chart loads
+- **Severity:** Medium
+
+### 21. Empty Data State
+
+- **Do:** Show meaningful empty state when no data exists — "No data yet" with guidance or action to generate data
+- **Don't:** Render empty axes, a blank chart area, or a broken visualization when there's no data
+- **Severity:** Medium
+
+### 22. Tooltip on Interact
+
+- **Do:** Provide tooltips with exact values on hover (web) or tap (mobile). Include data point context.
+- **Don't:** Force users to estimate values from axis position alone — exact numbers matter
+- **Severity:** High
+
+### 23. Touch Target for Charts
+
+- **Do:** Interactive chart elements (data points, pie slices) must have ≥44px tap area. Expand on touch if needed.
+- **Don't:** Render tiny data points on mobile that require pixel-perfect taps
+- **Severity:** High
+
+## Anti-Patterns (24-30)
+
+### 24. No Pie Overuse
+
+- **Do:** Limit pie/donut charts to ≤5 categories. For more categories, switch to horizontal bar chart.
+- **Don't:** Use pie charts with 8+ tiny slices — they become unreadable and impossible to compare
+- **Severity:** Medium
+
+### 25. Data Density
+
+- **Do:** Limit information density per chart — one chart, one message. Split complex data into multiple charts.
+- **Don't:** Pack 5 different metrics into one chart hoping the user will figure it out
+- **Severity:** Medium
+
+### 26. Trend Emphasis
+
+- **Do:** Emphasize data trends over decoration. Clean lines, minimal shadows, focused visual hierarchy.
+- **Don't:** Add heavy gradients, 3D effects, or shadows that obscure the actual data
+- **Severity:** Medium
+
+### 27. Gridline Subtlety
+
+- **Do:** Grid lines should be low-contrast (e.g., gray-200) so they guide the eye without competing with data
+- **Don't:** Use dark or heavy grid lines that visually dominate the data series
+- **Severity:** Low
+
+### 28. Error State
+
+- **Do:** Data load failure must show a clear error message with retry action, not a broken or empty chart
+- **Don't:** Silently fail or show broken axes when the API call fails
+- **Severity:** High
+
+### 29. Export Option
+
+- **Do:** For data-heavy products, offer CSV or image export of chart data for offline analysis
+- **Don't:** Lock users into on-screen-only data viewing when they need to share or analyze further
+- **Severity:** Low
+
+### 30. Drill-Down Consistency
+
+- **Do:** Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb
+- **Don't:** Let users drill into chart details with no way to navigate back to the overview
+- **Severity:** Medium