⚠
High Risk:This skill has significant security concerns. Review the findings below before installing.

frontend-design-ultimate

⚠Caution·Scanned 2/18/2026

High-risk skill: installs and runs shell scripts and remote CLIs (e.g., bash scripts/init-vite.sh, npx shadcn@latest, npm install) that write project files such as package.json and ~/.claude/skills/frontend-design-ultimate. It scaffolds React/Tailwind projects but executes network-retrieved code and performs local file writes.

from clawhub.ai·vad764ac·66.2 KB·0 installs
Scanned from 1.0.0 at ad764ac · Transparency log ↗
$ vett add clawhub.ai/kesslerio/frontend-design-ultimateReview security findings before installing

Frontend Design Ultimate

🎨 Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed.

What is this?

An OpenClaw/Claude Code skill that generates bold, memorable web designs from plain text requirements. No Figma, no wireframes — just describe what you want.

Key Features:

  • 🚫 Anti-AI-slop — Explicit guidance to avoid generic designs (no Inter, no purple gradients, no centered layouts)
  • 📱 Mobile-first patterns — Responsive CSS that actually works
  • ⚡ Two workflows — Vite (pure static) or Next.js (Vercel deploy)
  • 🧩 shadcn/ui components — 10 common components pre-installed, add more with CLI
  • 📦 Single-file bundling — Bundle entire sites to one HTML file

Quick Start

Install the Skill

# OpenClaw
openclaw skill install frontend-design-ultimate

# Claude Code (copy to .claude/skills/)
git clone https://github.com/kesslerio/frontend-design-ultimate-clawhub-skill.git ~/.claude/skills/frontend-design-ultimate

Use It

Just describe what you want:

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.

The skill will:

  1. Commit to a bold aesthetic direction
  2. Choose distinctive typography (no Inter!)
  3. Build with React + Tailwind + shadcn/ui
  4. Apply mobile-first responsive patterns
  5. Output production-ready code

What Makes This Different?

vs. Generic AI Design

Generic AIThis Skill
Inter font everywhereDistinctive typography choices
Purple gradientsContext-appropriate palettes
Centered layoutsIntentional spatial composition
No animationsOrchestrated motion
Solid backgroundsAtmospheric textures

Based On

  • Anthropic's frontend-design — Design philosophy, anti-AI-slop guidance
  • Anthropic's web-artifacts-builder — React+Tailwind+shadcn scaffolding
  • Community frontend-design-v2 — Mobile-first responsive patterns

Workflows

Option A: Vite (Pure Static)

bash scripts/init-vite.sh my-site
cd my-site
npm run dev

# Build
npm run build

# Bundle to single HTML
bash scripts/bundle-artifact.sh

Option B: Next.js (Vercel)

bash scripts/init-nextjs.sh my-site
cd my-site
npm run dev

# Deploy
vercel

Documentation

  • SKILL.md — Main skill instructions
  • references/design-philosophy.md — Anti-AI-slop manifesto
  • references/mobile-patterns.md — Responsive CSS patterns
  • references/shadcn-components.md — Component quick reference
  • templates/site-config.ts — Editable content config example

Requirements

  • Node.js 18+
  • npm

License

Apache 2.0 — See LICENSE

Credits

Built on the shoulders of:

Made with 🎨 by Kessler.io