Chris-Maskey/visual-cues-cta-psychology
skills/visual-cues-cta-psychology/SKILL.md
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.
testing
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add Chris-Maskey/opencode-config visual-cues-cta-psychologyInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 23, 2026, 2:53 AM201.6s4 files scanned
SKILL.md
- name:
- visual-cues-cta-psychology
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:
- Evolutionary triggers (faces, movement, eyes)
- Learned patterns (reading direction, F/Z)
- Design signals (size, color, contrast)
- 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 | F-pattern, Z-pattern, thumb zones | | Visual cue types | context/visual-cue-types.md | Arrows, gaze direction, encapsulation | | CTA design | 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
- Eye-Tracking Research - Nielsen Norman Group
- Gestalt Principles in UI Design
Related Skills
Chris-Maskey/what-not-to-do-as-product-manager
tools
VerifiedTrustedCommunity
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.
SKILL.mdUpdated Apr 23, 2026
Chris-Maskey/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
SKILL.mdUpdated Apr 23, 2026
Chris-Maskey/vercel-sandbox
tools
VerifiedTrustedCommunity
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.
SKILL.mdUpdated Apr 23, 2026
Chris-Maskey/vercel-react-native-skills
development
VerifiedTrustedCommunity
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
SKILL.mdUpdated Apr 23, 2026