UI Writing & Labels

Writes button labels, error messages, help text, and empty state copy for you. Gets the tone right every time.

Clear over cleverActive voiceVerb-first buttonsNo jargonConsistent terminology

Skill Details

Install this skill

Versionv1.1.0AuthorJorge ArteagaLicenseMITSections12

Works with

Claude CodeCursorWindsurf

The words inside a component matter as much as the visual design. Write clear, helpful, human UI text that guides users and reduces confusion.

Core Principles

Clear over clever — say exactly what happened and what to do next

Active voice — "Save the record" not "The record will be saved"

Verb-first buttons — "Create Account" not "Account Creation"

No jargon — "Something went wrong" not "Null pointer exception in line 42"

Consistent terminology — pick one word and use it everywhere

Error Messages

Structure: What + Why + What to Do

Every error message answers three questions:

┌─────────────────────────────────────────────┐
│  WHAT happened    │ "Record couldn't be saved"
│  WHY it happened  │ "Required fields are missing"
│  WHAT TO DO next  │ "Fill in Account Name and click Save again"
└─────────────────────────────────────────────┘

Error Templates

Error in Code

JavaScript

get userFriendlyError() {
    if (!this._error) return class="code-string">'';
    if (this._error.body?.message) {
        return this._error.body.message;
    }
    return class="code-string">'Something went wrong. Try again, or contact your admin if the problem continues.';
}

Anti-Patterns

Empty States

Empty states are opportunities to guide users, not dead ends.

Structure: Explain + Guide + Act

┌─────────────────────────────────────────────┐
│           [Icon or illustration]             │
│                                             │
│     No {items} yet                          │  ← Explain
│     {Why this is empty or what items are}   │  ← Guide
│     [Create {Item}]                         │  ← Act
└─────────────────────────────────────────────┘

Empty State Templates

Industry-Specific Copy Templates

Financial Services

Healthcare

Manufacturing

Retail / Commerce

Persona-Based Labels

For demos, personalize greetings and contextual messages:

JavaScript

get welcomeMessage() {
    const hour = new Date().getHours();
    const greeting = hour < 12 ? class="code-string">'Good morning' : hour < 17 ? class="code-string">'Good afternoon' : class="code-string">'Good evening';
    return class="code-string">`${greeting}, ${this.userName}. ${this.taskSummary}`;
}

get taskSummary() {
    const count = this.openTasks?.length || 0;
    if (count === 0) return class="code-string">'You\'re all caught up!class="code-string">';
    return class="code-string">`${count} ${count === 1 ? 'item needsclass="code-string">' : 'items need'} your attention.`;
}

Button Labels

Rules

Verb first: Save Record, Create Contact, Send Email
Specific over generic: Save Changes not Submit, Delete Account not OK
Match the action: the button label should describe what happens when clicked
Destructive actions: use the verb that matches (Delete, Remove, Disconnect)

Common Pairs

Anti-Patterns

Help Text and Tooltips

When to Use

Help Text Templates

Accessibility Note

Tooltips must be keyboard-accessible. Use aria-describedby to link help text to its field:

HTML

<class="code-tag">lightning-input
    label="Annual Revenue"
    field-name="AnnualRevenue"
    aria-describedby="revenue-help">
</class="code-tag">lightning-input>
<class="code-tag">div id="revenue-help" class="help-text">
    Enter the company's total annual revenue in USD.
</class="code-tag">div>

Confirmation Dialogs

Structure: Consequence + Specific Action

┌─────────────────────────────────────────────┐
│  Delete this account?                        │  ← Question (what will happen)
│                                             │
│  This will permanently delete "Acme Corp"   │  ← Consequence
│  and all related contacts and cases.         │
│  This action can't be undone.               │
│                                             │
│        [Cancel]    [Delete Account]          │  ← Specific labels
└─────────────────────────────────────────────┘

Templates

Toast Messages

Format

JavaScript

class="code-comment">// Success: past tense, brief
{ title: class="code-string">'Account saved', message: class="code-string">'Your changes have been saved.', variant: class="code-string">'success' }

