1// UX Writing skill demos
 2export default {
 3  id: 'ux-writing',
 4  tabs: [
 5    {
 6      id: 'errors',
 7      label: 'Error Messages',
 8      caption: 'Technical jargon vs human, actionable guidance',
 9      before: `
10        <div class="uxw-demo uxw-error-before">
11          <div class="uxw-error-icon">⚠</div>
12          <div class="uxw-error-title">Error 403</div>
13          <div class="uxw-error-text">Access denied. Authentication failure occurred.</div>
14        </div>
15      `,
16      after: `
17        <div class="uxw-demo uxw-error-after">
18          <div class="uxw-error-icon">🔐</div>
19          <div class="uxw-error-title">You don't have access</div>
20          <div class="uxw-error-text">Your session may have expired. Sign in again to continue.</div>
21          <div class="uxw-error-action">Sign in →</div>
22        </div>
23      `
24    },
25    {
26      id: 'buttons',
27      label: 'Button Labels',
28      caption: 'Vague labels vs clear, specific actions',
29      before: `
30        <div class="uxw-demo uxw-buttons-before">
31          <div class="uxw-button-context">Delete account permanently?</div>
32          <div class="uxw-button-row">
33            <button class="uxw-btn uxw-btn-primary">Submit</button>
34            <button class="uxw-btn uxw-btn-secondary">Cancel</button>
35          </div>
36        </div>
37      `,
38      after: `
39        <div class="uxw-demo uxw-buttons-after">
40          <div class="uxw-button-context">Delete account permanently?</div>
41          <div class="uxw-button-row">
42            <button class="uxw-btn uxw-btn-danger">Delete My Account</button>
43            <button class="uxw-btn uxw-btn-secondary">Keep Account</button>
44          </div>
45        </div>
46      `
47    },
48    {
49      id: 'empty',
50      label: 'Empty States',
51      caption: 'Blank nothing vs helpful, encouraging guidance',
52      before: `
53        <div class="uxw-demo uxw-empty-before">
54          <div class="uxw-empty-icon">📁</div>
55          <div class="uxw-empty-title">No items</div>
56        </div>
57      `,
58      after: `
59        <div class="uxw-demo uxw-empty-after">
60          <div class="uxw-empty-icon">📝</div>
61          <div class="uxw-empty-title">No projects yet</div>
62          <div class="uxw-empty-text">Create your first project to get started.</div>
63          <div class="uxw-empty-action"><button class="uxw-btn uxw-btn-primary">Create Project</button></div>
64        </div>
65      `
66    }
67  ]
68};
69
70
71