Get all four, US$49

Claude skills, made for the job you actually do.

We build and test installable skills one profession at a time. The first series is for web designers.

Shop web design skillsRequest a skill
BeforeAfter

Drag to compare. Left: a typical generated landing page. Right: the same product rebuilt by following three of the web design skills. Both are live pages: before, after.

Series one: web design

Four skills that take a site from brief to launch.

Build the page, make it look cared for, make it move, then check it before it goes live. Each skill ends by testing its own work.

Landing Page Builder

Turn a five-line brief into a finished landing page with real copy and one clear action.

  • Asks once. Five facts: offer, buyer, pain, proof, action. It takes what it can from your project and asks only for the rest, in one message.
  • Copy before layout. Headline in the buyer's words, one label per action, banned filler words, no invented testimonials or stats.
  • Eight sections, cut to fit. Hero, problem, how it works, what you get, proof, price, FAQ, final call. Sections without real content get cut.
US$19BuyDetails
landing-page-builder/SKILL.md
## 2. Write the copy before any layout
- Headline (max 10 words): the outcome the buyer gets,
  in their words. Test: could a competitor put the same
  headline on their site? If yes, rewrite it.
- Button labels say what happens: "Buy the kit, US$19",
  "Book a 20-min call". One label per action.
- Numbers only when they are real and sourced.

Hand-Built Look

Find what makes a site look AI-made, score it, and fix the worst of it without breaking SEO.

  • Audit first. Screenshots at 1280px and 375px, then a keep list: brand colour, URLs, nav labels, form fields, analytics ids.
  • 21-point score. Visual, layout, copy and motion fingerprints. 0 to 4 looks cared for, 10+ looks generated.
  • Fix in order. Copy, then type, colour, rhythm, visuals, motion. It stops when the score drops under 5.
US$19BuyDetails
hand-built-look/SKILL.md
### Fingerprint checklist
Layout
- (x2) A row of three identical cards, each an icon,
  a title and two lines.
- An uppercase, letter-spaced label above nearly
  every section heading.
Copy
- (x2) Invented testimonials, logos of companies that
  are not customers, or made-up stats.

Premium Motion

Real GSAP and Lenis motion in one committed style, with three moments and a reason for each.

  • One style. Kinetic type, blueprint, neo-brutalism, glassmorphism and 16 more, each with the motion that suits it.
  • Three moments. Entrance, one scroll pattern, one interaction. Each written down with its reason, or dropped.
  • Real libraries. Pinned, checked CDN links for plain HTML, or npm and useGSAP for React and Next.js.
US$19BuyDetails
premium-motion/SKILL.md
## 3. Pick three moments, no more
1. Entrance: the hero, once, on load.
2. Scroll pattern: one reveal pattern reused
   for every section.
3. Interaction: one hover or click response.

Write each as one sentence with its reason.
If a moment has no reason, drop it.

Launch Check

Speed, SEO, share previews, accessibility, links, forms and headers in one pass, with a ready-or-not report.

  • Speed. Lighthouse or PageSpeed: LCP, CLS, page weight, hero image, fonts, render-blocking scripts.
  • Search and sharing. Titles, descriptions, canonical, sitemap, robots, noindex mistakes, Open Graph image that actually loads.
  • People. Contrast, keyboard focus, labels, reduced motion, tap targets, no sideways scroll at 375px.
US$15BuyDetails
launch-check/launch-report.md
# Launch check: yoursite.com
Ready to launch: NO (2 blockers)

## Blockers (must fix)
- [ ] /pricing returns 404 from the nav: fix the
      link in header.html
- [ ] LCP 4.6s on mobile: hero.png is 1.9 MB,
      convert to WebP and add fetchpriority="high"
(example output)

How a skill gets made.

Watch the job

We start from what people in one profession do by hand every week, and what they already pay to fix.

Write the playbook

A plain-English SKILL.md: when to use it, the steps, the rules, and what to check at the end.

Test on real work

We run it on real pages and files. The before/after above is one of those tests.

Ship with a guide

A zip, install steps for Claude Code and Claude.ai, and support if it doesn't work as described.

Not a web designer? Tell us your job.

The next series comes from requests. Describe a task you repeat every week and we'll consider it for a skill. We only email you if it gets built.

The whole web design series for US$49.

Web Skills Bundle

Landing Page Builder, Hand-Built Look, Premium Motion and Launch Check. Build the page, make it look cared for, make it move, then check it before you launch.

  • Landing Page BuilderUS$19
  • Hand-Built LookUS$19
  • Premium MotionUS$19
  • Launch CheckUS$15
US$49
US$72 bought one by one
Get all four

Questions

What is a skill?

A folder with a SKILL.md file of instructions. Claude reads it when your request matches, so it follows the same tested process every time instead of improvising.

Where does it work?

Claude Code (unzip into ~/.claude/skills/) and Claude.ai on web and desktop (Settings, Capabilities, Skills, upload). Skills need a plan with code execution turned on; Claude Code covers most people building sites.

Which frameworks?

Plain HTML and CSS, React and Next.js. The skills read your project first and match what is there.

Can I use them on client work?

Yes, on unlimited personal and client projects. Please don't resell or share the files.

What if it doesn't work?

If a skill is faulty or doesn't do what its page describes, email us within 14 days and we fix it or refund you. Details in the refund policy. Refund policy.