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.