Skill: Confluence Design Documentation

Purpose

Create and maintain design documentation including wireframes, UI specifications, design system documentation, and accessibility guidelines.

When to Use

• UI/UX Designer creates wireframes for new features
• UI/UX Designer documents component specifications
• UI/UX Designer maintains design system documentation
• UI/UX Designer documents accessibility requirements

MCP Tools Used

Tool	Purpose
Atlassian:createConfluencePage	Create new documentation
Atlassian:updateConfluencePage	Update design specs
Atlassian:getConfluencePage	Read documentation
Atlassian:searchConfluenceUsingCql	Find design docs

Configuration

{
  "cloudId": "{{confluence.cloudId}}",
  "spaceId": "{{confluence.spaceId}}",
  "spaceKey": "{{confluence.spaceKey}}",
  "parentPages": {
    "design": "{{confluence.parentPages.design}}"
  }
}

---

UI Specification

UI Spec Template

# UI Specification: {{featureName}}

**Version:** 1.0
**Author:** UI/UX Designer Agent
**Created:** {{date}}
**Status:** Draft | In Review | Approved
**Related:** {{jiraStory}} | Wireframes

---

## Overview

### Purpose
[What this UI accomplishes]

### User Goals
- [Goal 1]
- [Goal 2]

---

## Screen: {{screenName}}

### Layout

┌─────────────────────────────────────┐ │ Header │ ├─────────────────────────────────────┤ │ │ │ Main Content │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ Card 1 │ │ Card 2 │ │ │ └─────────────┘ └─────────────┘ │ │ │ ├─────────────────────────────────────┤ │ Footer │ └─────────────────────────────────────┘

### Components Used
| Component | Variant | Notes |
|-----------|---------|-------|
| Button | Primary | Submit action |
| Input | Text | Email field |
| Card | Default | Content container |

### States
| State | Description | Visual |
|-------|-------------|--------|
| Default | Initial load | [Description] |
| Loading | Data fetching | Spinner overlay |
| Error | Validation failed | Red border, error text |
| Success | Action complete | Success message |

---

## Interactions

### User Flow
1. User lands on page
2. User fills form
3. User clicks submit
4. System validates
5. Success/error feedback

### Micro-interactions
| Trigger | Animation | Duration |
|---------|-----------|----------|
| Button hover | Scale 1.02 | 150ms |
| Input focus | Border highlight | 200ms |
| Submit | Loading spinner | Until complete |

---

## Responsive Behavior

| Breakpoint | Layout Changes |
|------------|----------------|
| Desktop (>1024px) | 2-column grid |
| Tablet (768-1024px) | 2-column, smaller margins |
| Mobile (<768px) | Single column, stacked |

---

## Accessibility

### Requirements
- [ ] Color contrast ratio ≥4.5:1
- [ ] Focus indicators visible
- [ ] Form labels associated
- [ ] Error messages announced
- [ ] Keyboard navigable

### ARIA Labels
| Element | aria-label |
|---------|------------|
| Submit button | "Submit registration form" |
| Close button | "Close dialog" |

---

## Copy/Content

| Element | Text | Notes |
|---------|------|-------|
| Page title | "Create Account" | H1 |
| Submit button | "Register" | |
| Error message | "Please enter a valid email" | |

Create UI Spec Example

