Customize Template Skill

Customize this template for a new project by updating branding, content, and configuration.

Trigger

Use this skill when: user says "customize", "brand", "personalize", "setup for [project name]", or "configure template"

Workflow

Step 1: Gather Information

Ask the user for:

• •App/Company Name: What should we call this app?
• •Tagline: A short, catchy phrase (e.g., "Build faster, ship sooner")
• •Description: 2-3 sentence description of what the app does
• •Primary Color: Brand color preference (or let them pick from presets)
• •Logo: Do they have a logo file to add?

Step 2: Update Site Config

Edit lib/config/site.ts:

export const siteConfig = {
  name: "[USER'S APP NAME]",
  tagline: "[USER'S TAGLINE]",
  description: "[USER'S DESCRIPTION]",
  // ... update other fields
}

Step 3: Update SEO Config

Edit lib/seo/config.ts:

• •Update siteName
• •Update siteDescription
• •Update twitterHandle if provided
• •Update url for production

Step 4: Update Metadata

Ensure app/layout.tsx uses the updated config values.

Step 5: Update Legal Pages

In app/privacy/page.tsx and app/terms/page.tsx:

• •Replace "Your Company" with actual company name
• •Update contact email addresses
• •Review and customize policy content

Step 6: Update Marketing Content

Go through each marketing page:

• •/ - Update hero, features, testimonials, FAQ
• •/pricing - Update pricing tiers
• •/about - Update company story and values
• •/contact - Update contact information

Step 7: Update Colors (Optional)

If user wants custom colors, edit styles/globals.css:

:root {
  --primary: [HUE] [SATURATION]% [LIGHTNESS]%;
  /* Update other color variables */
}

Step 8: Update Logo

If user provides a logo:

1. •Save to public/logo.svg (or appropriate format)
2. •Update public/favicon.ico
3. •Update public/apple-touch-icon.png
4. •Update Open Graph image

Step 9: Verify Changes

Run pnpm build to ensure no errors. Test in browser: pnpm dev

Files to Update

• •lib/config/site.ts - Main configuration
• •lib/seo/config.ts - SEO settings
• •app/layout.tsx - Root layout metadata
• •app/privacy/page.tsx - Privacy policy
• •app/terms/page.tsx - Terms of service
• •app/about/page.tsx - About page content
• •styles/globals.css - Colors (optional)
• •public/ - Logo and favicon assets

Tips

• •Always run pnpm build after making changes
• •Test both light and dark modes
• •Check mobile responsiveness
• •Verify all links work