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

treehaus-builder