Files

T

Moritz Graf 2bde04617f feat(skills): add create-website skill for zero-build responsive SPAs and showcases

2026-09-28 07:37:36 +02:00

7.0 KiB

Raw Blame History

name, description

name	description
create-website	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

Self-Contained Single-File: HTML markup, Tailwind CSS utility styling, Alpine.js reactivity, and Lucide icons reside in a single standalone file.
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).
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):

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:

<!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 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 })).

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

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:

🚀 **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:

{
  "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:

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 before publishing:

Are font pairings distinct and imported via Google Fonts?
Are all buttons responsive with hover and active states (active:scale-95)?
Does the layout scale gracefully on small mobile screens (grid-cols-1 md:grid-cols-2 lg:grid-cols-3)?
Are Lucide icons properly rendered via lucide.createIcons()?

7.0 KiB Raw Blame History