> **Sent this link to add the skill?** Install it by following https://withicarus.com/skills/frontend-design/llms-install.md
> Already installed, or using it in this chat? Follow the skill below.

---
name: frontend-design
description: Builds and publishes a multi-page website for a brand with Icarus, using the brand's own saved products, shots and videos, at a link that stays the same when it is edited. Use when someone asks for a website, landing page, launch page, microsite, product page, lookbook site or link-in-bio page, or a web app, tool or dashboard to open at a link (a CRM, content calendar, calculator, quiz, form, tracker or game), or asks to change, update or take down a site Icarus made, or to add a form, signup, waitlist or a list (products, testimonials) to one, or who filled in a site's form, or to make a site private behind a password.
---

# Website

`SKILL` below is this skill's folder (`/workspace/skills/frontend-design`). If you loaded it with `Icarus:use_skill` instead, download its `filesZip` and unzip it; `SKILL` is the unzipped `frontend-design` folder.

Sites are Vite + React + Tailwind + shadcn/ui projects built in your sandbox and published with `Icarus:upload_site` and `Icarus:publish_site`. Every site is served under its own folder (`/<slug>/`) on one shared address, which decides most rules below.

## Rules

- **Relative paths and hash routes.** Vite `base: "./"`; `createHashRouter` from `react-router` (`#/shop`). An absolute path or a `/shop` route 404s live.
- **shadcn/ui for every control** (buttons, inputs, selects, dialogs, tabs). Raw HTML inputs look unfinished.
- **Errors show as a toast**: the skill's own `sonner` toast (step 2), with `<Toaster />` rendered once beside the router and `toast.error("That didn't send. Try again in a moment.")` where it fails. Never a line of red text in the page: on a phone it lands below the fold and is missed. A load that fails keeps its empty state with a Try again button.
- **Never ask visitors for a password, one-time code, card, ID or bank details, and never build anything that looks like a sign-in screen.** Each published version is checked; a site that asks is taken offline (`Icarus:list_sites` shows `blocked` and why; tell the person in those words). For their own app's login, link to it with an "Open the app" button.
- **Pages talk only to Icarus.** Pictures and videos from Icarus links, fonts from Google Fonts, Cloudflare's bot check as the only outside script. Anything else from another host won't load, and a form or `fetch` to another site takes the site offline.
- **Data people add lives in Icarus site data** (contacts, leads, signups, orders, tasks): see [reference/forms.md](reference/forms.md). Never `localStorage`, `sessionStorage`, IndexedDB or cookies, and no tokens or keys anywhere in the browser: other sites on the same address can read them. Browser storage is only for view choices like the theme, wrapped in `try`/`catch`.
- **No service workers, web workers or offline mode.** The browser refuses them here.
- **Visitor text renders as React text**, never `dangerouslySetInnerHTML`; a visitor's link only after `new URL()` says `http:` or `https:`.
- **A team that edits entries on the page** (a CRM, a tracker) needs the site set to members only; a password only when the person asks to let someone outside their workspace in. Both in [reference/private-sites.md](reference/private-sites.md).

## Inputs

- Saved products, characters, shots, videos: `Icarus:list_products`, `Icarus:list_assets`, `Icarus:list_generations`; use their links directly in `<img>` and `<video>` (never copy them into the build).
- Their look ("in our style"): `Icarus:show_taste`. Attached pictures: `Icarus:save_attached_files` or `Icarus:upload_file`, then the links.
- Copy, prices, contact details: word for word. Never invent a price or an address.
- No product, brand or page idea in the brief: ask one short question with your best guess first.

## Steps

1. **Plan** the pages and sections, which Icarus links go where, and every collection the site needs (set them up before building that page).
2. **Start the project.**
   - A CRM, lead tracker, pipeline or other list people add to and update: `cp -r $SKILL/templates/crm site`, then follow [templates/crm/README.md](templates/crm/README.md).
   - Anything else:
     ```bash
     npm create vite@latest site -- --template react-ts && cd site
     npm install && npm install tailwindcss @tailwindcss/vite react-router && npm install -D @types/node playwright
     ```
     Set up Tailwind and the `@` alias the shadcn Vite way, with `base: "./"` in `vite.config.ts`, then `npx shadcn@latest init` and `npx shadcn@latest add` the components you need. For toasts, `npm install sonner @hugeicons/react @hugeicons/core-free-icons` and copy the finished pair, never `shadcn add sonner` (it needs Next.js): `cp $SKILL/templates/crm/src/components/icons.tsx src/components/ && cp $SKILL/templates/crm/src/components/ui/sonner.tsx src/components/ui/`.
