S
Site Building SOPKnowledge Base
Search
← All topics

design-router

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.

site-buildingfrontendtemplatesrouting
Agent 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

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

Decision Tree

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

Core Rules

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

Steps

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

Installed Paths

  • ui-blocks (ready to use): D:\ClaudeDev\00_GITHUB\_working-on\Templates\ui-blocks\
  • Zip backups: E:\LOC\Design Templates\
  • Backup installed: E:\LOC\Design Templates\ui-blocks-installed\

Examples

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

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

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