create-dstack 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,453 +0,0 @@
1
- ---
2
- name: ux-writing
3
- description: Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.
4
- ---
5
-
6
- # UX Writing
7
-
8
- Write clear, concise, user-centered interface copy (UX text/microcopy) for digital products and experiences. This skill provides frameworks, patterns, and best practices for creating text that helps users accomplish their goals.
9
-
10
- **Compatible with:** Claude, Codex, Cursor, and other agents that support the agent skills specification.
11
-
12
- **Note:** This skill works with Codex CLI/IDE, not ChatGPT. ChatGPT cannot install or use skills.
13
-
14
- ## When to Use This Skill
15
-
16
- Use this skill when:
17
-
18
- - Writing interface copy (buttons, labels, titles, messages, forms)
19
- - Editing existing UX text for clarity and effectiveness
20
- - Creating error messages, notifications, or success messages
21
- - Designing conversational flows or onboarding experiences
22
- - Establishing voice and tone for a product
23
- - Auditing product content for consistency and usability
24
-
25
- ## Core UX Writing Principles
26
-
27
- ### The Four Quality Standards
28
-
29
- Every piece of UX text should be:
30
-
31
- 1. **Purposeful** — Helps users or the business achieve goals
32
- 2. **Concise** — Uses the fewest words possible without losing meaning
33
- 3. **Conversational** — Sounds natural and human, not robotic
34
- 4. **Clear** — Unambiguous, accurate, and easy to understand
35
-
36
- ### Key Best Practices
37
-
38
- **Conciseness**
39
-
40
- - Use 40-60 characters per line maximum
41
- - Every word must have a job
42
- - Break dense text into scannable chunks
43
- - Front-load important information
44
-
45
- **Clarity**
46
-
47
- - Use plain language (7th grade reading level for general, 10th for professional)
48
- - Avoid jargon, idioms, and technical terms
49
- - Use consistent terminology throughout
50
- - Choose meaningful, specific verbs
51
-
52
- **Conversational Tone**
53
-
54
- - Write how you speak
55
- - Use active voice 85% of the time
56
- - Include prepositions and articles
57
- - Avoid robotic phrasing
58
-
59
- **User-Centered**
60
-
61
- - Focus on user benefits, not features
62
- - Anticipate and answer user questions
63
- - Use second-person ("you") language
64
- - Match user's language and mental models
65
-
66
- ## UX Text Patterns
67
-
68
- Apply these common patterns for interface elements.
69
-
70
- ### Titles
71
-
72
- - **Purpose**: Orient users to where they are
73
- - **Format**: Noun phrases, sentence case
74
- - **Types**: Brand titles, content titles, category titles, task titles
75
- - **Examples**: "Account settings", "Your library", "Create new post"
76
-
77
- ### Buttons and Links
78
-
79
- - **Purpose**: Enable users to take action
80
- - **Format**: Active imperative verbs, sentence case
81
- - **Pattern**: `[Verb] [object]`
82
- - **Examples**: "Save changes", "Delete account", "View details"
83
- - **Avoid**: Generic labels like "OK", "Submit", "Click here"
84
-
85
- ### Error Messages
86
-
87
- - **Purpose**: Explain problem and provide solution
88
- - **Format**: Empathetic, clear, actionable
89
- - **Pattern**: `[What failed]. [Why/context]. [What to do].`
90
-
91
- **Error Message Types**
92
-
93
- **Validation Errors (Inline)**
94
-
95
- - Show as user completes field or on blur
96
- - Brief, specific guidance to correct input
97
- - Pattern: `[Field] [specific requirement]`
98
- - Examples:
99
- - "Email must include @"
100
- - "Password must be at least 8 characters"
101
- - "Choose a date in the future"
102
- - Timing: Real-time or on field exit
103
- - Location: Below or beside the field
104
-
105
- **System Errors (Modal/Banner)**
106
-
107
- - Show when backend operations fail
108
- - Explain what happened and why
109
- - Pattern: `[Action failed]. [Likely cause]. [Recovery step].`
110
- - Examples:
111
- - "Payment failed. Your card was declined. Try a different payment method."
112
- - "Couldn't save changes. Connection lost. Reconnect and try again."
113
- - "Upload failed. File is too large. Choose a file under 10MB."
114
- - Timing: Immediately after failure
115
- - Location: Modal dialog or prominent banner
116
-
117
- **Blocking Errors (Full-screen)**
118
-
119
- - Prevent continued use until resolved
120
- - Clear explanation of blocker and resolution
121
- - Pattern: `[What's blocked]. [Why]. [Specific action needed].`
122
- - Examples:
123
- - "Update required. This version is no longer supported. Update now to continue."
124
- - "Subscription expired. Your account is paused. Renew subscription to restore access."
125
- - "Verification needed. Confirm your email to access features. Check your inbox."
126
- - Timing: On app launch or feature access
127
- - Location: Full screen or large modal
128
-
129
- **Permission Errors**
130
-
131
- - Explain benefit before requesting permission
132
- - Pattern: `[User benefit]. [Permission needed].`
133
- - Examples:
134
- - "Get notified when orders ship. Enable notifications."
135
- - "Find nearby stores. Allow location access."
136
- - "Back up your photos. Grant storage permission."
137
- - Timing: When feature is first used
138
- - Location: In context of the feature
139
-
140
- **What to Avoid**
141
-
142
- - Technical codes without explanation ("Error 403")
143
- - Blame language ("invalid input", "illegal character")
144
- - Robotic tone ("An error has occurred")
145
- - Dead ends (error with no recovery path)
146
- - Vague causes ("Something went wrong")
147
-
148
- ### Success Messages
149
-
150
- - **Purpose**: Confirm action completion
151
- - **Format**: Past tense, specific, encouraging
152
- - **Pattern**: `[Action] [result/benefit]`
153
- - **Examples**: "Changes saved", "Email sent", "Profile updated"
154
-
155
- ### Empty States
156
-
157
- - **Purpose**: Guide users when content is absent
158
- - **Types**: First-use, user-cleared, error/no results
159
- - **Format**: Explanation + CTA to populate
160
- - **Example**: "No messages yet. Start a conversation to connect with your team."
161
-
162
- ### Form Fields
163
-
164
- - **Labels**: Clear noun phrases describing input ("Email address", "Phone number")
165
- - **Instructions**: Verb-first, explain why information is needed
166
- - **Placeholder**: Use sparingly, only for standard inputs like "name@example.com"
167
- - **Helper text**: Static, on-demand, or automatic based on importance
168
-
169
- ### Notifications
170
-
171
- - **Purpose**: Deliver timely, valuable information
172
- - **Types**: Action-required (intrusive), Passive (less intrusive)
173
- - **Format**: Verb-first title + contextual description
174
- - **Example**: "Update required. Install the latest version to continue."
175
-
176
- ## Voice and Tone
177
-
178
- ### Voice (Consistent Brand Personality)
179
-
180
- Voice is the consistent personality of the product. Establish voice using:
181
-
182
- - **Concepts**: 3-5 key brand principles/values
183
- - **Voice characteristics**: Descriptive adjectives for each concept
184
- - **Do/Don't examples**: Concrete examples showing voice in action
185
-
186
- See references/voice-chart-template.md for creating a voice chart.
187
-
188
- ### Tone (Adaptive to Context)
189
-
190
- Tone is how voice adapts to specific situations. While voice remains constant, tone shifts based on user context and emotional state.
191
-
192
- **Tone Variables**
193
-
194
- - **Purpose**: Why user is seeing this text (information, action, confirmation)
195
- - **Context**: What user is trying to do (learning, completing task, recovering from error)
196
- - **Emotional state**: How user likely feels (frustrated, excited, confused, cautious)
197
- - **Stakes**: Impact of the action (low: changing theme, high: deleting account)
198
-
199
- **Tone Adaptation by User Emotional State**
200
-
201
- **Frustrated** (errors, failures, blockers)
202
-
203
- - Empathetic and solution-focused
204
- - Acknowledge the problem without blame
205
- - Provide clear recovery path
206
- - Example: "Payment failed. Your card was declined. Try a different payment method."
207
-
208
- **Confused** (first use, complex features)
209
-
210
- - Patient and explanatory
211
- - Break down steps clearly
212
- - Provide context and guidance
213
- - Example: "Connect your bank to see spending insights. We'll guide you through it."
214
-
215
- **Confident** (routine tasks, return visits)
216
-
217
- - Efficient and direct
218
- - Minimal explanation
219
- - Quick confirmation
220
- - Example: "Saved"
221
-
222
- **Cautious** (high-stakes actions, data loss)
223
-
224
- - Serious and transparent
225
- - Clear consequences
226
- - Respectful of user's decision
227
- - Example: "Delete account? You'll lose all data and this can't be undone."
228
-
229
- **Successful** (completions, achievements)
230
-
231
- - Positive and encouraging
232
- - Proportional to achievement
233
- - Brief celebration
234
- - Example: "Profile updated. Your changes are live."
235
-
236
- **Tone Adaptation by Content Type**
237
-
238
- **Error messages**: Empathetic, reassuring, solution-focused
239
-
240
- - Never blame user
241
- - Explain what happened
242
- - Provide clear next step
243
-
244
- **Success messages**: Positive, specific, encouraging
245
-
246
- - Confirm what happened
247
- - Proportional to action importance
248
- - Brief and clear
249
-
250
- **Instructions**: Clear, direct, helpful
251
-
252
- - Front-load key action
253
- - Explain why when needed
254
- - Use simple steps
255
-
256
- **Onboarding**: Inviting, encouraging, concise
257
-
258
- - Welcome without overwhelming
259
- - Focus on value
260
- - Celebrate early wins
261
-
262
- **Confirmations**: Serious, transparent, respectful
263
-
264
- - Clear about consequences
265
- - No manipulation
266
- - Easy to back out
267
-
268
- **Empty states**: Hopeful, actionable, guiding
269
-
270
- - Explain why it's empty
271
- - Provide clear next action
272
- - Keep encouraging tone
273
-
274
- ## Editing Process
275
-
276
- Edit UX text in four phases:
277
-
278
- ### Phase 1: Purposeful
279
-
280
- - Does text help user achieve their goal?
281
- - Does text serve business objectives?
282
- - Is value to user clear?
283
- - Are concerns anticipated and addressed?
284
-
285
- ### Phase 2: Concise
286
-
287
- - Remove unnecessary words
288
- - Combine redundant information
289
- - Ensure every word earns its space
290
- - Front-load important concepts
291
-
292
- ### Phase 3: Conversational
293
-
294
- - Read aloud—would you say this?
295
- - Use active voice (unless passive is clearer)
296
- - Include natural connecting words
297
- - Avoid corporate jargon
298
-
299
- ### Phase 4: Clear
300
-
301
- - Use specific, accurate verbs
302
- - Maintain consistent terminology
303
- - Test readability (Hemingway Editor, Flesch-Kincaid)
304
- - Ensure unambiguous meaning
305
-
306
- ## Workflow
307
-
308
- 1. **Understand context**
309
- - User goals and needs
310
- - Business objectives
311
- - Technical constraints
312
- - Emotional state of user
313
-
314
- 2. **Draft content**
315
- - Start with conversation (what would you say?)
316
- - Apply appropriate pattern
317
- - Consider voice and tone
318
- - Front-load important information
319
-
320
- 3. **Edit iteratively**
321
- - Phase 1: Purposeful
322
- - Phase 2: Concise
323
- - Phase 3: Conversational
324
- - Phase 4: Clear
325
-
326
- 4. **Test and measure**
327
- - Review with team
328
- - Test with users when possible
329
- - Measure task completion, comprehension
330
- - Iterate based on feedback
331
-
332
- ## Accessibility in UX Writing
333
-
334
- Writing accessible content ensures all users, including those using assistive technology, can understand and interact with your product.
335
-
336
- ### Core Accessibility Principles
337
-
338
- **Screen Reader Optimization**
339
-
340
- - Label all interactive elements explicitly ("Submit form" not just "Submit")
341
- - Write descriptive link text ("Read pricing details" not "Click here")
342
- - Structure error messages to work with screen readers (error + field label read together)
343
- - Use ARIA labels when visual context isn't sufficient
344
-
345
- **Cognitive Accessibility**
346
-
347
- - Target 8-14 words per sentence (8 words = 100% comprehension, 14 words = 90%)
348
- - Break complex information into scannable chunks
349
- - Use clear headings and logical hierarchy
350
- - Provide consistent, predictable patterns
351
-
352
- **Multi-Modal Communication**
353
-
354
- - Don't rely on color alone to convey meaning
355
- - Pair visual indicators with text ("Error: Email required" with red icon)
356
- - Provide text alternatives for icons and images
357
- - Ensure sufficient color contrast (WCAG AA minimum: 4.5:1)
358
-
359
- **Plain Language for All**
360
-
361
- - Target 7th-8th grade reading level for general audience
362
- - Define technical terms when first used
363
- - Avoid idioms, metaphors, and cultural references
364
- - Use common, everyday words
365
-
366
- ### Accessible Pattern Examples
367
-
368
- **Buttons**
369
-
370
- - ❌ Poor: "Submit" (context missing for screen readers)
371
- - ✅ Good: "Submit application"
372
-
373
- **Links**
374
-
375
- - ❌ Poor: "Click here for more information"
376
- - ✅ Good: "Read our privacy policy"
377
-
378
- **Error Messages**
379
-
380
- - ❌ Poor: Red text showing "Invalid"
381
- - ✅ Good: "Error: Email must include @" (with error icon)
382
-
383
- **Form Labels**
384
-
385
- - ❌ Poor: Placeholder-only fields
386
- - ✅ Good: Visible label + optional placeholder
387
-
388
- ## UX Text Benchmarks
389
-
390
- Use these research-backed metrics to create effective UX text.
391
-
392
- ### Sentence Length Targets
393
-
394
- **By Content Type**
395
-
396
- - **Buttons/CTAs**: 2-4 words ideal, 6 word maximum
397
- - **Titles**: 3-6 words, 40 characters maximum
398
- - **Error messages**: 12-18 words (including solution)
399
- - **Instructions**: 20 words maximum, 14 ideal
400
- - **Body copy**: 15-20 words per sentence average
401
- - **Notifications**: 10-15 words for title + body
402
-
403
- **Comprehension Rates**
404
-
405
- - 8 words or fewer: 100% user comprehension
406
- - 14 words or fewer: 90% user comprehension
407
- - 25 words: Maximum before significant comprehension drop
408
-
409
- ### Character and Line Length
410
-
411
- **Optimal Ranges**
412
-
413
- - **Line length**: 40-60 characters for maximum readability
414
- - **Button labels**: 15-25 characters
415
- - **Page titles**: 30-50 characters
416
- - **Notification titles**: 35-45 characters
417
-
418
- ### Reading Level Guidelines
419
-
420
- **By Audience**
421
-
422
- - **General public**: 7th-8th grade (Flesch-Kincaid)
423
- - **Professional tools**: 9th-10th grade
424
- - **Technical products**: 10th-11th grade
425
- - **Specialized fields**: 11th-12th grade (only when necessary)
426
-
427
- **Testing Tools**
428
-
429
- - Hemingway Editor: Highlights complex sentences
430
- - Readable.com: Provides multiple readability scores
431
- - Microsoft Word: Built-in Flesch-Kincaid scoring
432
-
433
- ## Common Mistakes to Avoid
434
-
435
- - Using passive voice excessively
436
- - Generic button labels ("Submit", "OK")
437
- - Blaming users in error messages
438
- - Overly clever humor in serious contexts
439
- - Inconsistent terminology
440
- - Hidden instructions or explanations
441
- - System-oriented language vs. user language
442
- - Too many words (not concise enough)
443
- - Robotic, corporate tone
444
- - Relying on color alone for meaning
445
- - Writing inaccessible link text ("Click here")
446
-
447
- ## Quick Reference
448
-
449
- **Sentence case**: "Save your changes" (not "Save Your Changes")
450
- **Active imperative for buttons**: "Delete account" (not "Account deletion")
451
- **User-focused**: "Save time with shortcuts" (not "We offer shortcuts")
452
- **Specific verbs**: "Delete" (not "Remove" when permanently deleting)
453
- **Front-loaded**: "Password must be 8 characters" (not "Must be 8 characters for your password")
@@ -1,7 +0,0 @@
1
- import { getConvexProvidersConfig } from "@stackframe/stack";
2
-
3
- export default {
4
- providers: getConvexProvidersConfig({
5
- projectId: process.env.NEXT_PUBLIC_STACK_PROJECT_ID,
6
- }),
7
- };