awannaphasch2016/template-cloning

Template Cloning Skill

Focus: Clone & customize approach for building UI from existing templates

Source: Landing page implementation (2026-01-14) using Shadcn template with jousefmurad.com style

---

When to Use This Skill

Use template-cloning when:

• Building standard UI patterns (landing page, dashboard, admin panel)
• Reference design available to clone
• Time-to-value prioritized over custom architecture
• Tech stack matches available templates (React, Vue, etc.)

DO NOT use for:

• Highly custom applications with unique patterns
• When no suitable template exists
• Projects requiring specific frameworks not available in templates
• When learning the fundamentals is the goal

---

Core Principle

Clone & Customize > Build From Scratch

Starting from working code is faster than building from zero. The skill is knowing WHAT to customize and HOW to extract design tokens from reference sites.

---

Quick Decision Tree

Need UI?
├── Standard pattern (landing, dashboard)?
│   ├── Reference design available?
│   │   └── YES → Use this skill (template-cloning)
│   └── NO reference → Build from scratch or use generic template
└── Custom/unique pattern?
    └── Build from scratch (no template advantage)

---

Workflow Overview

1. RESEARCH     → Find templates matching tech stack
2. ANALYZE      → Extract design tokens from reference site
3. CLONE        → Clone template, strip placeholder content
4. CONFIGURE    → Create centralized content config
5. THEME        → Apply extracted design tokens (colors, fonts)
6. CUSTOMIZE    → Update components to use config
7. VERIFY       → Build + visual check

See WORKFLOW.md for detailed steps.

---

File Organization

.claude/skills/template-cloning/
├── SKILL.md          # This file - overview and decision tree
├── WORKFLOW.md       # Step-by-step workflow
├── STYLE-EXTRACTION.md # How to extract design tokens from reference sites
└── CONFIG-PATTERN.md # Config-driven content pattern

---

Key Patterns

1. Config-Driven Content

All editable content in single file:

// src/config/content.ts
export const siteConfig = {
  name: "Company Name",
  tagline: "Your value proposition",
  cta: { text: "Get Started", href: "/signup" }
};

export const services = [...];
export const testimonials = [...];
export const faqItems = [...];

Benefits:

• Non-developers can edit content
• Content changes don't touch components
• Single source of truth
• Easy A/B testing

See CONFIG-PATTERN.md for full pattern.

2. Style Extraction

Extract exact values from reference sites:

• Colors (HSL for CSS variables)
• Fonts (family, weights, letter-spacing)
• Spacing (section padding, gaps)
• Component patterns (layouts, cards)

Tools: Browser DevTools, Playwright scripts

See STYLE-EXTRACTION.md for methods.

3. Theme Customization

Apply extracted tokens via CSS variables:

:root {
  --background: 0 0% 5.5%;      /* Near black */
  --foreground: 38 25% 90%;     /* Off-white */
  --primary: 38 35% 75%;        /* Gold accent */
}

Pattern: HSL values enable easy theming with opacity modifiers.

---

Template Sources

React/Next.js

• Shadcn Landing Page (1.8k stars) - React + Tailwind + shadcn/ui
• Cruip - Premium quality, various categories
• Next SaaS Starter - Full SaaS boilerplate
• Page UI - Customizable blocks

Vue

• Nuxt UI - Vue 3 component library
• Vuetify - Material Design components

General

• Tailwind UI (paid) - Official Tailwind templates
• Open source alternatives on GitHub

---

Quality Checklist

Before completing template clone:

• [ ] All placeholder content replaced with config
• [ ] Theme colors match reference site
• [ ] Fonts loaded correctly (check Network tab)
• [ ] Responsive at mobile/tablet/desktop
• [ ] Build succeeds without TypeScript errors
• [ ] No placeholder images remain
• [ ] Links point to correct destinations
• [ ] Meta tags updated (title, description, OG)

---

Common Pitfalls

1. Partial Customization

Problem: Some components still have placeholder content Solution: Grep for "Lorem", "example", placeholder URLs

2. Missing Font Loading

Problem: Fonts declared in CSS but not imported Solution: Verify font files load in Network tab

3. Hardcoded Content

Problem: Content scattered across components Solution: Centralize ALL editable content in config file

4. Broken Responsive Design

Problem: Customizations break mobile layout Solution: Test at 320px, 768px, 1024px, 1440px widths

---

References

• Implementation Guide: Config-Driven Content
• Related Skill: frontend-design - UI design patterns
• Example: landing-page/ directory (2026-01-14 implementation)