Website Creator Skill

A skill for Claude (Cowork / Claude Code) that guides the full website creation process — from discovery and niche research through design, copy, SEO, and launch.

What it does

Instead of jumping straight to code, this skill runs a structured seven-phase process:

1. Discovery — Goals, audience, imagery mode, existing brand
2. Niche Research — Competitor analysis, positioning directions, design aesthetic
3. Architecture — Pages, navigation, URL structure, sitemap
4. Design System — Style guide (colors, type, spacing, components) as a live HTML file
5. Mockups — Real HTML pages using Tailwind CSS + Lucide Icons, iterable in browser
6. Copy & Content — SEO-optimized writing for every page
7. Schema & Technical SEO — JSON-LD structured data, meta tags, rich results

The output is a folder of plain HTML files that open by double-clicking — no server, no install, no terminal. Ready to publish via Netlify Drop in two minutes.

Tech stack

• Tailwind CSS via CDN
• Lucide Icons via CDN
• Google Fonts via CDN
• GSAP via CDN (when animation is needed)
• Unsplash for placeholder imagery

No frameworks. No package managers. No build step.

Animation toolkit

Six approved techniques, selected based on a MOTION_INTENSITY dial (1–10) set per project:

Technique	Dial	Library
CSS gradient text	2–5	None
Staggered line reveal	4–6	GSAP
Clip-path curtain	4–6	GSAP
Word-by-word reveal	5–7	GSAP
Pinned scroll section	7–9	GSAP + ScrollTrigger
Scroll-linked color shift	7–9	GSAP + ScrollTrigger

Full implementation code for each technique is in references/design-system.md.

Installation

1. Download website-creator.skill
2. Open Cowork
3. Go to Plugins → Install from file → select website-creator.skill

Once installed, trigger it by asking Claude to build, plan, or redesign a website.

File structure

website-creator-skill/
  SKILL.md                        ← Main skill prompt and phase instructions
  references/
    design-system.md              ← Design dials, animation toolkit, component specs
    architecture.md               ← Site type templates, navigation patterns, URL structure
    copy-frameworks.md            ← Headline formulas, CTA patterns, page templates
    schema-examples.md            ← JSON-LD structured data for all common site types
  website-creator.skill           ← Installable package (zip of the above)
  README.md                       ← This file

Editing the skill

Edit the .md source files directly, then repackage:

cd website-creator-skill
zip -r website-creator.skill SKILL.md references/

Then reinstall the updated .skill file in Cowork.

Inspiration

Built with reference to these excellent community skills:

• Marketing Skills by Corey Haines — marketing frameworks, conversion optimization, and copywriting skills
• Taste Skill by Leonxlnx — design quality and frontend aesthetics guidance
• UI UX Pro Max by nextlevelbuilder — UI/UX design intelligence across platforms