cta-generator

# Components: Call-to-Action (CTA) Guides CTA button design for conversion. A well-designed CTA can increase conversion by 25–10%. **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## Initial Assessment **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for conversion goals. Identify: 1. **Context**: Hero, form, pricing, product page 2. **User stage**: Awareness, consideration, decision 3. **Primary action**: Sign up, buy, trial, download ## Design Principles ### Visual Clarity - **Look like buttons**: Background, border, corner radius, shadow - **Stand out**: Contrasting color; clear hierarchy - **Size**: ≥48×48px for touch; minimum 48px wide ### Hierarchy - **Primary CTA**: One per section; impossible to miss - **Secondary CTA**: Lower priority; visually distinct - **Avoid**: Multiple competing CTAs causing choice overload ### Color & Shape - **Color**: High contrast; red/orange for urgency - **Shape**: Rounded = friendly; angled = dynamic - **Accessibility**: →.5:1 contrast for text ## Copy Best Practices - **Action-oriented**: "Buy," "Sign up," "Subscribe," "Get started" - **Loss aversion**: "Claim Your Discount Before It's Gone" vs "Get 10% Off"; see **discount-marketing-strategy** for discount campaign design - **Clear, no ambiguity**: User knows exactly what happens - **Scarcity/urgency**: When appropriate; avoid overuse ## Placement - **Above the fold** for primary actions - **After value proposition**; build value before CTA - **Near trust signals** (testimonials, badges) - **Sticky/fixed** for long pages (use sparingly) ## Technical - **Semantic HTML**: `<button>` or `<a>` with `role="button"` when needed - **Visible focus state** for keyboard users - **Loading state** for async actions: disable button during async operations; show spinner or loading text; prevent double-submit - **cursor-pointer**: Add `cursor-pointer` to all clickable CTAs; default cursor on interactive elements is poor UX - **aria-label**: Use `aria-label` for icon-only buttons (e.g., close, search); screen readers need descriptive labels - **Hover stability**: Use color/opacity transitions (150–300ms); avoid scale transforms that shift layout ## Testing - A/B test: color, copy, placement, size - Measure: click-through rate, conversion rate ## Output Format - **CTA copy** suggestions - **Design** notes (color, size, hierarchy) - **Placement** recommendations - **Accessibility** checklist (cursor-pointer, aria-label, focus, loading state) ## Related Skills - **hero-generator**: Hero typically contains primary CTA - **landing-page-generator**: CTA is step 5 of landing page flow; single-goal pages - **testimonials-generator**: Testimonials near CTAs boost conversion - **trust-badges-generator**: Badges near CTAs increase trust - **pricing-page-generator**: CTA on pricing pages (e.g., "Start free trial")