Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# Accordion and disclosure copy content pattern

---
name: accordion-and-disclosure-copy
description: generate product ui accordion and disclosure copy following ux writing guidelines. use when drafting or revising accordion labels, show or hide triggers, view details links, advanced settings labels, expandable summaries, or disclosure text during product design, prototyping, storybook work, and design system content creation.
---

Generate production-style copy for accordion and disclosure UI.

Interpret the user's request in natural language. Extract, when available:
- what content is being expanded or collapsed
- whether the request is for an accordion label, disclosure trigger, section heading, summary text, or supporting helper copy
- whether the content is advanced, optional, supplementary, or detail-level information
- whether the trigger should reveal or collapse content
- any product-specific terminology that should be used

Return only the fields that apply, omitting any that aren't needed:

Section heading: ...
Expand label: ...
Collapse label: ...
Summary text: ...
Helper text: ...

## Rules
- Use sentence case throughout.
- Keep labels short, clear, and specific.
- Use clear, neutral triggers for expandable content.
- Prefer straightforward labels such as Show advanced settings, View details, or Expand task history.
- Avoid casual, playful, or vague language such as Sneak peek, Unlock more, or See magic.
- Make the expanded content obvious from the label.
- Use noun-based section headings, not action phrases. Headings should describe what the section is, not what the user should do.
- Keep summary text short and scannable.
- Use helper text only when it adds necessary context.
- Avoid blame, filler, idioms, exclamation points, jargon, and dramatic language.
- Do not add commentary, rationale, or multiple options unless the user explicitly asks.

## Patterns

**Accordion label**
- Name the content being revealed.
- Keep it neutral and descriptive.

**Expand label**
- Use Show, View, or Expand when the action reveals content.
- Be explicit about what appears.

**Collapse label**
- Use Hide when the collapse label pairs with Show (e.g. Show advanced settings → Hide advanced settings).
- For View or Expand triggers, keep the collapse label parallel (e.g. View details → Hide details, Expand task history → Collapse task history).
- Do not use Close or Dismiss as collapse labels.

**Advanced settings**
- Use direct labels such as Show advanced settings.
- Avoid implying mystery, reward, or surprise.

**Section heading**
- Use noun-based headings that describe the section content.
- Do: "Process overview", "Configuration details", "Output parameters"
- Don't: "Learn about processes", "Configure the settings", "View output"

**Summary text**
- Briefly describe what is inside the section when helpful.
- Keep it to 1 short sentence.

## Examples of requests this skill should handle
- "Write accordion labels for advanced settings"
- "Draft expand and collapse labels for task history"
- "I need disclosure copy for viewing process details"
- "Rewrite this accordion UI to match our design system voice"

## Output example
**Section heading:** Configuration details
**Expand label:** Show advanced settings
**Collapse label:** Hide advanced settings
**Summary text:** Review configuration options for this automation.
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
# Button and CTA copy content pattern

---
name: button-and-cta-copy
description: generate product ui button labels and call-to-action copy following ux writing guidelines. use when drafting or revising primary buttons, secondary buttons, link ctas, menu actions, destructive actions, retry actions, or button sets during product design, prototyping, storybook work, and design system content creation.
---

Generate production-style button and CTA copy for product UI.

Interpret the user's request in natural language. Extract, when available:
- what action the user is taking
- what object the action applies to
- whether the action is primary, secondary, destructive, recovery, navigation, or menu-based
- whether the object already exists or is being created
- whether platform-specific terminology should be applied
- whether a paired button set is needed

Return only the fields that apply, omitting any that aren't needed:

Primary CTA: ...
Secondary CTA: ...
Link CTA: ...
Menu action: ...

## Rules
- Use sentence case throughout.
- Keep CTAs short, clear, and specific. Keep labels to 2–4 words maximum when possible.
- Prefer verb + noun when the object is not obvious from context.
- Do not use vague labels such as "Click here", "Learn more", "Go", "Submit", "Confirm", or "Continue" unless the context truly makes them the clearest option.
- Use specific destination or action language for links. Do not use the word "link" in link text — screen readers announce it automatically. Use consistent link text across pages when linking to the same destination.
- Use Build for agents, automations, or apps.
- Use Create for creating a new object that did not exist before.
- Use Add for adding an existing object to an existing list, group, view, or container.
- Use "Create new" or "Build new" only when a button triggers a dropdown for users to select from multiple object types — in this case "new" acts as the object. Do not use New as a standalone verb or in place of Create or Add.
- Use Select instead of Choose for clickable UI choices.
- Use Try again instead of Retry.
- Use Delete for permanent removal.
- Use Remove for taking something out of a list, group, or container without deleting it.
- Do not use Execute in the context of automations or jobs.
- Use Run as a verb only (e.g. "Run automation"). Never use Run as a noun — use Job instead.
- Avoid jargon, filler, idioms, exclamation points, and dramatic language.
- Do not add commentary, rationale, or multiple options unless the user explicitly asks.