class="code-comment">// Error: what happened + what to do
{ title: class="code-string">'Couldn\'t save recordclass="code-string">', message: 'Check required fields and try again.class="code-string">', variant: 'errorclass="code-string">' }

class="code-comment">// Warning: what to be aware of
{ title: 'Limited resultsclass="code-string">', message: 'Showing first 200 records. Refine your search.class="code-string">', variant: 'warningclass="code-string">' }

class="code-comment">// Info: neutral notification
{ title: 'Record updatedclass="code-string">', message: 'Changes made by another user have been loaded.class="code-string">', variant: 'info' }

Rules

Title: 2-4 words, sentence case
Message: 1 sentence, actionable for errors
Success toasts: optional message (title alone is often sufficient)
Error toasts: always include a message with guidance

Placeholder Text

Rules

Placeholders are examples, not labels — never replace a label with a placeholder
Use realistic examples: Search accounts... not Type here
Keep short: max 30-40 characters

Templates

Internationalization Readiness

String Patterns

Never concatenate translated strings — word order varies by language
Use Custom Labels for all user-facing text
Allow 40% expansion for translated text (German/French are longer than English)
Avoid text in images — it can't be translated

JavaScript

import SAVE_LABEL from class="code-string">'@salesforce/label/c.Save_Changes';
import ERROR_TITLE from class="code-string">'@salesforce/label/c.Error_Title';

export default class MyComponent extends LightningElement {
    labels = { SAVE_LABEL, ERROR_TITLE };
}

HTML

<class="code-tag">lightning-button label={labels.SAVE_LABEL}></class="code-tag">lightning-button>

Scoring Rubric (100 Points)Reference

Cross-Skill IntegrationReference

