Claude Code Website Skill

A Claude Code skill that builds a complete brand website with blog from scratch. One conversation, zero to deployed.

What It Does

Tell Claude Code to "build me a website" and this skill handles the entire flow:

1. Collects your brand info (name, tagline, services)
2. Scaffolds a Next.js 16 project with Tailwind CSS 4
3. Creates all pages: homepage, about, services, blog
4. Sets up MDX blog system with frontmatter parsing
5. Builds and pushes to GitHub
6. Guides you through Vercel deployment and DNS setup

Output

A production-ready website with:

• Server-rendered pages (Next.js App Router)
• MDX blog with reading time, tags, and date sorting
• Responsive design (mobile-first)
• SEO metadata and Open Graph tags
• Clean, minimal styling with Tailwind CSS 4

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Styling	Tailwind CSS 4
Content	MDX + gray-matter + next-mdx-remote
Language	TypeScript
Hosting	Vercel
DNS	Cloudflare

Installation

Copy the skill into your Claude Code project:

mkdir -p .claude/skills/create-website
cp SKILL.md .claude/skills/create-website/SKILL.md

Or clone this repo and copy the file:

git clone https://github.com/vjvan/claude-code-website-skill.git
cp claude-code-website-skill/SKILL.md your-project/.claude/skills/create-website/SKILL.md

Usage

In Claude Code, say any of:

• "build me a website"
• "create a new website"
• "I need a brand website with a blog"

Claude will ask for your brand details, then build everything.

Project Structure Generated

app/
  layout.tsx              # Site layout with SEO metadata
  page.tsx                # Homepage (hero, services, CTA)
  about/page.tsx          # About page
  services/page.tsx       # Services page
  blog/page.tsx           # Blog listing
  blog/[slug]/page.tsx    # Blog post (MDX rendered)
components/
  layout/                 # Header, Footer
content/
  blog/                   # MDX blog posts
lib/
  mdx.ts                  # MDX utilities

Cost

Service	Cost
Vercel Hobby	Free
Cloudflare DNS	Free
GitHub	Free
Domain	~$10-15/year

Total: ~$10-15/year (domain only).

Deployment SOP

The sop/ directory contains a detailed step-by-step deployment guide covering:

• Domain registration (Cloudflare or GoDaddy)
• Vercel project setup and custom domain
• Cloudflare DNS configuration
• Google Search Console and Analytics
• Content publishing workflow

Known Issues

• gray-matter parses frontmatter dates as Date objects. The skill handles conversion to strings for rendering.
• Cloudflare proxy must be disabled (DNS only) to avoid SSL conflicts with Vercel.
• Blog post tag arrays need explicit (tag: string) type annotation in .map() calls.

License

MIT