# Write in Active Voice

**MUST** · **ID:** `content-active-voice` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-active-voice

> MUST: Write instructions, empty states, and errors in active voice — "Install the CLI", not "The CLI will be installed".

Lead every instruction with the verb the user performs, not with what happens to them

Passive constructions hide the actor, so the reader has to reconstruct who does what before they can act. Active voice puts the verb first and cuts word count, which matters most in instructions, empty states, and error copy where the user is already stuck.

## Bad — do not do this

`content-active-voice-bad`

```tsx
export function ActiveVoiceBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <h4 className="font-medium text-foreground">Getting started</h4>
        <ol className="space-y-2 text-sm text-muted-foreground list-decimal list-inside">
          <li>The CLI will be installed by the setup script.</li>
          <li>
            Once authentication has been completed, the project can be linked to
            an existing team by the user.
          </li>
          <li>
            Your first deployment will then be created and a preview URL will be
            provided.
          </li>
        </ol>
        <p className="text-xs text-muted-foreground">
          72 words. No sentence says who does what.
        </p>
      </div>
      <p className="text-xs text-error">
        Passive voice buries the actor and the action — the reader can't tell
        what to actually do
      </p>
    </div>
  );
}
```

## Good — do this

`content-active-voice-good`

```tsx
export function ActiveVoiceGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-3">
        <h4 className="font-medium text-foreground">Getting started</h4>
        <ol className="space-y-2 text-sm text-muted-foreground list-decimal list-inside">
          <li>Install the CLI.</li>
          <li>Log in, then link the project to your team.</li>
          <li>Deploy. We give you a preview URL.</li>
        </ol>
        <p className="text-xs text-muted-foreground">
          18 words. Every step opens with the verb you perform.
        </p>
      </div>
      <p className="text-xs text-success">
        Active voice names the actor and leads with the verb — the step is the
        instruction
      </p>
    </div>
  );
}
```

## References

- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines)
- [Google Style: Voice and Tone](https://developers.google.com/style/voice)