Skill: lx164/frontend-design-super (version 1.0.1)

--- name: frontend-design-ultimate description: Create distinctive, production-grade static sites with React, Vue 3, Nuxt.js, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Supports cross-framework development (React/Vue 3/Nuxt) with consistent design patterns. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. homepage: https://github.com/kesslerio/frontend-design-ultimate-clawhub-skill metadata: openclaw: emoji: "🎨" requires: bins: ["node", "npm"] --- # Frontend Design Ultimate Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs. **Cross-Framework Support**: React 18 | Vue 3 | Nuxt 3 **Styling**: Tailwind CSS + shadcn/ui (or framework equivalents) **Output**: Vite (static HTML) or Framework-specific deployment ## Quick Start ``` "Build a SaaS landing page for an AI writing tool. Dark theme, editorial typography, subtle grain texture. Use Vue 3. Pages: hero with animated demo, features grid, pricing table, FAQ accordion, footer." ``` --- ## Framework Selection Guide Choose the right framework for your project: | Framework | Best For | Deployment | Learning Curve | |-----------|----------|------------|----------------| | **React + Vite** | SPAs, interactive apps, React ecosystem | Static/CDN | Medium | | **React + Next.js** | SEO-critical sites, SSR needed | Vercel/Node | Medium-High | | **Vue 3 + Vite** | Progressive apps, easier learning curve | Static/CDN | Low | | **Nuxt 3** | SEO-critical, full-stack Vue, SSR/SSG | Vercel/Netlify/Node | Low-Medium | ### Quick Commands **TypeScript Versions (Original):** ```bash # React + Vite (Pure Static) bash scripts/init-vite.sh my-react-site # React + Next.js (Vercel Deploy) bash scripts/init-nextjs.sh my-next-site # Vue 3 + Vite (Pure Static) bash scripts/init-vue-vite.sh my-vue-site # Nuxt 3 (SSR/SSG) bash scripts/init-nuxt.sh my-nuxt-site ``` **JavaScript Versions (New - JavaScript Runtime Compatible):** ```bash # React + Vite (Pure Static) - JavaScript bash scripts/init-vite-js.sh my-react-site # React + Next.js (Vercel Deploy) - JavaScript bash scripts/init-nextjs-js.sh my-next-site # Vue 3 + Vite (Pure Static) - JavaScript bash scripts/init-vue-vite-js.sh my-vue-site # Nuxt 3 (SSR/SSG) - JavaScript bash scripts/init-nuxt-js.sh my-nuxt-site ``` > **Note**: JavaScript versions provide full compatibility with pure JavaScript runtimes while maintaining all original functionality, design patterns, and user experience. --- ## Design Thinking (Do This First) Before writing any code, commit to a **BOLD aesthetic direction**: ### 1. Understand Context - **Purpose**: What problem does this interface solve? Who uses it? - **Audience**: Developer tools? Consumer app? Enterprise? Creative agency? - **Constraints**: Performance requirements, accessibility needs, brand guidelines? ### 2. Choose an Extreme Tone Pick ONE and commit fully — timid designs fail: | Tone | Characteristics | |------|-----------------| | **Brutally Minimal** | Sparse, monochrome, massive typography, raw edges | | **Maximalist Chaos** | Layered, dense, overlapping elements, controlled disorder | | **Retro-Futuristic** | Neon accents, geometric shapes, CRT aesthetics | | **Organic/Natural** | Soft curves, earth tones, hand-drawn elements | | **Luxury/Refined** | Subtle animations, premium typography, restrained palette | | **Editorial/Magazine** | Strong grid, dramatic headlines, whitespace as feature | | **Brutalist/Raw** | Exposed structure, harsh contrasts, anti-design | | **Art Deco/Geometric** | Gold accents, symmetry, ornate patterns | | **Soft/Pastel** | Rounded corners, gentle gradients, friendly | | **Industrial/Utilitarian** | Functional, monospace, data-dense | ### 3. Define the Unforgettable Element What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout? --- ## Aesthetics Guidelines (Framework-Agnostic) These principles apply to ALL frameworks: ### Typography — NEVER Generic **BANNED**: Inter, Roboto, Arial, system fonts, Open Sans **DO**: Distinctive, characterful choices that elevate the design. | Use Case | Approach | |----------|----------| | Display/Headlines | Bold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair Display | | Body Text | Refined readability — Instrument Sans, General Sans, Plus Jakarta Sans | | Monospace/Code | DM Mono, JetBrains Mono, IBM Plex Mono | | Pairing Strategy | Contrast weights (thin display + bold body), contrast styles (serif + geometric sans) | **Size Progression**: Use 3x+ jumps, not timid 1.5x increments. ### Color & Theme **BANNED**: Purple gradients on white, evenly-distributed 5-color palettes **DO**: - **Dominant + Sharp Accent**: 70-20-10 rule (primary-secondary-accent) - **CSS Variables**: `--primary`, `--accent`, `--surface`, `--text` - **Commit to dark OR light**: Don't hedge with gray middle-grounds - **High contrast CTAs**: Buttons should pop dramatically ```css :root { --bg-primary: #0a0a0a; --bg-secondary: #141414; --text-primary: #fafafa; --text-secondary: #a1a1a1; --accent: #ff6b35; --accent-hover: #ff8555; } ``` ### Motion & Animation **Priority**: One orchestrated page load > scattered micro-interactions **High-Impact Moments**: - Staggered hero reveals (`animation-delay`) - Scroll-triggered section entrances - Hover states that surprise (scale, color shift, shadow depth) - Smooth page transitions **Implementation by Framework**: - **React**: Framer Motion (`motion.div`, `AnimatePresence`) - **Vue 3**: @vueuse/motion (`v-motion`, `useMotion`) - **Nuxt 3**: @vueuse/motion (auto-imported) or @nuxt/animations **Keep durations 200-400ms** (snappy, not sluggish) ### Spatial Composition **BANNED**: Centered, symmetrical, predictable layouts **DO**: - Asymmetry with purpose - Overlapping elements - Diagonal flow / grid-breaking - Generous negative space OR controlled density (pick one) - Off-grid hero sections ### Backgrounds & Atmosphere **BANNED**: Solid white/gray backgrounds **DO**: - Gradient meshes (subtle, not garish) - Noise/grain textures (SVG filter or CSS) - Geometric patterns (dots, lines, shapes) - Layered transparencies - Dramatic shadows for depth - Blur effects for glassmorphism ```css /* Subtle grain overlay */ .grain::before { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,...") repeat; opacity: 0.03; pointer-events: none; } ``` --- ## Mobile-First Patterns (Framework-Agnostic) See **[references/mobile-patterns.md](references/mobile-patterns.md)** for detailed CSS. ### Critical Rules | Pattern | Desktop | Mobile Fix | |---------|---------|------------| | Hero with hidden visual | 2-column grid | Switch to `display: flex` (not grid) | | Large selection lists | Horizontal scroll | Accordion with category headers | | Multi-column forms | Side-by-side | Stack vertically | | Status/alert cards | Inline | `align-items: center` + `text-align: center` | | Feature grids | 3-4 columns | Single column | ### Breakpoints ```css /* Tablet - stack sidebars */ @media (max-width: 1200px) { } /* Mobile - full single column */ @media (max-width: 768px) { } /* Small mobile - compact spacing */ @media (max-width: 480px) { } ``` ### Font Scaling ```css @media (max-width: 768px) { .hero-title { font-size: 32px; } /* from ~48px */ .section-title { font-size: 24px; } /* from ~32px */ .section-subtitle { font-size: 14px; } /* from ~16px */ } ``` --- ## Framework-Specific Workflows ### Option A: React + Vite (Pure Static) ```bash # 1. Initialize bash scripts/init-vite.sh my-site cd my-site # 2. Develop npm run dev # 3. Build static files npm run build # Output: dist/ # 4. Bundle to single HTML (optional) bash scripts/bundle-artifact.sh # Output: bundle.html ``` **Key Libraries**: - `framer-motion` for animations - `@radix-ui/react-*` for accessible components - `lucide-react` for icons **Component Pattern** (React): ```tsx import { motion } from 'framer-motion' import { Button } from '@/components/ui/button' export function Hero() { return ( <motion.section initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > <Button size="lg">Get Started</Button> </motion.section> ) } ``` ### Option B: React + Next.js (Vercel Deploy) ```bash # 1. Initialize bash scripts/init-nextjs.sh my-site cd my-site # 2. Develop npm run dev # 3. Deploy to Vercel vercel ``` **Next.js-Specific Features**: - App Router (`app/` directory) - Server Components (use `'use client'` for interactive parts) - Image optimization (`next/image`) - Metadata API for SEO **Component Pattern** (Next.js): ```tsx 'use client' import { motion } from 'framer-motion' import { Button } from '@/components/ui/button' export default function Hero() { return ( <motion.section initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > <Button size="lg">Get Started</Button> </motion.section> ) } ``` ### Option C: Vue 3 + Vite (Pure Static) ```bash # 1. Initialize bash scripts/init-vue-vite.sh my-site cd my-site # 2. Develop npm run dev # 3. Build static files npm run build # Output: dist/ ``` **Key Libraries**: - `@vueuse/motion` for animations - `radix-vue` for accessible components - `lucide-vue-next` for icons - `shadcn-vue` for UI components **Component Pattern** (Vue 3): ```vue <script setup lang="ts"> import { Motion } from '@vueuse/motion' import Button from '@/components/ui/Button.vue' </script> <template> <section v-motion :initial="{ opacity: 0, y: 20 }" :enter="{ opacity: 1, y: 0 }" :duration="500" > <Button size="lg">Get Started</Button> </section> </template> ``` ### Option D: Nuxt 3 (SSR/SSG) ```bash # 1. Initialize bash scripts/init-nuxt.sh my-site cd my-site # 2. Develop npm run dev # 3. Generate static site npm run generate # Output: .output/public/ # 4. Deploy npx nuxi deploy ``` **Nuxt-Specific Features**: - File-based routing (`pages/`) - Auto-imports (components, composables, utils) - `@nuxt/ui` component library (UButton, UCard, etc.) - Built-in SEO with `useHead()` and `useSeoMeta()` **Component Pattern** (Nuxt 3): ```vue <script setup lang="ts"> import { siteConfig } from '~/config/site' useHead({ title: `${siteConfig.name} - ${siteConfig.tagline}` }) </script> <template> <section v-motion :initial="{ opacity: 0, y: 20 }" :enter="{ opacity: 1, y: 0 }" > <UButton size="xl" :to="/signup">Get Started</UButton> </section> </template> ``` --- ## Project Structures ### React + Vite ``` my-site/ ├── src/ │ ├── components/ # React components (.tsx) │ ├── lib/ # Utilities, cn() │ ├── styles/ # Global CSS │ ├── config/ │ │ └── site.ts # Editable content config │ ├── App.tsx │ └── main.tsx ├── index.html ├── tailwind.config.ts └── package.json ``` ### React + Next.js ``` my-site/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── privacy/page.tsx ├── components/ ├── lib/ ├── config/ │ └── site.ts └── tailwind.config.ts ``` ### Vue 3 + Vite ``` my-site/ ├── src/ │ ├── components/ # Vue components (.vue) │ │ └── ui/ # shadcn-vue components │ ├── lib/ # Utilities, cn() │ ├── assets/ # CSS, images │ ├── plugins/ # Vue plugins │ ├── config/ │ │ └── site.ts # Editable content config │ ├── App.vue │ └── main.ts ├── index.html ├── tailwind.config.ts └── package.json ``` ### Nuxt 3 ``` my-site/ ├── app.vue # Root component ├── pages/ # File-based routing │ └── index.vue ├── layouts/ # Layout components │ └── default.vue ├── components/ # Auto-imported components ├── composables/ # Auto-imported composables ├── config/ # Site configuration │ └── site.ts ├── assets/css/ # Global CSS ├── nuxt.config.ts ├── tailwind.config.ts └── package.json ``` --- ## Site Config Pattern (Universal) Keep all editable content in one file — works across all frameworks: ```typescript // config/site.ts (or ~/config/site.ts for Nuxt) export const siteConfig = { name: "Acme AI", tagline: "Write better, faster", description: "AI-powered writing assistant", hero: { badge: "Now in beta", title: "Your words,\nsupercharged", subtitle: "Write 10x faster with AI that understands your style", cta: { text: "Get Started", href: "/signup" }, secondaryCta: { text: "Watch Demo", href: "#demo" }, }, features: [ { icon: "Zap", title: "Lightning Fast", description: "..." }, // ... ], pricing: [ { name: "Free", price: 0, features: [...] }, { name: "Pro", price: 19, features: [...], popular: true }, ], faq: [ { q: "How does it work?", a: "..." }, ], footer: { links: [...], social: [...], } } ``` --- ## Component Library Mapping Each framework has its own component library with similar APIs: | Component | React (shadcn/ui) | Vue 3 (shadcn-vue) | Nuxt 3 (@nuxt/ui) | |-----------|-------------------|---------------------|---------------------| | Button | `<Button>` | `<Button />` | `<UButton />` | | Card | `<Card>` | `<Card />` | `<UCard />` | | Badge | `<Badge>` | `<Badge />` | `<UBadge />` | | Accordion | `<Accordion>` | `<Accordion />` | `<UAccordion />` | | Dialog/Modal | `<Dialog>` | `<Dialog />` | `<UModal />` | | Navigation | `<NavigationMenu>` | `<NavigationMenu />` | `<UNavigationMenu />` | | Tabs | `<Tabs>` | `<Tabs />` | `<UTabs />` | | Sheet/Drawer | `<Sheet>` | `<Sheet />` | `<USheet />` | | Avatar | `<Avatar>` | `<Avatar />` | `<UAvatar />` | | Alert | `<Alert>` | `<Alert />` | `<UAlert />` | **Installation by Framework**: ```bash # React npx shadcn@latest add button card badge accordion dialog navigation-menu tabs sheet separator avatar alert # Vue 3 npx shadcn-vue@latest add button card badge accordion dialog navigation-menu tabs sheet separator avatar alert # Nuxt 3 (@nuxt/ui - auto-installed) # All U* components are available automatically ``` --- ## Animation Library Mapping | Feature | React (Framer Motion) | Vue 3 (@vueuse/motion) | Nuxt 3 (@vueuse/motion) | |---------|----------------------|------------------------|--------------------------| | Basic animation | `<motion.div>` | `v-motion` directive | `v-motion` directive | | Page transitions | `AnimatePresence` | `<Transition>` | `<Transition>` (built-in) | | Scroll triggers | `whileInView` | `useScroll` composable | `useScroll` composable | | Gestures | `whileHover`, `whileTap` | Event bindings | Event bindings | | Stagger children | `staggerChildren` | Config-based | Config-based | ### Cross-Framework Animation Example **React**: ```tsx <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} > Content </motion.div> ``` **Vue 3**: ```vue <div v-motion :initial="{ opacity: 0, y: 20 }" :enter="{ opacity: 1, y: 0 }" :duration="500" > Content </div> ``` **Nuxt 3**: ```vue <div v-motion :initial="{ opacity: 0, y: 20 }" :visible="{ opacity: 1, y: 0 }" :duration="500" > Content </div> ``` --- ## Pre-Implementation Checklist Run this before finalizing any design: ### Design Quality (Framework-Agnostic) - [ ] Typography is distinctive (no Inter/Roboto/Arial) - [ ] Color palette has clear dominant + accent (not evenly distributed) - [ ] Background has atmosphere (not solid white/gray) - [ ] At least one memorable/unforgettable element - [ ] Animations are orchestrated (not scattered) ### Mobile Responsiveness (Framework-Agnostic) - [ ] Hero centers on mobile (no empty grid space) - [ ] All grids collapse to single column - [ ] Forms stack vertically - [ ] Large lists use accordion (not horizontal scroll) - [ ] Font sizes scale down appropriately ### Form Consistency - [ ] Input, select, textarea all styled consistently - [ ] Radio/checkbox visible (check transparent-border styles) - [ ] Dropdown options have readable backgrounds - [ ] Labels use CSS variables (not hardcoded colors) ### Accessibility - [ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI) - [ ] Focus states visible - [ ] Semantic HTML (nav, main, section, article) - [ ] Alt text for images - [ ] Keyboard navigation works ### Framework-Specific - [ ] Using correct component imports for chosen framework - [ ] Animations use framework-appropriate library - [ ] Build configuration matches target framework - [ ] TypeScript types properly configured --- ## Cross-Framework Consistency Guarantees This skill ensures consistency across frameworks: ✅ **Design System**: Same color variables, typography scale, spacing tokens ✅ **Responsive Patterns**: Same mobile-first breakpoints and behaviors ✅ **Animation Timing**: Same durations (200-400ms), easing functions ✅ **Component APIs**: Similar props and event handling patterns ✅ **File Organization**: Logical structure adapted per framework conventions ✅ **Performance**: Optimized bundle sizes, lazy loading strategies **What Adapts Per Framework**: - Syntax (JSX vs Template) - Import paths (@/ vs ~/ vs relative) - Component names (PascalCase vs kebab-case) - State management (useState vs ref/reactive) - Lifecycle hooks (useEffect vs onMounted/watch) - Routing (React Router vs Vue Router vs file-based) --- ## References - **[references/design-philosophy.md](references/design-philosophy.md)** — Extended anti-AI-slop guidance - **[references/mobile-patterns.md](references/mobile-patterns.md)** — Detailed responsive CSS - **[references/shadcn-components.md](references/shadcn-components.md)** — Component quick reference (React-focused) - **[templates/site-config.ts](templates/site-config.ts)** — Full siteConfig example - **Framework Guides**: - React: See init-vite.sh and init-nextjs.sh output - Vue 3: See init-vue-vite.sh output - Nuxt 3: See init-nuxt.sh output --- ## Examples ### Prompt → Multi-Framework Output **Input**: > "Portfolio site for a photographer. Minimal, editorial feel. > Grid gallery with lightbox, about section, contact form." **Design Decisions** (Same for all frameworks): - Tone: Editorial/Magazine - Typography: Cormorant Garamond (display) + Plus Jakarta Sans (body) - Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333) - Unforgettable: Full-bleed hero image with text overlay that reveals on scroll - Motion: Gallery images fade in staggered on scroll **Output Options**: - **React + Vite**: Complete Vite project with responsive gallery, lightbox component - **React + Next.js**: Next.js App Router with image optimization - **Vue 3 + Vite**: Vue 3 composition API with reactive gallery state - **Nuxt 3**: Nuxt 3 with auto-imports, SEO metadata, static generation All outputs maintain identical visual design and user experience. --- ## Migration Guide ### Converting Between Frameworks **React → Vue 3**: - `useState` → `ref()` or `reactive()` - `useEffect` → `onMounted()` + `watch()` - JSX → Vue template syntax - `className` → `class` - `onClick` → `@click` - `{variable}` → `{{ variable }}` **Vue 3 → Nuxt 3**: - Move `src/` contents to root level - Replace `vue-router` with `pages/` directory - Replace manual imports with auto-imports - Add `~/` alias for root imports - Use `useHead()` instead of manual `<head>` **React → Nuxt 3**: - Convert JSX to Vue templates - Replace React hooks with Vue composition API - Move to file-based routing - Use Nuxt-specific modules (@nuxt/image, etc.) --- *Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills. Enhanced with cross-framework support for modern frontend development.*

