@tickernelz/paperclip-pro-skills-catalog 2026.925.0

package/catalog/bundled/product/paperclip-capsules/references/identicon-prototyper.md

@@ -0,0 +1,213 @@
+# Identicon Prototyper
+
+Use this reference when generating or reviewing deterministic Paperclip capsule identicons/profile pills. Prototype source paths, when the Paperclip content repository is available:
+
+- `paperclip-content/design/PAP-11825/paperclip-capsule-identicon-prototyper/README.md`
+- `paperclip-content/design/PAP-11825/paperclip-capsule-identicon-prototyper/src/identicon.ts`
+- `paperclip-content/design/PAP-11825/paperclip-capsule-identicon-prototyper/src/App.tsx`
+
+These are individual agent marks. They do not replace product UI status capsules or the canonical hero capsule bank.
+
+## Determinism Contract
+
+The renderer scopes deterministic output by:
+
+```txt
+normalized seed + variant + density + theme
+```
+
+Additional options such as color space, color scheme, motion, and manual angle affect the rendered SVG and must still be recorded for reproducibility.
+
+Default app state:
+
+- Seed: `paperclip capsule bank`
+- Variant: `gradient-smooth`
+- Size control: `48` in the UI; renderer often uses `512` for the primary preview and `256` for samples.
+- Density: `56`
+- Theme: `charcoal`
+- Color space/scheme: `oklch` / `Golden`
+- Angle: seeded auto angle unless manually set.
+- Motion: on.
+
+Geometry:
+
+- SVG viewBox: `0 0 120 292`
+- Capsule body: `x=18`, `y=16`, `w=84`, `h=248`, `rx=42`
+- Output width is approximately `size * 0.43`; output height is `size`.
+- Capsule SVG includes `data-capsule="individual"` and an agent-oriented aria label.
+
+## Variants
+
+Gradient variants use smooth color only, not dot or stripe patterns:
+
+| Variant id | UI label | Use |
+| --- | --- | --- |
+| `gradient-smooth` | Smooth | Clean two-tone linear gradient. |
+| `gradient-soft` | Sheen | Linear gradient plus a soft radial white highlight near the top. |
+| `gradient-mesh` | Mesh | Base gradient plus overlapping seeded radial color blobs. |
+| `gradient-aurora` | Aurora | Multi-stop diagonal ribbon using three hues plus a broad soft band. |
+
+Dither variants quantize the gradient ramp and emit one SVG path per tone level:
+
+| Variant id | UI label | Algorithm |
+| --- | --- | --- |
+| `dither-floyd` | Floyd | Floyd-Steinberg error diffusion; compact classic grain. |
+| `dither-atkinson` | Atkinson | Atkinson error diffusion; crisp Mac-era contrast. |
+| `dither-jjn` | JJN | Jarvis-Judice-Ninke wide-kernel diffusion; smoother photographic grain. |
+| `dither-bayer4` | Bayer 4 | Ordered dithering with a 4x4 Bayer matrix. |
+| `dither-bayer8` | Bayer 8 | Ordered dithering with a recursively built 8x8 Bayer matrix. |
+| `dither-bluenoise` | Blue Noise | Hash-based void-and-cluster-style threshold mask; avoids visible grid structure. |
+
+## Color Systems
+
+Supported color spaces:
+
+- `hsl`
+- `oklch`
+
+HSL color schemes:
+
+- `Triadic`
+- `Complement`
+- `Analogous`
+- `Mono`
+- `Split`
+- `Tetrad`
+
+OKLCH color schemes:
+
+- `Mono`
+- `Triadic`
+- `Golden`
+- `Complement`
+- `Analogous`
+- `Split`
+- `Tetrad`
+- `Warm-Cool`
+- `Vivid`
+- `Pastel`
+- `Cinema`
+- `Sunset`
+- `Earth`
+
+Scheme behavior:
+
+- HSL defaults to `Triadic`.
+- OKLCH defaults to `Golden`.
+- OKLCH `Pastel` lowers chroma and raises lightness.
+- OKLCH `Earth` uses lower chroma.
+- OKLCH `Vivid` uses higher chroma.
+- OKLCH `Cinema`, `Sunset`, and `Earth` intentionally bias lightness/hue for more authored looks.
+- Manual angle is `0..360`; auto angle is seeded and normally falls in a diagonal range.
+
+## Density And Dither Behavior
+
+UI density presets are `32`, `56`, and `80`, but the renderer accepts numeric density.
+
+Dither tone levels:
+
+- Density `< 45`: 2 tones
+- Density `45..67`: 3 tones
+- Density `>= 68`: 4 tones
+
+Dither grid:
+
+- Column count is clamped from roughly `size / 8`, with a minimum of `14` and maximum of `34`.
+- Row count follows capsule height/cell width so the cells stay proportional.
+- Error diffusion kernels:
+  - Floyd-Steinberg divisor `16`
+  - Atkinson divisor `8`
+  - Jarvis-Judice-Ninke divisor `48`
+- Ordered dithers shift the target ramp by threshold before rounding to the nearest tone.
+
+Use lower density for bolder two-tone marks, mid density for readable profile icons, and high density for richer dither studies. Avoid using dither algorithms for product status indicators; those are a different capsule family.
+
+## Recommended Combinations
+
+The prototype's study sections provide known-good pairings:
+
+- Smooth gradient + OKLCH `Golden`
+- Soft sheen + OKLCH `Sunset`
+- Mesh gradient + OKLCH `Vivid`
+- Aurora gradient + OKLCH `Cinema`
+- Gradient mix + HSL `Triadic`
+- Floyd-Steinberg + OKLCH `Golden`
+- Atkinson + OKLCH `Sunset`
+- JJN + OKLCH `Earth`
+- Bayer 4 or Bayer 8 + HSL `Complement`
+- Blue noise + OKLCH `Vivid`
+- Dither mix + OKLCH `Cinema`
+
+Use these combinations first when a prompt asks for sophisticated capsule marks. Explore other schemes only when the request is explicitly exploratory.
+
+## Themes, Motion, And Randomization
+
+Themes:
+
+- `charcoal`: dark brand lab setting with parchment ink.
+- `paper`: white/paper setting with black ink.
+- `ink`: near-black setting with white ink.
+
+Motion:
+
+- Motion adds a subtle vertical SVG `animateTransform` translate wave: `0 -3; 0 3; 0 -3` over `4s`, repeating indefinitely.
+- Turn motion off for static exports, grid previews, and reduced-motion contexts.
+- Keyboard `Space` replays motion in the prototype.
+
+Randomize behavior:
+
+- Randomizes style, color space/scheme, gradient angle, density, motion, and seed.
+- Keeps Size and Theme stable.
+- Seed words include `atlas`, `budget`, `capsule`, `delta`, `forge`, `governance`, `hermes`, `ledger`, `signal`, and `thread`.
+
+## Export And Share
+
+Supported actions:
+
+- Copy SVG
+- Download SVG
+- Download PNG
+- Copy data URI
+- Copy React snippet
+- Share standalone card URL
+- Restore settings from URL hash
+
+URL hash fields:
+
+- `s`: seed
+- `v`: variant id
+- `z`: UI size
+- `d`: density
+- `t`: theme
+- `c`: color space
+- `p`: color scheme
+- `a`: manual angle, omitted for seeded auto angle
+- `m`: motion, `1` or `0`
+
+When attaching an identicon artifact, record at least:
+
+```md
+Capsule identicon
+
+- Seed:
+- Variant id:
+- Theme:
+- Color space / scheme:
+- Density:
+- Size / output dimensions:
+- Motion:
+- Angle: seeded auto | <degrees>
+- Export: SVG | PNG | data URI | React snippet | card URL
+- Source: PAP-11825 identicon prototyper
+```
+
+## Smoke Checks
+
+Before treating an identicon artifact as complete:
+
+- Same seed and settings produce the same SVG.
+- Changing the seed changes the SVG.
+- All selected variant ids render nonblank SVG.
+- SVG and PNG exports are non-empty and inspectable.
+- Shared URL hash restores the intended seed, variant, density, theme, color space, color scheme, angle, and motion.
+- Motion can be turned off for static/reduced-motion delivery.