## Patterns

**Primary CTA**
- Use the clearest action for the next step.
- Prefer specific action labels over generic progression labels.

**Secondary CTA**
- Use a safe supporting action such as Cancel, Back, Discard, or Clear when appropriate.

**Link CTA**
- Make the destination or outcome obvious.
- Do not use "Learn more" or "Click here".
- Do not include the word "link" in the text.

**Recovery CTA**
- Use Try again when an action failed and the user should repeat it.
- Make sure the surrounding copy explains what happened.

**Create vs Build vs Add**
- Use Build for agents, automations, or apps.
- Use Create for new objects such as projects, users, templates, or datasets.
- Use Add for existing objects being placed into an existing container.
- Use "Create new" or "Build new" only when triggering a multi-type dropdown.

**Destructive CTA**
- Use Delete for permanent removal.
- Use Remove when the object remains elsewhere.

## Examples of requests this skill should handle
- "Write a primary button for creating a project"
- "Draft CTA labels for building an automation"
- "I need a retry button for a failed upload"
- "Rewrite these actions to match our design system voice"
- "Write a primary and secondary button set for removing a user from a workspace"

## Output example
**Primary CTA:** Build automation
**Secondary CTA:** Cancel
**Link CTA:** Manage access
148 changes: 148 additions & 0 deletions packages/apollo-wind/skills/apollo-writing/Content pattern index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
# Content pattern index

A reference guide to all content generation patterns in this library. Each pattern produces production-style UI copy aligned with the UX writing guidelines.

**Foundation:** [UX writing guidelines.md](UX%20writing%20guidelines.md)

---

## Content and messaging

### Error message
**File:** [Error message content pattern.md](Error%20message%20content%20pattern.md)
**Use for:** Inline validation errors, form errors, banner errors, toast errors, upload errors, permissions errors, system errors.
**Output:** Title, Body, CTA — fields vary by component type (inline = body only; toast = body + optional CTA; modal/full-page = all three).
**See also:** Notification copy pattern for success, warning, and info states.

---

### Notification
**File:** [Notification copy content pattern.md](Notification%20copy%20content%20pattern.md)
**Use for:** Success toasts, warning alerts, info banners, inline status messages, action notifications.
**Output:** Title, Body, Primary CTA, Secondary CTA, Link CTA — fields vary by notification type.
**See also:** Error message pattern for detailed error copy guidance.

---

### Empty state
**File:** [Empty state content pattern.md](Empty%20state%20content%20pattern.md)
**Use for:** First-use states, no-results states, filtered empty states, no-data states, post-action empty states.
**Output:** Title, Body, Primary CTA, Secondary CTA, Link — omit fields that don't apply.

---

## Actions and controls

### Button and CTA
**File:** [Button and CTA copy content pattern.md](Button%20and%20CTA%20copy%20content%20pattern.md)
**Use for:** Primary buttons, secondary buttons, menu actions, destructive actions, recovery actions, button sets.
**Output:** Primary CTA, Secondary CTA, Link CTA, Menu action — omit fields that don't apply.
**Key rules:** Build for automations/agents/apps. Create for new objects. Add for existing objects into containers. Try again not Retry. Run is a verb — Job is the noun.

---

### Link
**File:** [Link copy content pattern.md](Link%20copy%20content%20pattern.md)
**Use for:** Inline links, action links, help links, documentation links, navigation links.
**Output:** Link text only.
**Key rules:** No "Learn more" or "Click here". Do not use the word "link" in link text. Consistent text across pages for the same destination.

---

### Toggle and selection
**File:** [Toggle and selection copy content pattern.md](Toggle%20and%20selection%20copy%20content%20pattern.md)
**Use for:** Toggle labels, checkbox labels, radio groups, dropdown labels and options, people picker helper text, selection instructions.
**Output:** Control type, Label, Helper text, Options — omit fields that don't apply.
**Key rules:** Select not Choose. Clear not Deselect. No two options start with the same word or phrase.

---

### Destructive modal
**File:** [Destructive modal copy content pattern.md](Destructive%20modal%20copy%20content%20pattern.md)
**Use for:** Delete confirmations, removal confirmations, unsaved changes dialogs, exit confirmations, access revocation.
**Output:** Title, Body, Secondary CTA, Primary CTA — Secondary CTA is optional.
**Key rules:** Delete for permanent removal. Remove for non-permanent. Revoke access for access revocation. Only say "can't undo" when truly irreversible.

