When the user wants to design, optimize, or audit call-to-action (CTA) buttons. Also use when the user mentions "CTA," "call to action," "button design," "conversion button," "primary action," "CTA copy," "button text," "CTA placement," "conversion CTA," or "action button." For landing pages, use landing-page-generator.
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
User stage: Awareness, consideration, decision
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
