Frontend Design Ultimate

kesslerio/frontend-design-ultimate-clawhub-skill

This is for when you need to ship a landing page or marketing site that doesn't look like every other SaaS clone. It generates production-ready React sites with Tailwind and shadcn/ui from text descriptions alone, no Figma required. The philosophy is aggressive: it bans generic fonts like Inter, pushes you to pick extreme aesthetic directions (brutalist, maximalist, retro-futuristic), and includes detailed mobile-first patterns with real CSS fixes. You get either a Vite static bundle or a Next.js app ready for Vercel. The whole thing is built around a single site config file so content stays editable. Good for portfolios, dashboards, or anything where looking generic is worse than looking polarizing.

skills.sh installs: 331
GitHub stars: 3
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add kesslerio/frontend-design-ultimate-clawhub-skill --skill frontend-design-ultimate --agent claude-code

Installs into .claude/skills of the current project.

Files

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?