copywriter

What this skill does

# 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
<Button>Submit</Button>
<Button>OK</Button>
<Button>Click Here</Button>

// ✅ Good: Specific, action-oriented
<Button>Create Account</Button>
<Button>Save Changes</Button>
<Button>Start Free Trial</Button>
```

**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 (
    <div>
      <input type="password" onChange={(e) => validate(e.target.value)} />
      {error && <p className="text-red-600">{error}</p>}
    </div>
  )
}
```

**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
<EmptyState message="No results" />

// ✅ Good: Explains and guides user
function EmptySearchResults() {
  return (
    <div className="text-center py-12">
      <h3 className="text-lg font-semibold">No results found</h3>
      <p className="mt-2 text-gray-600">
        Try adjusting your search or filters to find what you're looking for
      </p>
      <Button onClick={clearFilters} className="mt-4">
        Clear Filters
      </Button>
    </div>
  )
}

function EmptyInbox() {
  return (
    <div className="text-center py-12">
      <h3 className="text-lg font-semibold">You're all caught up!</h3>
      <p className="mt-2 text-gray-600">
        No new messages. Enjoy your day! 🎉
      </p>
    </div>
  )
}
```

**Empty State Formula:**

- Headline (what's empty)
- Explanation (why it's empty)
- Action (what to do next)

---

### Form Labels

```typescript
// ❌ Bad: Unclear, jargon
<Label>Metadata</Label>
<Label>FTP Credentials</Label>

// ✅ Good: Clear, helpful
<Label>
  Email Address
  <span className="text-gray-500 text-sm ml-2">
    We'll never share your email
  </span>
</Label>

<Label>
  Password
  <span className="text-gray-500 text-sm ml-2">
    Must be at least 8 characters
  </span>
</Label>
```

**Label Guidelines:**

- Use clear, everyday language
- Add help text for complex fields
- Avoid technical jargon

---

### Loading States

```typescript
// ❌ Bad: Generic
<Loading message="Loading..." />

// ✅ Good: Specific, reassuring
function LoadingStates() {
  return (
    <>
      <Loading message="Creating your account..." />
      <Loading message="Processing payment..." />
      <Loading message="Uploading image (2/5)..." />
      <Loading message="This might take a minute..." />
    </>
  )
}
```

---

### Success Messages

```typescript
// ❌ Bad: Just confirms action
<Toast message="Saved" />

// ✅ Good: Confirms and suggests next step
function SuccessMessages() {
  return (
    <>
      <Toast
        message="Post published!"
        action={
          <Button onClick={viewPost}>View Post</Button>
        }
      />

      <Toast
        message="Payment successful. Receipt sent to your email."
      />

      <Toast
        message="Profile updated. Changes are now live."
      />
    </>
  )
}
```

---

## Landing Page Copy

### Hero Section

```typescript
// components/Hero.tsx

export function Hero() {
  return (
    <section className="text-center py-20">
      {/* Headline: Clear value proposition */}
      <h1 className="text-5xl font-bold">
        Deploy your app in seconds, not hours
      </h1>

      {/* Subheadline: Expand on headline */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        Skip the complex setup. Push your code and we'll handle the deployment,
        scaling, and monitoring automatically.
      </p>

      {/* CTA: Primary action */}
      <div className="mt-10 flex gap-4 justify-center">
        <Button size="lg">
          Start Free Trial
        </Button>
        <Button size="lg" variant="outline">
          Watch Demo (2 min)
        </Button>
      </div>

      {/* Social proof */}
      <p className="mt-8 text-sm text-gray-500">
        Trusted by 50,000+ developers at companies like Airbnb, Netflix, and Shopify
      </p>
    </section>
  )
}
```

**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 (
    <section className="py-20">
      <h2 className="text-3xl font-bold text-center">
        Everything you need to ship fast
      </h2>

      <div className="mt-12 grid md:grid-cols-3 gap-8">
        {features.map((feature) => (
          <div key={feature.title}>
            <div className="text-4xl mb-4">{feature.icon}</div>
            <h3 className="text-xl font-semibold">{feature.title}</h3>
            <p className="mt-2 text-gray-600">{feature.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}
```

**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
<Button>Sign Up</Button>
<Button>Learn More</Button>

// ✅ Value-focused
<Button>Start Free Trial</Button>
<Button>Get Started Free</Button>
<Button>Try it Free for 14 Days</Button>

// ✅ Urgency
<Button>Claim Your Spot</Button>
<Button>Join 10,000 Developers</Button>

// ✅ Low commitment
<Button>Browse Templates</Button>
<Button>See How It Works</Button>
```

**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 (
    <Html>
      <Heading>Welcome to TechStart, {name}! 👋</Heading>

      <Text>
        Thanks for signing up! We're excited to help you deploy faster.
      </