Scenario	Message
Field validation	`{Field Name} is required. Enter a value to continue.`
Server error	`We couldn't save this record. Check your entries and try again.`
Permission denied	`You don't have access to {action}. Contact your admin for help.`
Network error	`We couldn't connect to Salesforce. Check your connection and try again.`
Not found	`This {record type} was deleted or you don't have access to it.`
Limit reached	`You've reached the maximum of {limit} {items}. Remove one to add another.`
Do NOT Say	Say Instead
`Error: 500 Internal Server Error`	`Something went wrong. Try again in a moment.`
`FIELD_CUSTOM_VALIDATION_EXCEPTION`	`{Validation rule error message text}`
`null` or blank	`Something unexpected happened. Try again.`
`Invalid input`	`Enter a valid {field type}. Example: name@company.com`
Context	Title	Description	Action
First use	`No cases yet`	`Cases appear here when customers reach out.`	`Create a Case`
No results	`No matching records`	`Try adjusting your filters or search terms.`	`Clear Filters`
Filtered empty	`No {items} match "{query}"`	`Check your spelling or try different keywords.`	`Clear Search`
Completed	`All caught up`	`You've resolved all open cases. Nice work.`	—
Permission	`Nothing to show`	`Ask your admin for access to {feature}.`	`Request Access`
Element	Generic	Financial Services
Empty state	`No records found`	`No open positions in this portfolio`
Search placeholder	`Search...`	`Search clients, accounts, or holdings...`
Welcome message	`Welcome back`	`Good morning, {Name}. 3 client reviews due today.`
KPI label	`Total value`	`Assets Under Management`
Action button	`Create record`	`Log Client Interaction`
Success toast	`Record saved`	`Client profile updated`
Element	Generic	Healthcare
Empty state	`No records found`	`No open care plans for this patient`
Search placeholder	`Search...`	`Search patients, care plans, or encounters...`
Welcome message	`Welcome back`	`Good morning, {Name}. 12 patients on your panel today.`
KPI label	`Completion rate`	`Care Plan Adherence`
Action button	`Create record`	`Schedule Appointment`
Success toast	`Record saved`	`Care plan updated successfully`
Element	Generic	Manufacturing
Empty state	`No records found`	`No open orders for this account`
Search placeholder	`Search...`	`Search accounts, agreements, or products...`
Welcome message	`Welcome back`	`Good morning, {Name}. 5 agreements need attention.`
KPI label	`Total amount`	`Run Rate Revenue`
Action button	`Create record`	`Create Sales Agreement`
Success toast	`Record saved`	`Forecast updated for Q2`
Element	Generic	Retail
Empty state	`No records found`	`No recent orders for this customer`
Search placeholder	`Search...`	`Search customers, orders, or products...`
Welcome message	`Welcome back`	`Welcome back, {Name}. 8 orders need fulfillment.`
KPI label	`Average value`	`Average Order Value`
Action button	`Create record`	`Process Return`
Success toast	`Record saved`	`Order status updated`
Primary	Secondary	Context
`Save`	`Cancel`	Edit form
`Create {Item}`	`Cancel`	New record form
`Delete`	`Keep`	Destructive confirmation
`Confirm`	`Go Back`	Multi-step process
`Send`	`Cancel`	Email/message action
`Apply`	`Reset`	Filter/settings
Do NOT	Do Instead
`OK` / `Yes` / `No`	Specific: `Delete Record` / `Keep Record`
`Submit` (generic)	`Save Changes`, `Create Account`, `Send Request`
`Click Here`	`View Details`, `Download Report`
`Process`	`Run Report`, `Calculate Total`
Pattern	Use When
Inline help text	Field needs context every time (format, constraints)
Tooltip	Supplementary info; not needed for task completion
Info icon + popover	Detailed explanation that would clutter inline
Field Type	Help Text Pattern
Email	`Enter a valid email address. Example: name@company.com`
Phone	`Include country code for international numbers. Example: +1 (555) 123-4567`
Date	`Enter a date in MM/DD/YYYY format.`
Currency	`Enter the amount without currency symbols.`
Lookup	`Search by name or record number.`
Picklist	`Select the option that best describes {context}.`
Percentage	`Enter a number between 0 and 100.`
Action	Title	Body	Confirm Button
Delete record	`Delete this {type}?`	`This will permanently delete "{name}" and its related data. This can't be undone.`	`Delete {Type}`
Discard changes	`Discard unsaved changes?`	`You have unsaved changes that will be lost.`	`Discard Changes`
Remove from list	`Remove {name}?`	`{Name} will be removed from this {list}. You can add them back later.`	`Remove`
Reassign	`Reassign this {type}?`	`{Name} will be reassigned from {current} to {new}.`	`Reassign`
Field	Placeholder
Search	`Search {items}...`
Name	`Enter full name`
Email	`name@company.com`
Description	`Describe the issue...`
URL	`https://example.com`
Category	Points	Pass Criteria
Error Messages	25	All errors follow what/why/do structure; no raw exceptions shown
Empty States	20	Every list/table has an empty state with guidance and action
Button Labels	15	Verb-first, specific, destructive actions clearly labeled
Help Text	15	Fields that need context have help text; accessible linking
Confirmation Dialogs	15	Destructive actions confirmed; specific labels on buttons
i18n Ready	10	Custom Labels used; no string concatenation; expansion room
Skill	Relationship
sf-lwc-ux	Empty/error/loading states need well-written content
sf-lwc-review	Audit includes content quality checks
sf-lwc-page-composition	App Builder property labels and descriptions need good copy
sf-lwc-mobile	Mobile copy must be even more concise
sf-se-demo-scripts	Industry copy templates make demos feel authentic

UI Writing & Labels

Core Principles

Error Messages

Structure: What + Why + What to Do

Error Templates

Error in Code

Anti-Patterns

Empty States

Structure: Explain + Guide + Act

Empty State Templates

Industry-Specific Copy Templates

Financial Services

Healthcare

Manufacturing

Retail / Commerce

Persona-Based Labels

Button Labels

Rules

Common Pairs

Anti-Patterns

Help Text and Tooltips

When to Use

Help Text Templates

Accessibility Note

Confirmation Dialogs

Structure: Consequence + Specific Action

Templates

Toast Messages

Format

Rules

Placeholder Text

Rules

Templates

Internationalization Readiness

String Patterns

Scoring Rubric (100 Points)Reference

Cross-Skill IntegrationReference

More in User Experience

Animations

User Experience