From hero-site-gen
Use when building or scaffolding a personal "hero" website (portfolio / personal showcase) — defines the architecture, tech stack, design-system conventions, SEO, and anti-scraping patterns that every generated site MUST follow.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hero-site-gen:hero-site-methodThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The proven architecture for a personal "hero" website: a fast, statically generated,
presets/_model.mdpresets/academic.mdpresets/creative.mdpresets/founder.mdpresets/job-seeker.mdpresets/professional.mdtemplates/README.mdtemplates/app/api/choose-theme/route.tstemplates/app/globals.csstemplates/components/EmailLink.tsxtemplates/components/ThemeStyle.tsxtemplates/components/ThemeSwitcher.tsxtemplates/content/theme.tstemplates/content/types.tstemplates/lib/filter.tstemplates/lib/theme.tsThe proven architecture for a personal "hero" website: a fast, statically generated,
editorial showcase that is a pure function of typed content. This skill is the source of
truth for how a generated site is structured. The /hero command orchestrates the
flow; this skill governs the build.
@import "tailwindcss" + a @theme {} block in
app/globals.css. No tailwind.config.js.next/font/google, exposed as CSS variables (a display, a body, a mono).@/* path alias → project root (tsconfig.json).next, react, react-dom; devDeps @tailwindcss/postcss, tailwindcss,
types, typescript, vitest. Add nothing else unless strictly necessary.Per the user's global rules: before writing code against Next.js / React / Tailwind APIs, pull current docs via Context7 (
resolve-library-id→get-library-docs). Do not rely on memorized framework APIs — these versions move.
Every fact lives in /content/*.ts behind interfaces in content/types.ts. The UI is a pure
function of that data. To reuse the site for a different person you swap the data, not the
components. Never hard-code a person's facts into a component.
app/
layout.tsx # fonts, <Nav>, <Footer>, base metadata, Person JSON-LD, theme class
page.tsx # home: hero, stat band, section highlights
<section>/page.tsx # one route per selected section (publications, projects, etc.)
globals.css # @import tailwindcss + @theme tokens + base/components layers
sitemap.ts robots.ts
components/ # presentational; *List components are "use client" (own filter state)
content/
types.ts # all interfaces + any closed enums (e.g. expertise AREAS)
site.ts # name, role, bio, bioLong[], contact, stats, etc.
theme.ts # the CHOSEN design tokens (written by the design selector)
<collection>.ts # publications/patents/projects/talks/awards/experience as data
lib/
filter.ts # pure filterAndSort + DEFAULT_FILTER + availableDecades + SortKey
See templates/ in this skill for concrete reference files to adapt (do not copy a person's
data — copy the shapes and patterns).
A "look" is expressed entirely as CSS-variable tokens in @theme plus a font trio. This is
what makes the live design selector cheap — switching looks is swapping variable values, never a
structural change. The chosen theme is written to content/theme.ts and applied in layout.tsx.
Conventions that keep generated sites from looking generic:
.reveal entrance animation,
underline-on-hover, accent ::selection and :focus-visible.prefers-reduced-motion reset and a sensible max content width.When a section holds many items (publications, patents, projects), provide search + faceted
filtering + sorting via a single pure filterAndSort over the static data. Include a
"listed" sort that preserves source-file order (comparator returns 0) so order can be
hand-curated in the data file. Unit-test this function.
metadata (title, description from the bio, Open Graph, canonical from site.url).Person schema in the root layout; persona-appropriate ItemList
(e.g. ScholarlyArticle for publications) where relevant.app/sitemap.ts and app/robots.ts.atob in a useEffect on mount in a small client EmailLink component, and show a
non-clickable fallback (e.g. " [at] " form) before hydration.site.ts over a misleading computed number.npm run build AND npm run test (vitest) must pass — run them and show the output before
claiming the site is ready. Evidence before assertions.
hero-content-intake skill → fills the content/*.ts files from the person's material.section-presets (in presets/) → decides which sections/collections exist.hero-design-system skill + the design selector → produce and lock content/theme.ts./hero-deploy → ships it to Vercel + a Hover domain.npx claudepluginhub swinney/hero-site-gen --plugin hero-site-genProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.