Treehaus Builder

Build a complete, production-ready website for a client or business. This skill collects all the information needed, then builds and deploys the site.

Installation

npx skills add treehausdev/skills

Or copy this file into your project's .claude/skills/ , .cursor/skills/ , or .agents/skills/ directory.

Agent Compatibility

• Claude Code (terminal/desktop): Use AskUserTool to prompt the user for each question below. Do not batch questions — ask one at a time and wait for the response.

• Cursor / Windsurf / other agents: Ask questions conversationally in chat, one at a time.

• All agents: Wait for the user's answer before moving to the next question. Be conversational, not robotic.

Phase 1 — Intake

Ask these questions one at a time. Wait for the answer before proceeding.

Business Basics

• What's the business name?

• What do they do? (One sentence — e.g. "Roofing contractor in Orlando" or "Thai-fusion food truck in Austin")

• What's their current website URL? (If they have one. "None" is fine.)

• Who's the main contact? (Name, email, phone — for the site footer/contact page)

• What's their address? (Physical location, or "online only")

• What are their hours? (Or "by appointment" / "not applicable")

Design Direction

• Do they have a logo? If yes, ask for the file or a URL where you can find it. If no, note that you'll use their business name as text.

• What are their brand colors? If they don't know, say: "I'll pick colors that fit your industry. I can always change them."

• Any websites they like the look of? (Inspiration URLs. Even outside their industry is fine. If none, that's OK.)

• Any specific vibe? (e.g. "clean and modern", "warm and friendly", "bold and edgy", "professional and trustworthy"). If they're unsure, suggest options based on their industry.

Content & Pages

What pages do they need? Suggest a default set based on their business type:

• Service business: Home, About, Services (with sub-pages), Contact, Reviews

• Restaurant: Home, Menu, About, Locations, Contact, Catering

• E-commerce: Home, Shop, About, Contact, FAQ, Shipping/Returns

• Portfolio/Creative: Home, Work/Portfolio, About, Contact, Blog

• Let them add or remove from the suggestion.

Do they have content ready? (About text, service descriptions, menu items, etc.) If not, say: "I'll write it based on what you've told me. You can edit later."

Do they need a contact form? (Almost always yes. Confirm where submissions should go — email address.)

Any special features? (Online booking, menu with prices, photo gallery, blog, testimonials, FAQ, multi-language, etc.)

Deployment

• What should the project URL be? Suggest: business-name.vercel.app for now, with option to connect a custom domain later.

• Do they have a domain? If yes, get it. If not, note it for later.

Phase 2 — Confirm the Brief

Present a clean summary:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROJECT BRIEF ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Business: [name] Industry: [what they do] Current site: [url or "None"] Contact: [name, email, phone] Location: [address] Hours: [hours]

Logo: [yes/no, file location] Colors: [hex codes or "auto"] Inspiration: [urls] Vibe: [description]

Pages: [list] Content: [ready / needs writing] Contact form: [yes → email] Special features: [list]

Deploy to: [url] Domain: [domain or "none yet"] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Ask: "Does this look right? Any changes before I start building?"

Phase 3 — Build

Once the user approves:

Check if GitHub + Vercel are set up. Run gh auth status and vercel whoami . If either fails, tell the user: "You need the github-vercel-setup skill first. Run npx skills add treehausdev/skills and select it."

Create the project — new Next.js app, GitHub repo, linked to Vercel (see ./github-vercel-setup skill for the exact steps).

Build the site using the brief:

• app/layout.tsx — metadata, fonts (Google Fonts — distinctive, not Inter/Arial), global styles

• app/page.tsx — homepage with hero, value props, CTA

• app/globals.css — Tailwind config with brand colors

• Individual page files for each page in the brief

• app/components/ — Header, Footer, ContactForm, shared components

• public/ — logo and assets

Write the content. If user didn't provide it, generate it:

• Specific to THEIR business (not generic)

• Concise — short paragraphs, bullet points

• SEO-friendly — natural keywords, good meta descriptions

Mobile-first. Everything works on phones first, scales up to desktop.

Deploy. Push to GitHub → Vercel auto-deploys → share live URL.

Present. Share the URL: "Here's your site — take a look and let me know what to change."

Design Principles

• No generic AI slop. Every site should feel designed for THIS specific business.

• Typography matters. Pair a distinctive display font with a clean body font. Never Inter/Arial/system defaults.

• Color with purpose. 2-3 colors max. One dominant, one accent, one neutral.

• Whitespace is a feature. Don't cram. Let things breathe.

• Speed is non-negotiable. Next.js + Tailwind + minimal client components. No bloat.

More Skills

Browse the full catalog at https://treehaus.dev/skills