create-website

Files (2)

• SKILL.md
• reference.md

SKILL.md (first lines)

# Create Website

> ℹ️ **First, set expectations:** before anything else, print one short line with this skill's version and its most recent change — the top entry of `metadata.changelog` above — e.g. `create-website vX.Y — recent: <summary>`. Then proceed.

Scaffold a complete, production-ready Next.js 15 website deployable to Vercel.

> For tech stack details and component patterns, see [reference.md](./reference.md).

---

## HEADLESS MODE (read first)

You are **headless** when the `AskUserQuestion` tool is not available — typically when this wizard runs inside a deployed Trinity agent (a website-builder agent) rather than a person's Claude Code session. Interactive sessions ignore this section entirely.

In headless mode every `AskUserQuestion` below is replaced by these rules:

1. **The brief is the answer.** Take project name, what the site is, pages, brand name, tagline, colour, languages and design direction from the argument. Defaults: project name = the brand name in lowercase-with-hyphens; pages = Home + About + Contact; destination = `~/sites` (each site is its own git repo there, never inside the agent's own repo); design direction = the preset the brief's wording best matches (dark/bold → Bold Dark, friendly/warm/local business → Warm Professional, else Minimal Clean); Studio = **yes** only if the brief says the owner wants to edit the site themselves, else no; GitHub repo = **private**, created; deploy = **yes**.
2. **Decorative choices take the default silently** — section order, copy tone, icons, fonts. Write real, specific copy from the brief; never lorem ipsum.
3. **Real gaps go out as ONE ask, never as guesses.** A real gap is something the site cannot be honest without and the brief does not say — usually only the brand name or what the business actually does. Prices, addresses, phone numbers, team names are **never invented**: leave the section out or mark it `TBD` in the content JSON and list it in the summary. If there is a real gap, raise a single `mcp__trinity__ask_operator` — `request_id: "create-website:[project-name]:gaps"`, `type: "question"`, `title: "[Brand] website — N details needed before I build it"` (≤120 chars), `question`: the numbered gaps, each with the default you would use. Write `~/sites/[project-name].pending.md` (the brief + the request_id + the gap list), say you are waiting on the ask, and **end the turn**. On the next invocation for the same site (the argument names it, or says `resume`; or exactly one `~/sites/*.pending.md` exists and the argument reads as an answer), read the pending file and `mcp__trinity__get_my_ask(request_id)`: answered → merge and continue from Step 3; cancelled or dismissed → stop and say so; expired → continue on the stated defaults and list them as assumptions in the summary; still pending and the new brief answers it → `mcp__trinity__withdraw_ask(request_id, reason)` then continue; still pending with nothing new → end the turn. No `mcp__trinity__ask_operator` tool (not on Trinity) → build on the defaults and list them as assumptions.
4. **No interactive login, ever.** `gh auth login` and `vercel login` open a browser and cannot work in a container. Use the keys the agent already holds — GitHub: `GITHUB_TOKEN` in the environment, else the platform git credential (Step 15); Vercel: `VERCEL_TOKEN` (Step 17a). A missing key is not a reason to stop building: finish the site, commit it, do every step the held keys allow, then say in the summary exactly which key is missing and that a person adds it in the agent's settings as a credential (`VERCEL_TOKEN` from vercel.com/account/tokens; a GitHub fine-grained token with Contents + Administration read/write). Never ask for a token in chat.
5. **Use `npx --yes vercel@latest`** wherever the steps below say `vercel` — the container may not allow a global npm install.
6. **Editing an existing site.** If `~/sites/[project-name]` already exists, this is an edit, not a new build: change the content JSON (or the component, for a layout change), `npm run build`, commit, push, redeploy (Step 17a), and report the live URL. Never re-scaffold over it.

---

## Workflow

### Step 1: Gather Requirements

If `$ARGUMENTS` contains a project name or description, use it as context. Otherwise, ask:

Use AskUserQuestion:
- **Question:** "What website are you building?"
- **Header:** "Website Builder"
- Gather these details (ask in one prompt, not separately):
  1. **Project name** — lowercase-with-hyphens (used for directory and package name)
  2. **What is it?** — One sentence: company site, SaaS landing page, portfolio, docs site, agency site, etc.
  3. **Pages needed** — Homepage + what else? (about, pricing, blog, contact, etc.)
  4. **Brand basics** — Company/product name, tagline, primary color (hex or description like "deep blue")
  5. **Destination** — Where to create the project directory (default: `./$PROJECT_NAME`)

If the description mentions more than one language, also ask **which languages
and which is canonical** — a multilingual site switches the content layer and
Studio to the multilingual variant
([reference.md → Multilingual sites](./reference.md#multilingual-sites-variant)).

### Step 2: Choose Design Direction

Use AskUserQuestion:
- **Question:** "Pick a design direction:"
- **Header:** "Design System"
- Show these options:
  1. **Minimal Clean** — White/light background, subtle borders, no gradients. Swiss-inspired.
  2. **Bold Dark** — Dark background, vivid accents, glassmorphism cards.
  3. **Warm Professional** — Warm neutrals, rounded shapes, friendly and approachable.
  4. **Custom** — I'll describe what I want.

Map the choice to CSS variable values in Step 4.

### Step 3: Initialize Project

```bash
mkdir -p $DESTINATION && cd $DESTINATION
npx create-next-app@latest $PROJECT_NAME \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir=false \
  --import-alias="@/*" \
  --use-npm \
  --yes
```

Wait for completion, then:

```bash
cd $DESTINATION/$PROJECT_NAME
npm install motion lucide-react clsx tailwind-merge
```

### Step 4: Create Design System

Create `app/globals.css` with semantic CSS variables based on the chosen design direction.

Follow the pattern from [reference.md — Design System Variables](./reference.md#design-system-variables). Key variables to define:

- **Backgrounds:** `--bg-page`, `--bg-card`, `--bg-button-primary`, `--bg-button-secondary`
- **Text:** `--text-primary`, `--text-muted`, `--text-inverse`
- **Borders:** `--border-subtle`, `--border-light`
- **Accents:** `--accent-primary`, `--accent-secondary`
- **Typography scale:** display, h1, h2, h3, body, small (see reference.md)
- **Spacing:** section padding for mobile/desktop
- **Radius:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-full`

Also update `tailwind.config.ts` to reference these CSS variables and add common animations (fade-up, fade-in, blur-fade). See [reference.md — Tailwind Config](./reference.md#tailwind-config).

### Step 5: Create Utility Functions

Create `lib/utils.ts`:

```typescript
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

### Step 6: Create Core Layout Components

Create these files following patterns in [reference.md — Components](./reference.md#core-components):

1. **`components/layout/header.tsx`** — Sticky header with logo, navigation links, CTA button. Mobile hamburger menu.
2. **`components/layout/footer.tsx`** — Footer with columns: company info, navigation, legal links, copyright.
3. **`components/layout/mobile-menu.tsx`** — Slide-out mobile navigation.
4. **`components/ui/button.tsx`** — Primary and secondary button variants using design system variables.
5. **`components/ui/container.tsx`** — Max-width centered container with responsive padding.

From Abilityai/trinity-skills, Apache-2.0.

More from Abilityai/trinity-skills