frontend-design-ultimate

LeoYeAI/openclaw-master-skillsArchitecture & DesignAudit passedSnapshot b564ee2d5d75

Summary

Create distinctive, production-grade static sites with React, 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. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.

SKILL.md

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.

Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
Output: Vite (static HTML) or Next.js (Vercel-ready)

Quick Start

"Build a SaaS landing page for an AI writing tool. Dark theme, 
editorial typography, subtle grain texture. Pages: hero with 
animated demo, features grid, pricing table, FAQ accordion, footer."

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

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)

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #fafafa;
  --text-secondary: #a1a1a1;
  --accent: #ff6b35;
  --accent-hover: #ff8555;
}

/* Subtle grain overlay */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,...") repeat;
  opacity: 0.03;
  pointer-events: none;
}

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

/* Tablet - stack sidebars */
@media (max-width: 1200px) { }

/* Mobile - full single column */
@media (max-width: 768px) { }

/* Small mobile - compact spacing */
@media (max-width: 480px) { }

@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 */
}

# 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

# 1. Initialize
bash scripts/init-nextjs.sh my-site
cd my-site

# 2. Develop
npm run dev

# 3. Deploy to Vercel
vercel

my-site/
├── src/
│   ├── components/     # React components
│   ├── lib/           # Utilities, cn()
│   ├── styles/        # Global CSS
│   ├── config/
│   │   └── site.ts    # Editable content config
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── tailwind.config.ts
└── package.json

my-site/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── privacy/page.tsx
├── components/
├── lib/
├── config/
│   └── site.ts
└── tailwind.config.ts

// config/site.ts
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: [...],
  }
}

frontend-design-ultimate

Summary

SKILL.md

Frontend Design Ultimate

Quick Start

Design Thinking (Do This First)

1. Understand Context

2. Choose an Extreme Tone

3. Define the Unforgettable Element

Aesthetics Guidelines

Typography — NEVER Generic

Color & Theme

Motion & Animation

Spatial Composition

Backgrounds & Atmosphere

Mobile-First Patterns

Critical Rules

Breakpoints

Font Scaling

Build Workflow

Option A: Vite (Pure Static)

Option B: Next.js (Vercel Deploy)

Project Structure

Vite Static

Next.js

Site Config Pattern

Pre-Implementation Checklist

Design Quality

Mobile Responsiveness

Form Consistency

Accessibility

shadcn/ui Components

References

Examples

Prompt → Output

Related skills