Templateclaw ui

Skill jeromwolf/templateclaw/skills/templateclaw-ui

32 production-ready templates as Claude Code skills. Type /templateclaw to scaffold any project. Landing pages, dashboards, UI components, project setup, dev methodology.

Install

npx -y skills add jeromwolf/templateclaw --skill templateclaw-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Generate modern UI components — cards, forms, navigation, modals, tables, hero sections, footers, and pricing tables. 2026 glassmorphism design with Tailwind CSS. Copy-paste ready.

SKILL.md

3.8 KB, as published. Nobody here has run it

TemplateClaw — UI Component Generator

Generate copy-paste ready UI components with 2026 design trends.

When Invoked

If argument provided (e.g., /templateclaw-ui cards), generate that component
If no argument, ask: "Which component? (cards / forms / nav / modal / table / hero / footer / pricing)"
Multiple components: /templateclaw-ui cards,forms,nav generates all three

Components

Cards (6 variants)

Feature Card: Icon + title + description + CTA link
Stats Card: Big number + label + trend indicator (↑/↓)
Profile Card: Avatar + name + role + social links
Product Card: Image placeholder + title + price + add-to-cart
Testimonial Card: Quote + author + star rating
Pricing Card: Tier name + price + features list + CTA button

Forms (4 variants)

Login Form: Email + password + remember me + social login buttons
Signup Form: Name + email + password + confirm + terms checkbox
Contact Form: Name + email + subject + message textarea + submit
Search Form: Search input with icon + filter dropdowns + results area

Navigation (3 variants)

Top Navbar: Logo + links + search + CTA button + mobile hamburger menu
Sidebar Nav: Logo + grouped links with icons + collapse toggle
Breadcrumb: Home > Category > Current with separator icons

Modal (3 variants)

Confirm Modal: Title + message + Cancel/Confirm buttons + backdrop blur
Form Modal: Title + form fields + validation + submit
Image Modal: Lightbox with zoom + prev/next + close

Table (2 variants)

Data Table: Sortable headers + search + pagination + row actions
Comparison Table: Feature rows × product columns + check/cross icons

Hero Section (3 variants)

Centered Hero: Headline + subtitle + CTA + gradient mesh background
Split Hero: Text left + visual right (gradient placeholder) + floating elements
Video Hero: Background video placeholder + overlay text + play button

Footer (2 variants)

Multi-column Footer: Logo + 4 link columns + newsletter + social icons + copyright
Minimal Footer: Logo + essential links + copyright (single row)

Pricing Table (2 variants)

3-Tier Pricing: Free/Pro/Enterprise cards + feature comparison + annual toggle
Usage-based Pricing: Slider + calculated price + feature list

Design Tokens

All components share:

/* Glassmorphism Card */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

/* Gradient Button */
.btn-gradient {
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3);
}

/* Input Field */
.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #F8FAFC;
}
.input-glass:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

Output Format

Each component as a self-contained HTML snippet
Include a preview wrapper (<div class="preview">) showing the component
Tailwind classes + minimal custom CSS

Document props/slots with HTML comments:

<!-- PROP: title (string) -->
<!-- PROP: icon (svg or emoji) -->
<!-- SLOT: card-content -->

Accessibility: ARIA roles, keyboard support, focus trap for modals