Atlassian:createConfluencePage({
  cloudId: "{{confluence.cloudId}}",
  spaceId: "{{confluence.spaceId}}",
  parentId: "{{confluence.parentPages.design}}",
  title: "UI Spec: User Registration",
  body: `# UI Specification: User Registration

**Version:** 1.0
**Author:** UI/UX Designer Agent
**Created:** 2025-01-06
**Status:** Draft
**Related:** MDDEV-101

---

## Overview

### Purpose
Allow new users to create an account with email and password.

### User Goals
- Quick registration process
- Clear feedback on requirements
- Confidence in security

---

## Screen: Registration Form

### Layout
\`\`\`
┌─────────────────────────────────────┐
│              Logo                    │
├─────────────────────────────────────┤
│        Create Your Account           │
│                                      │
│   ┌─────────────────────────────┐   │
│   │ Email                       │   │
│   └─────────────────────────────┘   │
│                                      │
│   ┌─────────────────────────────┐   │
│   │ Password                    │   │
│   └─────────────────────────────┘   │
│   Password strength: ████░░ Good     │
│                                      │
│   ┌─────────────────────────────┐   │
│   │      Create Account         │   │
│   └─────────────────────────────┘   │
│                                      │
│   Already have an account? Log in    │
└─────────────────────────────────────┘
\`\`\`

### Components Used
| Component | Variant | Notes |
|-----------|---------|-------|
| Input | Email | With validation |
| Input | Password | With visibility toggle |
| PasswordStrength | Default | Visual indicator |
| Button | Primary | Full width |
| Link | Text | Secondary action |

### States
| State | Description |
|-------|-------------|
| Default | Empty form |
| Validating | Real-time validation |
| Submitting | Button shows spinner |
| Error | Field-level errors shown |
| Success | Redirect to verification |

---

## Responsive Behavior

| Breakpoint | Changes |
|------------|---------|
| Desktop | Centered card, max-width 400px |
| Mobile | Full width, padding 16px |
`,
  contentFormat: "markdown"
})

---

Design System Documentation

Design System Template

# Design System: {{projectName}}

**Version:** {{version}}
**Last Updated:** {{date}}

---

## Foundations

### Colors

#### Primary Palette
| Name | Hex | Usage |
|------|-----|-------|
| Primary | #007AFF | CTAs, links |
| Primary Dark | #0056B3 | Hover states |
| Primary Light | #E5F0FF | Backgrounds |

#### Semantic Colors
| Name | Hex | Usage |
|------|-----|-------|
| Success | #28A745 | Positive feedback |
| Warning | #FFC107 | Caution states |
| Error | #DC3545 | Error states |
| Info | #17A2B8 | Information |

#### Neutrals
| Name | Hex | Usage |
|------|-----|-------|
| Gray 900 | #212529 | Primary text |
| Gray 600 | #6C757D | Secondary text |
| Gray 300 | #DEE2E6 | Borders |
| Gray 100 | #F8F9FA | Backgrounds |

### Typography

#### Font Stack
```css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Scale

Name	Size	Weight	Line Height	Usage
H1	32px	700	1.2	Page titles
H2	24px	600	1.3	Section headers
H3	20px	600	1.4	Subsections
Body	16px	400	1.5	Default text
Small	14px	400	1.4	Captions

Spacing

Token	Value	Usage
space-xs	4px	Tight spacing
space-sm	8px	Related elements
space-md	16px	Default spacing
space-lg	24px	Section spacing
space-xl	32px	Large gaps

---

Components

Button

Variants

Variant	Usage
Primary	Main actions
Secondary	Alternative actions
Outline	Tertiary actions
Ghost	Subtle actions

Sizes

Size	Height	Padding	Font
Small	32px	12px 16px	14px
Medium	40px	12px 20px	16px
Large	48px	16px 24px	18px

States

• Default
• Hover
• Active
• Focus
• Disabled
• Loading

Input

Variants

Variant	Usage
Text	General text input
Email	Email validation
Password	Hidden text
Search	With search icon

States

• Default
• Focus
• Error
• Disabled
• Read-only

---

## Wireframe Documentation

### Wireframe Template
```markdown
# Wireframes: {{featureName}}

**Version:** {{version}}
**Author:** UI/UX Designer Agent
**Created:** {{date}}

---

## Screen 1: {{screenName}}

### Desktop

[ASCII wireframe or link to design tool]

### Mobile

[ASCII wireframe or link to design tool]

### Notes
- [Design decision 1]
- [Design decision 2]

### Open Questions
- [ ] [Question for stakeholder]

---

Error Handling

Error	Cause	Resolution
400 Bad Request	ASCII art formatting	Use code blocks
404 Not Found	Parent page missing	Create Design parent first
413 Too Large	Too many images	Link to external tool