---
name: create-website
description: Build and host fancy, production-grade, interactive single-page websites, SPAs, and HTML showcases using modern Zero-Build technologies (Tailwind CSS, Alpine.js, Lucide Icons). Use when the user asks to create, build, design, or show a website, landing page, interactive calculator, showcase, recipe app, dashboard, or web tool.
---
# Create Website & Interactive Single-Page Applications 🌐✨
This skill empowers OpenClaw to act as a **Creative Web Director and Senior Frontend Engineer**. It generates visually stunning, responsive, fully interactive single-page applications (SPAs) contained within a single HTML file—without requiring complex build steps or Node.js compilers.
---
## ⚡ Core Philosophy: The Zero-Build Reactive Engine
1. **Self-Contained Single-File**: HTML markup, Tailwind CSS utility styling, Alpine.js reactivity, and Lucide icons reside in a single standalone file.
2. **Zero-Build Latency**: Runs directly in the browser via fast CDNs. Zero compile time, 100% reliable execution across desktop, tablet, and mobile (iOS Safari, Telegram in-app browser).
3. **Anti-AI-Slop Aesthetics**: Reject generic AI defaults (no plain Inter font, no purple-to-blue gradients, no boring centered 3-card monotony). Every site must have an intentional aesthetic direction with strong typography, depth, and micro-interactions.
---
## 🎨 1. Choose a Visual Archetype
Before writing code, commit strictly to one of the 4 design archetypes (detailed in [references/archetypes.md](references/archetypes.md)):
* **Dark Obsidian & Cyber-Luxury**: Deep dark canvas (`#090A0F`), glassmorphism cards (`backdrop-blur-xl border border-white/10`), electric cyan/violet/emerald glows. Fonts: *Syne* + *Plus Jakarta Sans*. (Ideal for tech showcases, tools, AI, fitness trackers).
* **Editorial Warmth & Swiss Typographic**: Linen/ivory background (`#FDFBF7`), hairline borders (`border-stone-200`), warm terracotta/forest green accents. Fonts: *Fraunces* (Serif) + *Instrument Sans*. (Ideal for research dossiers, recipes, long-form stories).
* **Neo-Brutalism & High-Energy**: High contrast, thick black borders (`border-2 border-black`), offset hard drop shadows (`shadow-[4px_4px_0px_0px_#000]`), vivid canary yellow and lime accents. Fonts: *Space Grotesk* + *JetBrains Mono*. (Ideal for events, party invites, challenges, games).
* **Modern Clean SaaS & Dynamic Dashboard**: Crisp slate canvas, automatic dark/light mode toggle via Alpine, KPI cards, filterable tables. Fonts: *Outfit* + *Plus Jakarta Sans*. (Ideal for data apps, comparisons, calculators).
---
## 🛠️ 2. The Standard CDN Skeleton
Use this bulletproof template structure for all generated websites:
```html
Titel der Website
```
---
## ⚡ 3. Add Interactivity with Alpine.js
Review [references/alpine-patterns.md](references/alpine-patterns.md) for pre-built patterns:
* **Dynamic Tabs**: Seamless view switching without page reloads.
* **Instant Search & Filter**: Real-time filtering of cards/recipes/items based on text input or category pills.
* **Reactive Calculators / Sliders**: Live computation (portions, prices, nutrition, splits) with instant UI updates.
* **Modal Dialogs & Drawers**: Smooth transitions with backdrop blur and escape key handling.
* **Celebration Effects**: Triggering confetti on successful calculations or milestones (`confetti({ particleCount: 80, spread: 70 })`).
---
## 🚀 4. Publishing & Sharing Workflow
Once the website HTML has been generated and saved locally (e.g. to `/tmp/websites/.html`), publish it to public hosting:
### Step 1: Run the Publisher Script
```bash
uv run /home/node/mop-skills/mop-skills/skills/create-website/scripts/publish_website.py \
--file /tmp/websites/.html \
--category showcase \
--slug
```
This validates the HTML and uploads it to MinIO, returning the public HTTPS URL:
`https://hosting.haumdaucher.de/showcase/{YYYYMMDD}-{slug}.html`
### Step 2: Present to User in Telegram
Always deliver both the clickable link and the local file for offline access:
```markdown
🚀 **Deine Website ist live!**
🔗 https://hosting.haumdaucher.de/showcase/20260928-ninja-creami-calc.html
*(Die Datei ist zum lokalen Öffnen ebenfalls beigefügt)*
MEDIA:/tmp/websites/.html
```
### Step 3: Offer QR Code
Immediately trigger `ask_user` to offer generating a scannable QR code:
```json
{
"question": "Möchtest du für diesen Link einen QR-Code generieren?",
"options": ["Ja, QR-Code erstellen", "Nein, danke"]
}
```
If approved, execute the `qr-code` skill:
```bash
uv run /home/node/mop-skills/mop-skills/skills/qr-code/scripts/generate_qr.py "https://hosting.haumdaucher.de/showcase/20260928-ninja-creami-calc.html"
```
and send via `MEDIA:`.
---
## 🛡️ Quality Gate & Anti-Slop Checklist
Always check the site against [references/anti-slop-checklist.md](references/anti-slop-checklist.md) before publishing:
1. Are font pairings distinct and imported via Google Fonts?
2. Are all buttons responsive with hover and active states (`active:scale-95`)?
3. Does the layout scale gracefully on small mobile screens (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)?
4. Are Lucide icons properly rendered via `lucide.createIcons()`?