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

// ❌ 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

// ❌ 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

// ❌ 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

// ❌ 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

// ❌ 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

// ❌ 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

// components/Hero.tsx

export function Hero() {