Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
<p align="center"> <img src="assets/images/hero.svg" alt="Claude Skills Widgets" width="800"/> </p>
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
<table> <tr> <td align="center" width="20%"> <a href="patterns/cta/README.md"><img src="assets/illustrations/category-cta.png" alt="CTA patterns category illustration" width="100%"></a> <p><strong>CTA</strong></p> </td> <td align="center" width="20%"> <a href="patterns/lead-capture/README.md"><img src="assets/illustrations/category-lead-capture.png" alt="Lead capture patterns category illustration" width="100%"></a> <p><strong>Lead Capture</strong></p> </td> <td align="center" width="20%"> <a href="patterns/social-proof/README.md"><img src="assets/illustrations/category-social-proof.png" alt="Social proof patterns category illustration" width="100%"></a> <p><strong>Social Proof</strong></p> </td> <td align="center" width="20%"> <a href="patterns/urgency/README.md"><img src="assets/illustrations/category-urgency.png" alt="Urgency patterns category illustration" width="100%"></a> <p><strong>Urgency</strong></p> </td> <td align="center" width="20%"> <a href="patterns/interactive-tooling/README.md"><img src="assets/illustrations/category-interactive-tooling.png" alt="Interactive tooling patterns category illustration" width="100%"></a> <p><strong>Interactive Tooling</strong></p> </td> </tr> </table>
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 | <img src="assets/components/primary-button-cta.png" alt="Primary Button CTA preview" width="240"> | The one-clear-action button pattern. Solid and outlined variants, multiple shapes, optional icon. Pattern · Component · Live |
| Trust Logo Strip | <img src="assets/components/trust-logo-strip.png" alt="Trust Logo Strip preview" width="240"> | Horizontal customer logo strip with grayscale-on-hover styling. Pattern · Component · Live |
| Single Quote Testimonial | <img src="assets/components/single-quote-testimonial.png" alt="Single Quote Testimonial preview" width="240"> | One prominent quote with attribution. Minimal, card, or with-headshot variants. Pattern · Component · Live |
| Countdown Timer | <img src="assets/components/countdown-timer.png" alt="Countdown Timer preview" width="240"> | Real-time countdown to a deadline. Updates every second. Pattern · Component · Live |
| Savings Calculator | <img src="assets/components/savings-calculator.png" alt="Savings Calculator preview" width="240"> | Generic config-driven calculator. Define inputs and a compute function via props. Pattern · Component · Live |
| Hero Stack CTA | <img src="assets/components/hero-stack-cta.png" alt="Hero Stack CTA preview" width="240"> | 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:
| Repo | Focus | Skills |
|---|---|---|
| claude-skills | Full catalog | 102 |
| claude-skills-starter | General-purpose lite | 14 |
| claude-skills-seo | SEO consulting | 12 |
| claude-skills-pm | Product management | 12 |
| awesome-claude-skills | Curated discovery list | n/a |
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.