// /skills

Hakuto Skills for Claude Code

Browse on GitHub

Building

Generate the site, write the copy, and add the sections you need.

/website-builder

Website Builder

The orchestrator. Asks only about what your brief leaves open, proposes two or three design directions, and builds a style preview you approve before it writes a single page. Every decision lands in a spec file, so later pages stay consistent.

Try it

"Build me a SaaS landing page"

/section-blog

Blog Section

Adds a complete blog system with listing pages, dynamic post routes, and two layout options: standard single-column for articles and flexible full-width for visual content. Uses Astro content collections with proper frontmatter schemas and category/author archives.

Try it

"Add a blog to the site"

/section-docs

Docs Section

Adds a technical documentation section with sidebar navigation, search via Pagefind, and auto-generated table of contents. Uses its own minimal design system (monochrome plus blue links) so docs stay readable regardless of your main site's aesthetic.

Try it

"Add documentation pages"

/section-form

Form Section

Builds accessible, validated forms using React islands with Zod schemas. Contact forms, newsletter signups, and waitlists with field-level validation on blur, proper ARIA attributes, and submission to a Cloudflare Worker endpoint.

Try it

"Add a contact form"

/brand-designer

Brand Designer

Generates color palettes using real color theory: complementary, triadic, or analogous schemes based on your design language. Give it a hex code, a color name, or a logo to extract from, and it produces a full palette with proper contrast ratios.

Try it

"Use my brand color #3B82F6"

/professional-copywriter

Professional Copywriter

Writes conversion-optimized website copy: benefit-driven headlines, scannable structure, clear CTAs. Knows what to generate when content is missing, what to expand from bullet points, and what to leave untouched when you've written it yourself.

Try it

"Write copy for the pricing page"

/fonts

Fonts

Wires custom fonts through Astro's Fonts API instead of @import or @font-face, so fonts are served from your own site, preloaded, and paired with metric-matched fallbacks that keep the layout from jumping. Works with Google Fonts, Fontsource, or local files.

Try it

"Use Sora for headings"

Testing

Report-only audits that surface issues. You decide what to fix.

/hakuto-review

Hakuto Review

A report-only source audit that complements SEO Audit. Checks src/ against the rules in CLAUDE.md: Tailwind v4 import order, className vs class on shadcn, Picture for local images, Fonts API usage, Cloudflare adapter options, anchor-link targets, and template placeholder cleanup, plus caching and security headers in public/_headers. Cites file:line plus the rule it violates.

Try it

"Run a Hakuto review"

/seo-audit

SEO Audit

Builds the site, then audits every page for SEO issues: missing meta tags, broken heading hierarchy, invalid JSON-LD, duplicate titles, orphaned pages, and missing sitemaps. Reports findings with severity levels so you decide what to fix.

Try it

"Run an SEO audit on all pages"

/pagespeed-audit

PageSpeed Audit

Runs Google's PageSpeed Insights against deployed URLs and reports Core Web Vitals, category scores, and the top opportunities for both mobile and desktop. Quotes lab and field metrics verbatim, filters out Hakuto's known-intentional warnings, and hands off concrete fix suggestions tied to src/ paths.

Try it

"Run PageSpeed on hakuto.dev"

/prelaunch-checklist

Prelaunch Checklist

Walks the repo before you go live and reports what's ready and what's not: scaffold defaults still in Layout.astro, placeholder copy in source, forms wired to real endpoints, wrangler config customized, legal pages linked from the footer. Confirms you've run the SEO and Hakuto review skills, then lists the manual Cloudflare dashboard steps it can't automate.

Try it

"Run prelaunch checklist"

Other

Utilities and integrations that don't fit a build or audit step.

/agent-browser

Browser Agent

A full browser automation toolkit. Navigate pages, fill forms, take screenshots, record videos, intercept network requests, and extract data directly from the command line. Useful for testing your site, scraping reference content, or automating repetitive web tasks.

Try it

"Take a screenshot of the homepage"

/plausible-analytics

Plausible Analytics

Adds privacy-friendly Plausible Analytics with a Cloudflare Workers proxy that bypasses ad blockers. Strips cookies, serves the tracking script from your own domain, and caches at the edge without leaking visitor data to third parties.

Try it

"Add analytics tracking"

/scaffold-sync

Scaffold Sync

Pulls Hakuto scaffold updates into a site you've already built. Shows a per-file diff against the version you last synced, applies only the files you approve, and never overwrites anything silently. Tracks what it applied in .hakuto-sync.json.

Try it

"Check for scaffold updates"

More Skills, same philosophy.

We're adding more Skills as we find patterns worth teaching Claude. Want one? Open an issue or a PR.

Request a Skill