3. **Build phone first**, following [design.md](design.md): 16 px gutters, 44 px tap targets, no sideways scroll, the brand's pictures at their real shape, `alt`/`width`/`height` on every image, `loading="lazy"` below the fold, videos `muted playsinline loop` when in the background. `npm run build`.
4. **Check before every publish**, first one included: `npx playwright install chromium` once, then from `site`: `node $SKILL/scripts/check.mjs dist / /shop` (every route). Fix what it prints and look at the screenshots it saves yourself; repeat until clean. If the browser won't run, tell the person you couldn't check the phone layout; never say it was checked.
5. **Publish.**
   - `node $SKILL/scripts/files.mjs dist > files.json`
   - `Icarus:upload_site` with those `files`, a new `versionKey`, and `slug` + `title` for a new site or `siteId` for an existing one (slug taken: pick another and say so; over 200 files: call again with `page: 2`…). Save the result to `upload.json`.
   - `node $SKILL/scripts/upload.mjs upload.json dist`. If it reports a 403, call `upload_site` again with the same files and `versionKey` for fresh links, and rerun.
   - `Icarus:publish_site` with `siteId` and `version`; if it names missing files, upload those again and repeat (safe).
6. **Reply** with one line on what's on the site. The Icarus chat shows the link as a card, so don't paste it twice.

**Changes later:** `Icarus:list_sites` for the `siteId` (two sites and unclear which: ask), edit the project, build, check, publish with that `siteId` and a new `versionKey`; the link stays the same. If the project is gone from the sandbox, rebuild it from the live site and say so. `Icarus:delete_site` only when asked.

## Common mistakes

| Mistake | Fix |
|---|---|
| A new slug for an edit (second site, second link) | Publish with the site's `siteId` |
| Reusing a `versionKey` for a changed build | New key per build; the same key only to retry that build |
| Changing a header on the PUT (403) | `upload.mjs` sends exactly what `upload_site` returned |
| Skipping the check because it's a small change | Step 4 every time |

---

Category: [Design](https://withicarus.com/skills/category/design)

## What you get

- Several pages, built for phones and laptops
- Your saved products, shots and videos on every page
- One link that stays the same when you ask for changes

## Questions

### How do I add the Frontend design skill to Claude?

Download the skill (frontend-design.zip). Claude's skill upload opens beside it. Pick the file you just downloaded (frontend-design.zip). Ask Claude for what you want. Connect Icarus first so it can make the photos.

### How do I add the Frontend design skill to Claude Code?

Copy this request. Paste it into Claude Code and press Enter. It reads our guide and installs the skill for you.

### How do I add the Frontend design skill to ChatGPT?

Download the skill (frontend-design.zip). ChatGPT's Skills page opens beside it. Click Create, then Upload from your computer, and pick frontend-design.zip. Connect Icarus in ChatGPT, so it can make the photos. Ask ChatGPT for what you want.

### How do I add the Frontend design skill to Codex?

Copy this line. Paste it in your terminal and press Enter. Restart Codex. Or download the skill and put the frontend-design folder in ~/.agents/skills/ yourself.

### How do I add the Frontend design skill to Cursor?

Cursor opens with the request typed in. Press Enter. Or paste this line in your terminal and press Enter. Restart Cursor.

### How do I add the Frontend design skill to VS Code?

Copy this line. It installs the skill for GitHub Copilot. Paste it in your terminal and press Enter. Restart VS Code.

### How do I add the Frontend design skill to Other AI agents?

Pick your agent, then copy its line. Paste it in your terminal and press Enter. Or send your agent this request: it reads the guide and installs the skill itself.

Page: https://withicarus.com/skills/frontend-design
Download: https://icarus.b-cdn.net/skills/frontend-design/v4-7ec40a9a/frontend-design.zip
This skill makes photos and videos with Icarus. Connect Icarus to your AI app: https://withicarus.com/mcp