portfolio-builder

---
name: portfolio-builder
description: Use when a creator needs a portfolio site built from their own answers — name, niche, bio, three pieces, brand voice. Writes one self-contained HTML file, styled from the niche.
---

# portfolio-builder

## When this applies, in full

The description field is capped at 200 characters on the claude.ai upload path,
so the detail lives here.

**Use this skill when:** building a creator's own portfolio site for the first
time, rebuilding it after new work, or producing a version for a different niche.

**Not for:** a client's site, a landing page, or anything with more than one
page. This writes one file about one person.

---

Portfolios stop people. Not because a portfolio is hard, but because it sits at
the junction of two jobs a creator didn't sign up for — visual design and putting
a file on the internet — and either one is enough to postpone it indefinitely.

The result is creators with real work and nowhere to send a brand.

**The rule: the reader supplies what is true about their work, and this skill
supplies everything about how it looks. Never the other way round.**

## Where things live

| Input | Default location | Required? |
|---|---|---|
| The five answers | Asked directly, or `portfolio-intake.md` | **Yes** |
| The creator's own voice notes, if they have any | `about-me.md` | Optional |
| Output | `index.html`, alongside the intake | — |

## What this reads, and what it must never invent

| Field | Use | Never trust |
|---|---|---|
| **Name or handle** | Verbatim, as the site's title | Any variation, abbreviation or "improvement" of how they wrote it |
| **Niche** | **The only field that drives design.** Picks typeface, palette, layout, structure | The creator's opinion about how the site should look — that is this skill's job |
| **One line about what they do** | The first thing a brand reads. Verbatim or lightly tightened | Your own summary of what they do |
| **Three best pieces** | Titles verbatim, links as given | Reordering by quality, or dropping one that seems weak |
| **Brand voice, three words** | Tone of any connective copy. Displayed as given | Using them as decoration or as section headings |

**Nothing else exists.** If the creator has two pieces, the site has two pieces.

## How to run it

**1. Ask the five questions if you don't have answers.** All five, in one message,
not one at a time. Someone answering a form wants it over with.

**2. Print the compiled instruction before writing anything.** In full, not
summarised — the reader must be able to see exactly what is about to happen and
which parts came from them.

The instruction has three blocks, and the split is the point:

```text
READER — verbatim, do not rewrite
  [their five answers]

DESIGN DIRECTION — derived from niche only
  [typeface, palette, layout, structure]

CONSTRAINTS
  [the list below]
```

**3. Write one self-contained HTML file.** All CSS inline. No external requests —
no webfonts, no scripts, no images, no analytics. It must open correctly from a
folder with no internet connection.

**4. Report the file's real size and line count**, measured from what you wrote.

**5. Offer the other niches.** Same answers, different design direction, so the
creator can see the niche is doing real work rather than swapping a colour.

## Constraints on the output

- One file. Everything inside it.
- **Zero external requests.** System fonts only.
- Readable at 360px wide.
- Visible keyboard focus on every link.
- Respects `prefers-reduced-motion`.
- **Never invent work the creator did not list.**
- **Never add testimonials, logos, client names, or statistics.**
- Never imply a brand relationship that was not stated.
- No placeholder text anywhere. If a field is empty, the section is absent.

## What NOT to do

- **Don't ask them to choose a design.** They came here because they didn't want
  to. The niche answers that question.
- **Don't pad a thin portfolio.** Three real pieces beats nine invented ones, and
  a padded reel is the fastest way to lose a brand that checks.
- **Don't add an "about me" paragraph they didn't write.** Their one line is the
  about section.
- **Don't produce a build step.** No frameworks, no dependencies, no npm. The
  deliverable is a file they can email to themselves.
- **Don't upsell anything.** There is nothing to buy here and nothing to unlock.

## Before you hand it over

1. Every one of the five answers used, verbatim where the table says verbatim?
2. Compiled instruction printed in full before the file was written?
3. Zero external requests — no fonts, scripts, images, analytics?
4. Nothing in the file that wasn't in their answers?
5. File size and line count reported from the real file, not estimated?
6. Opens correctly from a folder, offline?
7. Told them where to put it online, and that it costs nothing?