package/catalog/bundled/product/paperclip-capsules/references/individual-status-capsules.md

@@ -0,0 +1,113 @@
+# Individual and Status Capsules
+
+Use this reference for product UI, onboarding, org surfaces, and heartbeat status indicators.
+
+## Source Precedence
+
+1. `ui/src/components/AgentCapsule.tsx` - React API, states, sizes, accessibility, gradient wrapping.
+2. `ui/src/index.css` - animation timings, reduced-motion behavior, agent gradient token values.
+3. `ui/src/lib/status-colors.ts` - heartbeat status color/motion mapping.
+4. `ui/src/components/OnboardingWizard.tsx` and `ui/src/pages/DesignGuide.tsx` - accepted usage examples.
+5. Website brand guide files under `paperclip-website/src/components/brand/sections/*` - marketing rules and the 12-preset website palette.
+
+## Individual Agent Capsule
+
+One tall capsule represents one agent. Do not use this component for decoration or generic status chips.
+
+States:
+
+| State | Meaning | Rendering |
+| --- | --- | --- |
+| `slot` | Empty agent slot | Dashed outline, gentle pulse |
+| `configured` | Agent named/model picked, not live | Solid stroke, no fill |
+| `online` | Agent online | Gradient liquid rise, then breathing pulse |
+
+Implementation rules:
+
+- Keep the same DOM node through lifecycle flows when the story is "this agent comes to life".
+- Use stacked layers with opacity transitions for dashed-to-solid; CSS cannot animate `border-style`.
+- Online default pulse is green. The blue pulse is a specific onboarding wizard variant, not the default app-wide live state.
+- Product sizes are `sm` 24x60, `md` 34x84, `lg` 46x116. Custom sizes should keep height at least twice width.
+- The capsule radius is full stadium/pill radius.
+- Accessibility label should describe the represented agent or state.
+
+Motion:
+
+| Motion | Timing |
+| --- | --- |
+| Slot pulse | `1.6s ease-in-out infinite` |
+| Liquid rise | `1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards` |
+| Online pulse | `1.8s ease-in-out infinite` |
+| Layer transition | `opacity 0.5s ease` |
+
+Reduced motion:
+
+- Remove slot pulse and online pulse.
+- Remove layer transition.
+- Render the online liquid at full height without rise animation.
+
+## App Agent Gradient Tokens
+
+The app component currently exposes 10 gradient pairs. `AgentCapsule` wraps out-of-range gradient indexes back into `1..10`.
+
+| Index | Top token | Top | Bottom token | Bottom |
+| --- | --- | --- | --- | --- |
+| 1 | `--agent-1a` | `#f7cfdc` | `--agent-1b` | `#1f7a3a` |
+| 2 | `--agent-2a` | `#c9a9e8` | `--agent-2b` | `#ee79a1` |
+| 3 | `--agent-3a` | `#28164b` | `--agent-3b` | `#7a1530` |
+| 4 | `--agent-4a` | `#f3e6c4` | `--agent-4b` | `#e3a21a` |
+| 5 | `--agent-5a` | `#1f4dd6` | `--agent-5b` | `#3aa35c` |
+| 6 | `--agent-6a` | `#e94b27` | `--agent-6b` | `#5a1122` |
+| 7 | `--agent-7a` | `#7eb6e3` | `--agent-7b` | `#ee79a1` |
+| 8 | `--agent-8a` | `#9ce8a7` | `--agent-8b` | `#bd7ff0` |
+| 9 | `--agent-9a` | `#f3b49e` | `--agent-9b` | `#1f4ed4` |
+| 10 | `--agent-10a` | `#f2d95f` | `--agent-10b` | `#4fbcba` |
+
+Do not treat these as the universal Paperclip capsule palette. The website brand guide exposes 12 presets, the video references have a separate 12-gradient palette, and the hero bank has 45 gradients.
+
+## Website Marketing Capsule Palette
+
+The website palette extends the app's first 10 gradients with two more presets:
+
+| Index | Top | Bottom | Description |
+| --- | --- | --- | --- |
+| 11 | `#C2C2E8` | `#5E3450` | peri -> mauve |
+| 12 | `#4DB9B7` | `#3AA35C` | teal -> green |
+
+Marketing capsule rules:
+
+- Capsule visuals are reserved for agent representation: capsule fields, org-chart nodes, status indicators, avatars.
+- Never use capsules on chrome, buttons, or generic pills.
+- Use a `1 : >= 2` proportion and a top-to-bottom gradient for gradient capsules.
+- Flat single-color capsules are allowed only where a solid mark is needed.
+- The guide names a semantic `--r-capsule`, but current `brand.css` does not export a concrete `--r-capsule` variable. Do not cite it as a live CSS token without checking.
+
+## Heartbeat Status Capsule
+
+Heartbeat status capsules are small solid pills. They are a different surface from individual gradient capsules.
+
+Status mapping:
+
+| Agent status | Color | Fill | Motion |
+| --- | --- | --- | --- |
+| `idle` | gray | `#A8AEB2` light, `#6E6960` dark | none |
+| `active` | gray | same as idle | none |
+| `running` | blue | `#2563EB` | `hb-pulse` |
+| `paused` | amber | `#F59E0B` | none |
+| `error` | red | `#DC2626` | `hb-blink` |
+
+Motion timings:
+
+- `hb-pulse`: `1.6s ease-in-out infinite`
+- `hb-blink`: `1.2s step-end infinite`
+- Reduced motion removes both.
+
+Website guide geometry for the heartbeat pill is 8x16 with radius 4. Larger brand-page display examples may use 14x28.
+
+## Common Mistakes
+
+- Using capsule gradients for generic badges or buttons.
+- Using a full gradient agent capsule where a small status capsule is required.
+- Treating the onboarding blue glow as the default online state.
+- Merging the 10 app gradients, 12 website gradients, 12 video gradients, and 45 hero-bank gradients into one palette.
+- Animating status or lifecycle motion without reduced-motion fallbacks.

