claude-skills-widgets

A research-backed pattern catalog of lead-gen, CTA, social proof, urgency, and interactive tooling patterns used by top-converting B2B SaaS, fintech, DTC, and consumer brands.

Documentation and code. Each pattern includes description, variations, real-world examples with attribution, implementation notes, and brand archetype compatibility. Most patterns also ship a production-ready component.

Companion to rampstackco/claude-skills for users building landing pages, marketing surfaces, or product onboarding with Claude.

Trust and security

This pattern catalog is a companion to
rampstackco/claude-skills and
follows the same review process before changes merge. To report a security
issue, see the
security policy.

Why a pattern catalog and not just a component library

Most component libraries (Tailwind UI, shadcn/ui, Catalyst) ship code. They solve the "how do I implement this" problem.

This catalog solves a different problem first: "which pattern should I use, and why." Then it ships the code too.

Code without pattern understanding produces generic implementations. Pattern documentation without code can be implemented in any stack, framework, or design system. For users building with Claude or other AI tools, the pattern provides the reasoning and the AI handles the code; for everyone else, the component implementations are ready to drop in.

What's in the catalog

Five pattern categories, ~65 patterns, and 32 component implementations:

• CTA patterns (~20): primary buttons, secondary CTAs, sticky bars, exit-intent, in-content, contextual prompts
• Lead capture patterns (~15): inline forms, multi-step, content gates, modals, progressive profiling, social login
• Social proof patterns (~12): logo strips, testimonials, customer counts, activity feeds, reviews, case studies
• Urgency patterns (~8): countdowns, scarcity indicators, deadline framing, real-time activity
• Interactive tooling patterns (~10): calculators, quizzes, configurators, wizards, comparison tools

CTA

Lead Capture

Social Proof

Urgency

Interactive Tooling

Browse patterns/{category}/README.md for the full pattern list per category.

Featured components

A taste of what is available. Browse the full catalog below.

Component	Preview	What it does
Primary Button CTA		The one-clear-action button pattern. Solid and outlined variants, multiple shapes, optional icon. Pattern · Component · Live
Trust Logo Strip		Horizontal customer logo strip with grayscale-on-hover styling. Pattern · Component · Live
Single Quote Testimonial		One prominent quote with attribution. Minimal, card, or with-headshot variants. Pattern · Component · Live
Countdown Timer		Real-time countdown to a deadline. Updates every second. Pattern · Component · Live
Savings Calculator		Generic config-driven calculator. Define inputs and a compute function via props. Pattern · Component · Live
Hero Stack CTA		Primary button plus an optional secondary action. The standard B2B hero pattern. Pattern · Component · Live

Browse all 32 components on rampstack.co

Component implementations (32 components, 6 categories)

Production-ready React and HTML/CSS implementations of the patterns. Each component ships both variants via shared CSS, customizable through CSS custom properties.

CTA components (6)

• Primary Button CTA (v2.1) - pattern · component · live
• Secondary Text CTA (v2.2) - pattern · component · live
• Sticky Bar CTA (v2.2) - pattern · component · live
• Hero Stack CTA (v2.1) - pattern · component · live
• Footer CTA Section (v2.3) - pattern · component · live
• Multi-Option CTA Cluster (v2.3) - pattern · component · live

Lead Capture components (4)

• Inline Single Field Form (v2.1) - pattern · component · live
• Inline Multi Field Form (v2.2) - pattern · component · live
• Newsletter Signup Inline (v2.2) - pattern · component · live
• Social Login Buttons (v2.3) - pattern · component · live

Social Proof components (6)

• Trust Logo Strip (v2.0) - pattern · component · live
• Featured In Press Strip (v2.6) - pattern · component · live
• Single Quote Testimonial (v2.1) - pattern · component · live
• Testimonial Grid (v2.2) - pattern · component · live
• Customer Count (v2.1) - pattern · component · live
• Review Aggregate (v2.2) - pattern · component · live

Urgency components (3)

• Countdown Timer (v2.1) - pattern · component · live
• Limited Time Offer Banner (v2.3) - pattern · component · live
• Waitlist Position Display (v2.3) - pattern · component · live

Interactive Tooling components (9)

• Savings Calculator (v2.3), covers both the savings calculator and ROI cost calculator patterns - pattern · component · live
• Diagnostic Quiz Assessment (v2.4) - pattern · component · live
• Product-Market Fit Quiz (v2.4) - pattern · component · live
• Multi-Step Recommendation Wizard (v2.4) - pattern · component · live
• Pricing Tier Configurator (v2.5) - pattern · component · live
• Product Feature Configurator (v2.5) - pattern · component · live
• Comparison Tool vs Competitors (v2.5) - pattern · component · live
• Scheduling Tool (v2.6) - pattern · component · live
• Interactive Product Tour (v2.6) - pattern · component · live

Utility components (4)

Utility components ship code without dedicated pattern documentation. They originated in the Threshold reference build and are reusable as generic illustrations or layout helpers.

• Hero Product Mockup (v2.0) - component · live
• Activation Funnel Inline (v2.0) - component · live
• Time to Value Sparkline (v2.0) - component · live
• Flow Connector (v2.0) - component · live

How patterns are documented

Every pattern follows a consistent schema (see patterns/SCHEMA.md):

• What it is and why it works
• When to use and when to avoid
• Variations within the family
• 3-7 real-world examples with attribution
• Implementation and accessibility notes
• Which brand archetypes it pairs with

Patterns reference claude-skills/skills/brand-archetype-system for archetype compatibility. A Bold Confident brand uses different CTA patterns than an Editorial Restrained brand; the documentation captures these fit relationships.

Using the catalog

For people working with Claude or other AI tools: paste the relevant pattern file into context, then ask the AI to implement using your stack. The pattern provides the reasoning; the AI handles the code.

For people building by hand: each pattern is a complete reference for that pattern family. Read the description, pick a variation, follow the implementation notes, or drop in the matching component.

For agencies and consultants: the catalog is a shared vocabulary for client conversations. Pointing at a documented pattern is faster than describing one.

Family repos

This pattern library is part of the Claude Skills family. Other family repos:

Each family repo is MIT-licensed, conforms to the Agent Skills Specification, and is stack-agnostic. Use the full catalog for breadth; use a specialty subset when working in one domain.

Version history

A condensed changelog. See the PR history for full detail.

• v2.6: specialized tooling (scheduling, product tour) and the press-strip variant
• v2.5: configurators (pricing tier, product feature, comparison)
• v2.4: quiz and wizard family (diagnostic, PMF, recommendation wizard)
• v2.3: opens interactive-tooling (savings calculator), plus CTA and urgency expansion
• v2.2: CTA, lead-capture, and social-proof expansion
• v2.1: foundational pattern-mapped components
• v2.0: Threshold seed migration (5 components)
• v1.x: pattern documentation only (no component implementations)

Contributing

See CONTRIBUTING.md. Pattern submissions welcome with real-world attribution.

License

MIT. See LICENSE.