// ✗ Vague
<button>Submit</button>

// ✓ Specific
<button>Create account</button>
<button>Save draft</button>
<button>Send message</button>

// ✗ Bad
<p>No items</p>

// ✓ Good
<div>
  <h3>No projects yet</h3>
  <p>Create your first project to get started.</p>
  <button>Create project</button>
</div>

// ✗ Bad
"Error: Invalid input"
"Something went wrong"
"Error 500"

// ✓ Good
"Enter a valid email address, like name@example.com"
"We couldn't save your changes. Check your connection and try again."
"This page isn't available. It may have been moved or deleted."

// ✗ Bad
<label>Password</label>
<input type="password" />

// ✓ Good
<label>Password</label>
<span className="hint">At least 8 characters</span>
<input type="password" />

// ✓ Better with examples
<label>Username</label>
<span className="hint">Letters and numbers only, like alex_123</span>

// ✗ Bad
"Are you sure?"

// ✓ Good
<Dialog>
  <h3>Delete "Project Alpha"?</h3>
  <p>This will permanently delete all files and cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete project</button>
</Dialog>

// Simple
"Loading..."

// With context
"Loading your projects..."
"Saving changes..."
"Sending message..."

// With progress
"Uploading... 3 of 12 files"
"Processing... This may take a minute"

// ✗ Too much
"Congratulations! Your account has been successfully created!"

// ✓ Just right
"Account created"
"Changes saved"
"Message sent"

// ✓ With next step
"Account created. Check your email to verify."

// ✗ Bad
placeholder="Enter text here"
placeholder="Name"

// ✓ Good
placeholder="Search projects..."
placeholder="Jane Smith"
placeholder="https://example.com"
placeholder="Add a comment..."

// ✗ Too long
"Click this button to save all your changes to the database"

// ✓ Concise
"Save changes"
"Copy to clipboard"
"Opens in new tab"