# Copywriter Skill I help you write clear, compelling copy for your product, marketing, and user experience. ## What I Do **UX Writing:** - Button labels, form fields, error messages - Empty states, onboarding flows - Tooltips, help text - Confirmation dialogs **Marketing Copy:** - Landing pages, hero sections - Feature descriptions - Call-to-action (CTA) buttons - Email campaigns **Product Content:** - Product descriptions - Feature announcements - Release notes - Documentation ## UX Writing Patterns ### Button Labels ```typescript // ❌ Bad: Vague, passive // ✅ Good: Specific, action-oriented ``` **Guidelines:** - Use verb + noun ("Save Changes" not "Save") - Be specific ("Delete Post" not "Delete") - Show outcome ("Start Free Trial" not "Submit") --- ### Error Messages ```typescript // ❌ Bad: Technical, blaming user "Invalid input" "Error 422: Unprocessable Entity" "You entered the wrong password" // ✅ Good: Helpful, actionable "Please enter a valid email address" "We couldn't find an account with that email" "Password must be at least 8 characters" // Implementation function PasswordInput() { const [error, setError] = useState('') const validate = (password: string) => { if (password.length < 8) { setError('Password must be at least 8 characters') } else if (!/[A-Z]/.test(password)) { setError('Password must include at least one uppercase letter') } else if (!/[0-9]/.test(password)) { setError('Password must include at least one number') } else { setError('') } } return (

validate(e.target.value)} /> {error &&

{error}

}

) } ``` **Error Message Formula:** 1. What happened 2. Why it happened (optional) 3. How to fix it --- ### Empty States ```typescript // ❌ Bad: Just says it's empty // ✅ Good: Explains and guides user function EmptySearchResults() { return (

No results found

Try adjusting your search or filters to find what you're looking for

) } function EmptyInbox() { return (

You're all caught up!

No new messages. Enjoy your day! 🎉

) } ``` **Empty State Formula:** - Headline (what's empty) - Explanation (why it's empty) - Action (what to do next) --- ### Form Labels ```typescript // ❌ Bad: Unclear, jargon Metadata FTP Credentials // ✅ Good: Clear, helpful Email Address We'll never share your email Password Must be at least 8 characters ``` **Label Guidelines:** - Use clear, everyday language - Add help text for complex fields - Avoid technical jargon --- ### Loading States ```typescript // ❌ Bad: Generic // ✅ Good: Specific, reassuring function LoadingStates() { return ( <> ) } ``` --- ### Success Messages ```typescript // ❌ Bad: Just confirms action // ✅ Good: Confirms and suggests next step function SuccessMessages() { return ( <> View Post } /> ) } ``` --- ## Landing Page Copy ### Hero Section ```typescript // components/Hero.tsx export function Hero() { return (

{/* Headline: Clear value proposition */}

Deploy your app in seconds, not hours

{/* Subheadline: Expand on headline */}

Skip the complex setup. Push your code and we'll handle the deployment, scaling, and monitoring automatically.

{/* CTA: Primary action */}

{/* Social proof */}

Trusted by 50,000+ developers at companies like Airbnb, Netflix, and Shopify

) } ``` **Hero Copy Formula:** 1. Headline: Main benefit (not what you do) 2. Subheadline: How it works or who it's for 3. CTA: Primary action 4. Social proof: Build credibility **Examples:** ```markdown ❌ Bad: "Cloud Deployment Platform" "We provide deployment services" ✅ Good: "Deploy with confidence" "Ship faster with zero-config deploys" "From code to production in 30 seconds" ``` --- ### Feature Descriptions ```typescript // components/Features.tsx const features = [ { title: 'Lightning-Fast Deploys', description: 'Push your code and see it live in under 30 seconds. No waiting, no config files.', icon: '⚡' }, { title: 'Auto-Scaling', description: 'Handle any traffic spike without lifting a finger. We scale from zero to millions seamlessly.', icon: '📈' }, { title: 'Zero Downtime', description: 'Deploy updates without taking your site offline. Your users won't even notice.', icon: '🛡️' } ] export function Features() { return (

Everything you need to ship fast

{features.map((feature) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } ``` **Feature Copy Guidelines:** - Focus on benefits, not features - Use active voice - Be specific (numbers, timeframes) - Keep it scannable --- ### Call-to-Action (CTA) ```typescript // Different CTA styles // ❌ Generic // ✅ Value-focused // ✅ Urgency // ✅ Low commitment ``` **CTA Copy Formula:** - Start with a verb - Highlight the benefit - Remove friction ("Free", "No credit card", etc.) --- ## Email Copywriting ### Welcome Email ```typescript // Email template (React Email) import { Button, Html, Heading, Text } from '@react-email/components' export function WelcomeEmail({ name }: { name: string }) { return ( Welcome to TechStart, {name}! 👋 Thanks for signing up! We're excited to help you deploy faster. Here's what to do next:

Connect your Git repository
Deploy your first project (takes 2 minutes)
Invite your team members

Need help? Reply to this email or check our{' '} docs. Happy deploying!
The TechStart Team ) } ``` ### Transactional Email ```typescript export function PaymentSuccessEmail({ orderNumber, total }: { orderNumber: string total: string }) { return ( Payment Successful We've received your payment of {total}. Order Number: {orderNumber}
Receipt: Sent to your email Questions? Contact support@techstart.com ) } ``` --- ## Microcopy Examples ### Tooltips ```typescript // ❌ Bad: Repeats label // ✅ Good: Adds helpful context Public ``` ### Confirmation Dialogs ```typescript // ❌ Bad: Scary, unclear

Claude Code Plugins

Daily Brief

frontend-design

compounding-engineering

feature-dev

pr-review-toolkit

code-review

agent-sdk-dev

javascript-typescript

commit-commands

compound-engineering

python-development

backend-development

document-skills

code-refactoring

frontend-excellence

security-guidance

ui-designer

database-design

context-management

code-review-ai

code-documentation

agent-orchestration

llm-application-dev

taskmaster

developer-essentials

chrome-devtools-mcp

claude-flow

supabase-toolkit

claude-mem

plugin-dev

hookify

machine-learning-ops

scientific-thinking

multi-platform-apps

gemini-cli

playwright-skill

seo-technical-optimization

context7-docs-fetcher

plugin-orchestrator

10x-fullstack-engineer

documentation-generator

problem-solver-specialist

tdd-workflows

visual-documentation-skills

Copywriter