package/catalog/bundled/product/wireframe/SKILL.md

@@ -0,0 +1,193 @@
+---
+name: wireframe
+description: Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.
+key: paperclipai/bundled/product/wireframe
+recommendedForRoles:
+  - designer
+  - product
+  - engineer
+tags:
+  - design
+  - wireframe
+  - ux
+  - prototyping
+  - svg
+---
+
+# Wireframe
+
+Produce low-fidelity, black-and-white UI wireframes as **standalone SVG files**. The goal is to communicate **structure** — what goes where, in what order, at roughly what size — without committing to colour, brand, or polish.
+
+## When to use
+
+Trigger on phrases like:
+
+- "wireframe a [screen / page / flow] for X"
+- "low-fi / lo-fi mockup of X"
+- "draft a layout for X"
+- "rough sketch of the [dashboard / settings / login / ...] page"
+- "show me how X would lay out before I build it"
+
+Skip and defer to `frontend-design` (or similar) when the request mentions: brand, polish, real components, "production-ready", colour palettes, hi-fi, Figma export, or actual code/HTML/React deliverables.
+
+## House style — non-negotiable
+
+Wireframes are diagnostic, not decorative. Lock these tokens on every output:
+
+| Token            | Value                                             | Notes                                  |
+| ---------------- | ------------------------------------------------- | -------------------------------------- |
+| Stroke           | `#000` width `1.5`                                | All borders, dividers, outlines        |
+| Fill (boxes)     | `#fff`                                            | Default for cards/containers           |
+| Placeholder fill | `#e6e6e6`                                         | Image/avatar/empty-state regions       |
+| Text colour      | `#000` for labels, `#666` for placeholder text    | No other colours                       |
+| Accent           | `#d33` (dashed) — annotation layer ONLY           | Never inside real UI elements          |
+| Font             | `font-family="-apple-system, system-ui, sans-serif"` | Single typeface across the whole file  |
+| Type scale       | `12` caption · `14` body · `20` heading · `28` title | No other sizes                         |
+| Grid             | 8px snap, 24px gutter                             | All x/y/w/h must be multiples of 8     |
+| Default canvas   | `1280×800` desktop, `375×812` mobile, `768×1024` tablet | Pick one and state it in the comment   |
+
+If you need to highlight a specific region for a callout, use the **annotation layer** (red dashed). Never colourise the wireframe itself.
+
+## Workflow
+
+1. **Confirm scope.** What screen(s)? Which viewport (desktop / tablet / mobile)? Single screen or multi-screen flow? If unclear, ask one question, then proceed with the most likely default.
+2. **Pick a canvas** from the table above. State the viewport in your reply.
+3. **Compose from primitives.** Read `references/components.md` and assemble the screen from the primitive snippets. Snap every coordinate to 8px.
+4. **Write the SVG to a file.** Default path: `wireframes/<slug>.svg` in the working directory. Filename slug describes the screen (`login.svg`, `dashboard.svg`, `settings-account.svg`).
+5. **Emit a textual annotation list** in your reply, mapping each numbered region in the SVG to a one-line description ("1 — primary nav, 2 — search input, 3 — list of recent items"). This makes the wireframe accessible, queryable, and reviewable in text-only channels.
+6. **For multi-screen flows**, produce one SVG per screen and a summary `flow.svg` that arranges thumbnails left-to-right with arrows between them.
+
+## Quick start — minimal SVG
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
+     font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
+  <!-- canvas border -->
+  <rect x="0" y="0" width="1280" height="800" />
+
+  <!-- example: a button -->
+  <g transform="translate(48, 48)">
+    <rect width="120" height="40" rx="4" />
+    <text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
+  </g>
+</svg>
+```
+
+Two house-style gotchas worth memorising:
+
+- Always set `stroke="none"` on `<text>` elements (text inherits the parent stroke and gets a halo otherwise).
+- Always wrap text fill explicitly (`fill="#000"`) since the parent group fill is `#fff` for boxes.
+
+## Primitive library
+
+The full set of reusable primitives lives in `references/components.md`. Load it whenever you need a primitive whose exact markup you do not have in working memory. Do not re-derive primitives from scratch — copy the snippet and adjust coordinates.
+
+Primitives provided:
+
+- **Inputs:** button (filled, outlined, icon), text input, textarea, dropdown, checkbox, radio, toggle, search input
+- **Layout:** card, section divider, sidebar, two-column, three-column
+- **Navigation:** navbar, tab bar, breadcrumb, pagination, sidebar nav
+- **Content:** heading, paragraph block, list row, table, key-value pair, metric tile
+- **Media:** image placeholder, avatar (circle/square), video placeholder
+- **Overlay:** modal, drawer, toast, tooltip, dropdown menu (open state)
+- **Annotation:** numbered callout, dashed region highlight, arrow connector
+
+## Grid, palette, and type scale
+
+For exact pixel values, palette tokens, and type sizes, see `references/grid-system.md`.
+
+## Worked examples
+
+`references/examples.md` contains four complete wireframes you can copy and adapt:
+
+1. Login screen (mobile, 375×812)
+2. Admin dashboard (desktop, 1280×800)
+3. Settings page with form (desktop, 1280×800)
+4. Modal confirmation overlay (desktop, 1280×800)
+
+When the user's request is close to one of these, start from the example and modify, rather than building from blank.
+
+## Output convention
+
+Every wireframe response should include:
+
+1. The SVG file written to disk (path stated explicitly).
+2. The SVG inlined in your reply (so it renders in markdown previews).
+3. A short numbered annotation list mapping regions to intent.
+4. Any explicit assumption you made (viewport, signed-in state, empty/populated, dark/light not applicable since monochrome).
+
+## If the user requests a website / viewer page
+
+Trigger on phrases like "make a page that shows the screens", "single page I can scroll", "build a viewer", "let me click through the wireframes", "show them all on one page", or any request to bundle multiple wireframes into a browsable artifact (not a production site).
+
+Build **one static `index.html`** that loads the SVG wireframes directly. Do not turn this into a React app or component library — it's a review surface, not product UI.
+
+**File layout** (default):
+
+```
+design/<task-slug>/
+  index.html
+  wireframes/    # the SVGs from this skill
+  screenshots/   # any reference screenshots
+```
+
+**Page anatomy** (start from `assets/site-template.html` and adjust — do not re-derive the CSS):
+
+- **Sticky sidebar TOC** (240px on desktop) listing every screen with anchor links. Group by Flow / Screens / Open questions.
+- **Hero header** at the top: crumb (issue id), title, one-paragraph summary, pill row of meta tags (`12 screens`, `Lo-fi · monochrome`, `Click any wireframe to zoom`).
+- **One section per screen** with a 2-column grid: wireframe on the left, reference image + numbered annotations + a "Why this changes" callout on the right. The wireframe `<img>` points to the SVG file directly — do not inline it.
+- **Click-to-zoom lightbox** for any element marked `[data-zoom]`. Esc and backdrop click both close.
+- **Flow diagram** section near the top that loads `wireframes/flow.svg` full-width.
+- **Open questions** section at the bottom for unresolved decisions.
+
+**House style for the viewer** (matches the wireframes themselves):
+
+- Palette: `--bg: #fafaf8`, `--panel: #fff`, `--ink: #111`, `--muted: #666`, `--line: #e5e5e0`, `--accent: #d33` (red dashed callouts only).
+- System font stack only: `-apple-system, system-ui, "Segoe UI", sans-serif`. No web fonts.
+- 8px-based spacing, `border-radius: 8px` on cards, 1px `--line` borders, no shadows except the hover lift on `.wire`.
+- The viewer chrome is allowed to be slightly more polished than the wireframes (subtle hover, rounded cards) — but never colourful. The wireframes themselves stay strictly monochrome.
+
+**Responsive** (verify before reporting done):
+
+- ≥980px: two-column grid, sidebar TOC visible.
+- 900–980px: grid stacks to one column, TOC still sidebar.
+- <900px (tablet/phone): TOC collapses to a sticky `<details>` disclosure at the top of the page, defaults closed; tapping a link auto-closes it. Sections get `scroll-margin-top: 80px` so anchor jumps clear the sticky bar.
+- <560px (phone): tighter type/spacing scale, hero shrinks, lightbox switches from flex-centered to block layout at full viewport width with `touch-action: pinch-zoom` so users can pinch in further.
+
+**Verification** before handing off: open the file in a browser and walk it at 1440×900, 768×1024, and 390×844. Confirm anchor jumps land cleanly, lightbox opens/closes, and SVGs render at the right aspect.
+
+## If the user asks to deploy / publish / host the wireframes
+
+Defer to the **`here-now` skill** — it owns publishing, anonymous vs. permanent sites, claim tokens, and credentials. Do not roll your own hosting.
+
+Load the `here-now` skill and follow its `publish.sh` recipe. The shape is:
+
+```bash
+cd design/<task-slug>
+{path-to-here-now}/scripts/publish.sh .
+# → https://{adjective-noun-suffix}.here.now/
+```
+
+If `here-now` isn't installed for the current agent, install it (`npx skills add heredotnow/skill --skill here-now -g`) or escalate to whoever owns the agent's skill set. Do not roll your own hosting.
+
+Things to remember when invoking it:
+
+- Publish the **directory containing `index.html` at its root**, not the parent. `index.html` must be at the root of the published tree.
+- Without saved credentials the site is **anonymous and expires in 24 hours**. With a saved API key, it's permanent. If the user wants a permanent URL, follow the `here-now` skill's sign-in-code flow — don't fake your way around it.
+- For an update, pass `--slug {existing-slug}` so the URL stays stable across review rounds (the script auto-loads the claim token from `.herenow/state.json`).
+- Read `publish_result.*` lines from script stderr to determine `auth_mode` and the claim URL — do not read `.herenow/state.json` and present its contents as the source of truth.
+- Always share the `siteUrl` from the current run; if anonymous, also share the claim URL and the 24h expiry warning.
+
+## What this skill is NOT for
+
+- **Production UI code** — use `frontend-design` or write React/HTML directly.
+- **Hi-fi or branded mockups** — use Figma or a design tool, not this.
+- **Interactive prototypes** — SVG is static; export multi-screen flows as a flow.svg.
+- **Diagrams of system architecture, sequence flows, or data models** — use mermaid or plantuml.
+- **Illustrations or art** — use `example-skills:canvas-design` or `algorithmic-art`.
+
+## Bundled assets
+
+- `assets/template.svg` — blank desktop canvas with hidden 8px-grid guides; copy as a starting point.
+- `assets/template-mobile.svg` — same for 375×812 mobile.
+- `assets/site-template.html` — minimal review-viewer page (sticky TOC + responsive collapse + lightbox). Copy to `design/<task-slug>/index.html` and fill in the sections when the user requests a website.