path: _meta.json
content: ownerId: kn7fmw4ybcy50qzp1d2dvb1h517znaes
slug: frontend-design-ultimate
version: 1.0.0
publishedAt: 1770018489918

path: scripts/bundle-artifact.sh
content: #!/bin/bash
# Bundle a Vite React project into a single HTML file
# Usage: bash scripts/bundle-artifact.sh
# Run from project root (where package.json is)

set -e

echo "📦 Bundling to single HTML file..."

# Check if we're in a project directory
if [ ! -f "package.json" ]; then
  echo "❌ Error: No package.json found. Run this from your project root."
  exit 1
fi

# Check if index.html exists
if [ ! -f "index.html" ]; then
  echo "❌ Error: No index.html found in project root."
  exit 1
fi

# Install bundling dependencies if needed
if ! npm ls parcel > /dev/null 2>&1; then
  echo "📦 Installing bundling dependencies..."
  npm install -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
fi

# Create .parcelrc if it doesn't exist
if [ ! -f ".parcelrc" ]; then
  echo "⚙️ Creating Parcel config..."
  cat > .parcelrc << 'EOF'
{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-tspaths", "..."]
}
EOF
fi

# Build with Parcel
echo "🔨 Building with Parcel..."
npx parcel build index.html --no-source-maps --dist-dir dist-parcel

# Inline all assets
echo "📄 Inlining assets into single HTML..."
npx html-inline -i dist-parcel/index.html -o bundle.html -b dist-parcel

# Clean up
rm -rf dist-parcel .parcel-cache

# Get file size
SIZE=$(ls -lh bundle.html | awk '{print $5}')

echo ""
echo "✅ Bundle created: bundle.html ($SIZE)"
echo ""
echo "You can now share this file or use it as a Claude artifact."
echo ""


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (HIGH)