feat(skills): add create-website skill for zero-build responsive SPAs and showcases
This commit is contained in:
Moritz Graf
@@ -0,0 +1,150 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" x-data="{ darkMode: localStorage.getItem('theme') === 'dark' }" :class="{ 'dark': darkMode }">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Titel der Website</title>
|
||||
|
||||
<!-- 1. Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Syne:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- 2. Tailwind CSS v3 Play CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
heading: ['Syne', 'sans-serif'],
|
||||
sans: ['Plus Jakarta Sans', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 3. Alpine.js for snappy reactivity -->
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- 4. Lucide Icons CDN -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<!-- 5. Optional Confetti for Micro-Delight -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
|
||||
</head>
|
||||
<body class="bg-[#090A0F] text-zinc-100 font-sans min-h-screen flex flex-col antialiased selection:bg-cyan-500/30 selection:text-cyan-200">
|
||||
|
||||
<!-- Main Application Content (Tabs, Filters, Interactive Cards, Calculators) -->
|
||||
<main class="flex-1 max-w-6xl w-full mx-auto px-4 py-8 md:py-16">
|
||||
<!-- Component Code Here -->
|
||||
</main>
|
||||
|
||||
<!-- 6. Lucide Icons Initialization (Always at the end of body) -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
lucide.createIcons();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚡ 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/<slug>.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/<slug>.html \
|
||||
--category showcase \
|
||||
--slug <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/<slug>.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:<path>`.
|
||||
|
||||
---
|
||||
|
||||
## 🛡️ 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()`?
|
||||
Reference in New Issue
Block a user