Claude Skills for web & UI
Generate production-quality HTML, Tailwind, and component layouts. Landing pages, email HTML, forms, dashboards, pricing pages. Capability skills for any role.
How to install
Claude Code (CLI): Download the pack, then unzip into your skills folder.
mkdir -p ~/.claude/skills
unzip ~/Downloads/web-ui-pack.zip -d ~/.claude/skills/For project-only skills, use .claude/skills/ in your repo root instead. Restart Claude Code (or the session) and the skills become available.
Claude.ai (web): Upload via Settings → Skills (where supported on your plan).
Skills in this pack
Landing Page Builder
Generates a full landing page in HTML+Tailwind: hero, features, social proof, pricing, FAQ, CTA, footer.
Email HTML Builder
Generates transactional or marketing email HTML that survives Outlook, Gmail dark mode, and mobile clients.
Form Builder
Generates accessible HTML forms (signup, contact, multi-step) with validation and error states.
Component Library Scaffolder
Scaffolds a Tailwind component library: buttons, inputs, cards, modals, toasts. Variants documented.
Marketing Site Scaffolder
Scaffolds a multi-page marketing site (Home, About, Pricing, Blog, Contact) with consistent layout.
Dashboard Layout Builder
Generates an app dashboard layout: sidebar nav, header, KPI cards, table, chart placeholders. Responsive.
Pricing Page Builder
Generates a pricing page: 3-tier cards, comparison table, FAQ, monthly/annual toggle, popular plan highlight.
Blog Template Builder
Generates blog post + listing templates: typography, code blocks, callouts, TOC, related posts.
Comparison Table Builder
Generates product or feature comparison tables: sticky header, hover states, mobile-friendly cards.
OG Image Generator
Generates Open Graph / social card images from title + author + brand. Templated via Satori or Puppeteer.
Hero Section Variants
5-7 hero section variants in HTML+Tailwind: centered, split, image-right, video-bg, code, split-form.
Web Interface Guidelines Reviewer
Reviews your UI code against accessibility + web interface guidelines and reports issues as terse file:line findings.
React View Transition Animator
Adds native-feeling animations with React's View Transition API — shared elements, route changes, list reorder — no animation library.
Distinctive UI Designer
Builds production-grade frontend with a bold, cohesive aesthetic — distinctive typography, color, and motion, not the default generic look.