visual-cues-cta-psychology

Design effective CTAs using visual attention and gaze psychology principles. Use when designing landing pages, button hierarchies, conversion elements, or optimizing user attention flow through interfaces.

210 stars

byflpbalada

View on GitHub Installation ↓

Best use case

visual-cues-cta-psychology is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using visual-cues-cta-psychology should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/visual-cues-cta-psychology/SKILL.md --create-dirs "https://raw.githubusercontent.com/flpbalada/my-opencode-config/main/skills/visual-cues-cta-psychology/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/visual-cues-cta-psychology/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How visual-cues-cta-psychology Compares

Feature / Agent	visual-cues-cta-psychology	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Visual Cues & CTA Psychology - Guiding User Attention

Visual cues leverage human attention and perception to guide user behavior and direct focus toward specific elements. Understanding how the visual system processes information enables designers to create more effective call-to-action experiences.

## When to Use This Skill

- Designing landing pages and conversion funnels
- Creating button hierarchies and CTA elements
- Optimizing user attention flow
- Improving click-through rates
- Designing hero sections and key content
- Planning information architecture visually

## Core Principle

Human attention follows predictable patterns:
1. **Evolutionary triggers** (faces, movement, eyes)
2. **Learned patterns** (reading direction, F/Z)
3. **Design signals** (size, color, contrast)
4. **Directional cues** (arrows, gaze, lines)

## Reading Pattern Quick Guide

| Pattern | Use For | CTA Placement |
|---------|---------|---------------|
| **F-Pattern** | Text-heavy content | First 2 paragraphs, subheadings |
| **Z-Pattern** | Visual/landing pages | Bottom-right (terminal area) |
| **Gutenberg** | General pages | Top-left (start), bottom-right (end) |

---

## Progressive Disclosure

| Topic | File | When to Use |
|-------|------|-------------|
| Eye patterns & gaze | [context/gaze-patterns.md](context/gaze-patterns.md) | F-pattern, Z-pattern, thumb zones |
| Visual cue types | [context/visual-cue-types.md](context/visual-cue-types.md) | Arrows, gaze direction, encapsulation |
| CTA design | [context/cta-design.md](context/cta-design.md) | Button color, copy, placement |

## CTA Quick Reference

### Color Psychology

| Color | Effect | Best For |
|-------|--------|----------|
| Red | Urgency, action | Limited time CTAs |
| Orange | Friendly, confident | Sign ups, trials |
| Green | Safety, growth | Positive actions |
| Blue | Trust, professional | B2B, financial |
| Purple | Premium, creative | Luxury products |

### Copy Patterns

**First Person (Outperforms):** "Get My Free Guide", "Start My Trial"
**Action + Benefit:** "Start Saving Today", "Get Instant Access"
**Risk Reduction:** "Try Free for 14 Days", "No Credit Card Required"

## Resources

- [Don't Make Me Think - Steve Krug](https://sensible.com/)
- [Eye-Tracking Research - Nielsen Norman Group](https://www.nngroup.com/topic/eyetracking/)
- [Gestalt Principles in UI Design](https://lawsofux.com/)

Related Skills

trust-psychology

210

from flpbalada/my-opencode-config

Build trust signals that reduce perceived risk and enable user action. Use when designing landing pages, checkout flows, onboarding experiences, or any conversion point where user hesitation is a barrier.

social-proof-psychology

210

from flpbalada/my-opencode-config

Leverage social proof principles to build trust and influence user behavior. Use when designing landing pages, adding testimonials, displaying user stats, or optimizing conversion elements with social validation.

loss-aversion-psychology

210

from flpbalada/my-opencode-config

Leverage loss aversion in product design and messaging. Use when designing retention features, pricing strategies, onboarding flows, or any experience where framing around potential loss can drive behavior.

halo-effect-psychology

210

from flpbalada/my-opencode-config

Apply the halo effect in product design and UX. Use when designing first impressions, brand perception, feature presentation, or understanding how one positive attribute influences perception of others.

cognitive-fluency-psychology

210

from flpbalada/my-opencode-config

Apply cognitive fluency principles to improve clarity, trust, and conversion. Use when designing landing pages, writing copy, creating interfaces, or optimizing any content for better user comprehension and engagement.

what-not-to-do-as-product-manager

210

from flpbalada/my-opencode-config

Anti-patterns and mistakes to avoid as a product manager. Use when evaluating leadership behaviors, improving team dynamics, reflecting on management practices, or onboarding new product managers.

vercel-sandbox

210

from flpbalada/my-opencode-config

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

value-realization

210

from flpbalada/my-opencode-config

Analyze if end users discover clear value. Use when evaluating product concepts, analyzing adoption, or uncertain about direction.

user-story-fundamentals

210

from flpbalada/my-opencode-config

Capture requirements from user perspective with structured user stories. Use when writing backlog items, defining acceptance criteria, prioritizing features, or communicating requirements between product and development.

typescript-satisfies-operator

210

from flpbalada/my-opencode-config

Guides proper usage of TypeScript's satisfies operator vs type annotations. Use this skill when deciding between type annotations (colon) and satisfies, validating object shapes while preserving literal types, or troubleshooting type inference issues.

typescript-interface-vs-type

210

from flpbalada/my-opencode-config

Guides when to use interface vs type in TypeScript. Use this skill when defining object types, extending types, or choosing between interface and type aliases.

typescript-best-practices

210

from flpbalada/my-opencode-config

Guides TypeScript best practices for type safety, code organization, and maintainability. Use this skill when configuring TypeScript projects, deciding on typing strategies, writing async code, or reviewing TypeScript code quality.