---

## Forms and inputs

### Form field
**File:** [Form field copy content pattern.md](Form%20field%20copy%20content%20pattern.md)
**Use for:** Text input labels, placeholder text, helper text, inline validation errors, checkbox labels, dropdown labels, toggle labels, people picker guidance.
**Output:** Label, Placeholder, Helper text, Error — omit fields that don't apply.
**See also:** Search and filter pattern for search field copy. Error message pattern for complex inline error scenarios.

---

### Search and filter
**File:** [Search and filter copy content pattern.md](Search%20and%20filter%20copy%20content%20pattern.md)
**Use for:** Search field labels and placeholders, filter labels, filter reset actions, no-results states, filtered empty states, result summaries.
**Output:** Search field label, Search field placeholder, Filter label, Helper text, Empty state title, Empty state body, Primary CTA, Secondary CTA — omit fields that don't apply.
**Key rules:** Always include a label for search fields. "Clear all filters" or "Reset filters" — not "Cancel" or "X".

---

## Layout and navigation

### Tabs and navigation
**File:** [Tabs and navigation copy content pattern.md](Tabs%20and%20navigation%20copy%20content%20pattern.md)
**Use for:** Tab labels, page headings, section headings, side navigation labels, breadcrumb labels, menu navigation items.
**Output:** Page heading, Section heading, Tab labels, Navigation items, Breadcrumb label — number of tab and nav fields matches the request.
**Key rules:** Noun-based headings only. First tab = most logical starting view. Related tabs adjacent.

---

### Drawer
**File:** [Drawer copy content pattern.md](Drawer%20copy%20content%20pattern.md)
**Use for:** Drawer and side panel headers, section headings, body copy, Save/Apply/Cancel/Discard CTA sets.
**Output:** Header, Section heading, Body, Primary CTA, Secondary CTA — omit fields that don't apply.
**See also:** Form field pattern for input copy within drawers.

---

### Accordion and disclosure
**File:** [Accordion and disclosure copy content pattern.md](Accordion%20and%20disclosure%20copy%20content%20pattern.md)
**Use for:** Accordion labels, show/hide triggers, advanced settings labels, expandable summaries, section headings.
**Output:** Section heading, Expand label, Collapse label, Summary text, Helper text — omit fields that don't apply.
**Key rules:** Show/Hide, View/Hide, Expand/Collapse — keep pairs parallel. No casual language (Sneak peek, Unlock more).

---

## Data display

### Table and status
**File:** [Table and status copy content pattern.md](Table%20and%20status%20copy%20content%20pattern.md)
**Use for:** Table column labels, status badges, row actions, timestamp labels and formats, duration labels, empty table states.
**Output:** Column label, Status badge, Row action, Timestamp label, Timestamp format, Duration label, Empty state title, Empty state body — omit fields that don't apply.
**See also:** Date, time, and duration pattern for detailed formatting rules.

---

### Tooltip
**File:** [Tooltip copy content pattern.md](Tooltip%20copy%20content%20pattern.md)
**Use for:** Icon button tooltips, truncated value tooltips, timestamp tooltips, inline guidance tooltips, status tooltips.
**Output:** Tooltip text only.
**Key rules:** Supplementary content only — never for critical info, errors, or interactive content. 1–2 lines max (exception: list-style tooltips). Always include timezone in timestamp tooltips.

---

### Date, time, and duration
**File:** [Date time and duration copy content pattern.md](Date%20time%20and%20duration%20copy%20content%20pattern.md)
**Use for:** Timestamp labels, relative and absolute time formatting guidance, duration labels, date picker helper text, time-based table labels.
**Output:** Label, Format guidance, Helper text, Tooltip — omit fields that don't apply.
**Key rules:** Date format: ddd, MMM D, YYYY. Time format: H:MM AM/PM timezone. Duration: exact (2h 15m 30s) or rounded (2.25 hrs) with tooltip. Never mix micro and macro time units.

---

## Cross-references

| If you need… | Use this pattern | And also consider… |
|---|---|---|
| Error copy | Error message | Notification (for error banners/toasts) |
| Success or warning copy | Notification | — |
| Search field copy | Search and filter | Form field (for other input types) |
| Inline validation error | Error message | Form field (for the field label and helper text) |
| Table timestamps or durations | Table and status | Date, time, and duration (for format detail) |
| Drawer form inputs | Drawer | Form field |
| Button on a destructive modal | Destructive modal | Button and CTA |
Loading
Loading