{"slug":"design-router","title":"design-router","tags":["site-building","frontend","templates","routing"],"agent_summary":"Select the right UI template library for any build. Decision tree: Tailwind Plus vs Aceternity vs Cruip vs shadcn-blocks vs Elementor. 6,904+ pre-built files. Check before building anything from scratch.","trigger_phrases":["design-router","which template","design template","template router","pick a template","ui template selection","hero section template","pricing section template","start from template","don't build from scratch"],"runnable":false,"markdown":"**Trigger:** Use FIRST before any new UI build. Checks if a template or component already exists. 6,904+ pre-built files across 4 frameworks.\n\n### Decision Tree\n\n| Building... | Load This Skill | Framework |\n|---|---|---|\n| Polished Tailwind sections (hero, pricing, CTA, features) | `/tailwind-plus-ui` | React + Tailwind + Headless UI |\n| Animated/flashy marketing pages, dark-mode landing pages | Aceternity UI | React + Tailwind + Framer Motion |\n| Full site scaffold (SaaS, portfolio, docs, fintech, podcast) | Cruip templates | Next.js + Tailwind |\n| shadcn/ui components (dashboards, forms, tables, charts) | `/shadcn-blocks` | Next.js + shadcn/ui |\n| WordPress client site (any service niche) | Elementor templates | WordPress + Elementor Pro |\n\n### Core Rules\n\n1. NEVER build a hero, pricing section, CTA, feature grid, or testimonial from scratch — 50+ pre-built options exist\n2. NEVER scaffold a new Next.js marketing site from zero — start from Cruip or Aceternity\n3. NEVER build a WordPress service site without checking Elementor kits first — 57 niche-specific kits\n4. Copy and modify > build from scratch — these are paid, production-quality templates\n\n### Steps\n\n1. Identify what's being built — section type, site type, tech stack\n2. Match to the decision tree above\n3. Load the relevant skill to get specific component paths\n4. Locate the template in installed files\n5. Adapt the template — never build from scratch when a match exists\n\n### Installed Paths\n\n- **ui-blocks (ready to use):** `D:\\ClaudeDev\\00_GITHUB\\_working-on\\Templates\\ui-blocks\\`\n- **Zip backups:** `E:\\LOC\\Design Templates\\`\n- **Backup installed:** `E:\\LOC\\Design Templates\\ui-blocks-installed\\`\n\n### Examples\n\n**New SaaS marketing site:** Load Cruip templates, find the SaaS scaffold, adapt it.\n\n**Add a pricing section:** Load `/shadcn-blocks` or `/tailwind-plus-ui`, locate pricing component, copy and adapt. 10 minutes instead of 2 hours.\n\n**WordPress plumbing client:** Load Elementor templates, find the plumbing niche kit, import and customize.\n\n---\n","html":"

Trigger: Use FIRST before any new UI build. Checks if a template or component already exists. 6,904+ pre-built files across 4 frameworks.

\n

Decision Tree

\n

| Building... | Load This Skill | Framework |\n|---|---|---|\n| Polished Tailwind sections (hero, pricing, CTA, features) | /tailwind-plus-ui | React + Tailwind + Headless UI |\n| Animated/flashy marketing pages, dark-mode landing pages | Aceternity UI | React + Tailwind + Framer Motion |\n| Full site scaffold (SaaS, portfolio, docs, fintech, podcast) | Cruip templates | Next.js + Tailwind |\n| shadcn/ui components (dashboards, forms, tables, charts) | /shadcn-blocks | Next.js + shadcn/ui |\n| WordPress client site (any service niche) | Elementor templates | WordPress + Elementor Pro |

\n

Core Rules

\n
    \n
  1. NEVER build a hero, pricing section, CTA, feature grid, or testimonial from scratch — 50+ pre-built options exist
    2. \n
  2. NEVER scaffold a new Next.js marketing site from zero — start from Cruip or Aceternity
    3. \n
  3. NEVER build a WordPress service site without checking Elementor kits first — 57 niche-specific kits
    4. \n
  4. Copy and modify > build from scratch — these are paid, production-quality templates
    5. \n
\n

Steps

\n
    \n
  1. Identify what's being built — section type, site type, tech stack
    2. \n
  2. Match to the decision tree above
    3. \n
  3. Load the relevant skill to get specific component paths
    4. \n
  4. Locate the template in installed files
    5. \n
  5. Adapt the template — never build from scratch when a match exists
    6. \n
\n

Installed Paths

\n\n

Examples

\n

New SaaS marketing site: Load Cruip templates, find the SaaS scaffold, adapt it.

\n

Add a pricing section: Load /shadcn-blocks or /tailwind-plus-ui, locate pricing component, copy and adapt. 10 minutes instead of 2 hours.

\n

WordPress plumbing client: Load Elementor templates, find the plumbing niche kit, import and customize.

\n
\n"}