oh-my-opencode 4.12.1 → 4.14.0

package/packages/shared-skills/skills/frontend/references/designpowers/vendor/skills/ui-composition/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: ui-composition
+description: "Use when building layouts, choosing colours, setting typography, establishing visual hierarchy, designing responsive behaviour, or making any visual design decision — ensures every visual choice serves both aesthetics and accessibility"
+---
+
+# UI Composition
+
+Visual design is where intent becomes tangible. Every colour, every spacing decision, every typographic choice either includes or excludes people. This skill ensures visual decisions are principled, systematic, and inclusive.
+
+## When to Use
+
+- Designing screen layouts or page structures
+- Choosing or refining colour palettes
+- Setting typography systems
+- Establishing spacing and grid systems
+- Designing for responsive breakpoints
+- Creating or modifying visual hierarchy
+- Designing dark mode or high contrast variants
+
+## Process
+
+### Step 1: Reference the Foundation
+
+Before making visual decisions, confirm you have:
+- Design brief or strategy (from earlier phases)
+- Personas (especially ability spectrum considerations)
+- Existing design system (invoke `design-system-alignment` if one exists)
+
+### Step 2: Layout and Structure
+
+**Grid system:**
+- Define columns, gutters, and margins
+- Ensure the grid adapts across breakpoints (mobile, tablet, desktop)
+- Test that content reflows sensibly when zoomed to 200%
+
+**Visual hierarchy:**
+- Establish a clear reading order that works both visually and in the DOM
+- Ensure the hierarchy communicates through structure, not colour alone
+- Verify that removing all colour still leaves a readable, navigable page
+
+**Spacing system:**
+- Use a consistent spacing scale (e.g., 4px base)
+- Ensure touch targets are at least 44x44px
+- Provide adequate spacing between interactive elements to prevent accidental activation
+
+### Step 3: Colour
+
+**Palette construction:**
+- Define primary, secondary, neutral, and semantic colours (success, warning, error, info)
+- Every colour pairing must meet WCAG AA contrast ratios minimum (4.5:1 for text, 3:1 for large text and UI components)
+- Target WCAG AAA (7:1) where feasible
+
+**Colour independence:**
+- Never convey information through colour alone
+- Always pair colour with text labels, icons, or patterns
+- Test with simulated colour blindness (protanopia, deuteranopia, tritanopia)
+
+**Dark mode / high contrast:**
+- If applicable, design dark mode as a first-class experience, not an afterthought
+- Ensure all contrast ratios hold in both modes
+- Respect `prefers-color-scheme` and `prefers-contrast` media queries
+
+### Step 4: Typography
+
+**Type scale:**
+- Define a modular scale with clear hierarchy (heading levels, body, caption, label)
+- Base body size: minimum 16px (1rem)
+- Line height: 1.5 for body text, 1.2-1.3 for headings
+
+**Readability:**
+- Line length: 45-75 characters for body text
+- Paragraph spacing: at least 1.5x the font size
+- Avoid justified text (ragged right is more readable for most people)
+- Ensure text can be resized to 200% without loss of content or functionality
+
+**Font selection:**
+- Prioritise legibility over personality
+- Ensure the chosen font has distinct characters for I, l, 1 and O, 0
+- Provide fallback fonts in the same classification
+
+### Step 5: Responsive Design
+
+Design for these breakpoints (adjust to project needs):
+- **Mobile** (320-480px): single column, stacked layout, thumb-reachable interactions
+- **Tablet** (481-1024px): flexible layout, touch and pointer support
+- **Desktop** (1025px+): multi-column, keyboard and pointer optimised
+
+At every breakpoint:
+- Content priority remains correct
+- Touch targets remain adequate
+- Text remains readable without horizontal scrolling
+- No information is hidden that was visible at other breakpoints (unless intentionally progressive)
+
+### Step 6: Document Decisions
+
+For each visual decision, document:
+- **What:** the decision made
+- **Why:** how it serves the design principles and personas
+- **Accessibility:** how it meets inclusive design requirements
+
+## Integration
+
+- **Called by:** `writing-design-plans` (as part of plan execution)
+- **Pairs with:** `design-system-alignment` (for consistency), `cognitive-accessibility` (for visual load), `adaptive-interfaces` (for user preferences)
+- **Reviewed by:** `designpowers-critique`
+
+## Quick Reference: Accessibility Minimums
+
+| Element | Requirement |
+|---------|------------|
+| Text contrast | 4.5:1 (AA) or 7:1 (AAA) |
+| Large text contrast | 3:1 minimum |
+| UI component contrast | 3:1 against adjacent colours |
+| Touch target | 44x44px minimum |
+| Focus indicator | Visible, 3:1 contrast against adjacent |
+| Text resize | Content usable at 200% zoom |
+| Colour alone | Never the sole indicator of state or meaning |

package/packages/shared-skills/skills/frontend/references/designpowers/vendor/skills/usability-testing/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: usability-testing
+description: "Use when planning or conducting usability tests — writing test scripts, defining tasks, selecting participants, analysing findings, and turning observations into design actions"
+---
+
+# Usability Testing
+
+Testing with real people is how you find out if the design works — not by looking at it, but by watching someone use it.
+
+## When to Use
+
+- After design-builder produces a working prototype
+- Before declaring a design complete
+- When the design-critic flags persona coverage gaps
+- When assumptions about user behaviour need evidence
+
+## Process
+
+### Step 1: Define What You're Testing
+
+Write 3-5 task scenarios that map to the core jobs in the brief. Each task:
+- **Starts with a realistic trigger** — "You just bought a new plant and want to add it to the app"
+- **Has a clear success condition** — "The plant appears in your list with a watering schedule"
+- **Does not tell the user how** — never say "tap the + button"
+
+### Step 2: Select Participants
+
+Recruit 5-8 participants. At minimum include:
+- 1 person who uses a screen reader
+- 1 person over 60
+- 1 person who is not a native speaker of the interface language
+- 1 person with low tech confidence
+
+Reference `inclusive-personas` for the ability spectrum.
+
+### Step 3: Choose Method
+
+| Method | When to use | Minimum participants |
+|--------|-----------|---------------------|
+| Moderated think-aloud | New flows, complex interactions | 5 |
+| Unmoderated remote | Simple tasks, large sample | 8-12 |
+| Guerrilla (hallway) | POC validation, time-constrained | 3-5 |
+| Accessibility audit with AT users | After build, before ship | 2-3 |
+
+### Step 4: Write the Test Script
+
+1. **Welcome** — explain what you're testing (the design, not them)
+2. **Background** — 2-3 questions about their relationship to the problem
+3. **Tasks** — present each scenario one at a time, observe silently
+4. **Debrief** — "What was hardest?" "What would you change?"
+
+Never help during a task. Silence is data.
+
+### Step 5: Analyse Findings
+
+Classify outcomes per task:
+- **Completed easily** — no hesitation, no errors
+- **Completed with difficulty** — hesitation or errors but recovered
+- **Failed** — could not complete
+- **Completed wrong** — thought they succeeded but didn't
+
+Severity: Critical (blocks 2+ participants), Major (significant difficulty), Minor (noticed but not impeding).
+
+### Step 6: Turn Findings Into Actions
+
+Every finding becomes a design action: "[Severity] [What happened] → [Design action] → [Which agent handles it]"
+
+## What You Deliver
+
+- Task success rates table
+- Ranked findings by severity
+- Design actions with agent assignments
+- Recommendation: iterate / ship / rethink
+
+## Integration
+
+- **Informed by:** `inclusive-personas`, `design-discovery`
+- **Feeds into:** `design-lead`, `design-builder`, `design-strategist`

package/packages/shared-skills/skills/frontend/references/designpowers/vendor/skills/verification-before-shipping/SKILL.md

@@ -0,0 +1,125 @@
+---
+name: verification-before-shipping
+description: "Use before declaring any design work complete, fixed, or ready — requires running verification and confirming output before making any success claims. Evidence before assertions, always"
+---
+
+# Verification Before Shipping
+
+Do not say it is done until you have proof. This skill prevents the most common failure mode in design work — declaring completion based on intent rather than evidence.
+
+## The Rule
+
+NEVER claim work is complete, fixed, passing, or ready without running verification and confirming the output. "I believe this works" is not verification. "I ran these checks and here are the results" is.
+
+## When to Use
+
+- Before declaring a design task complete
+- Before moving from one phase to the next
+- Before handoff to engineering
+- Before creating a PR or committing design artefacts
+- Any time you are about to say "done"
+
+## Process
+
+### Step 1: Check Against the Plan
+
+If a design plan exists:
+- [ ] Every task in the plan is marked complete
+- [ ] Every verification criterion in the plan has been met
+- [ ] No tasks were skipped or deferred without explicit user approval
+
+### Step 2: Check Against the Brief
+
+Reference the design brief:
+- [ ] The stated problem is addressed
+- [ ] All identified personas are served
+- [ ] Success criteria are met or measurable
+- [ ] Nothing in "out of scope" crept into scope (and vice versa)
+
+### Step 3: Accessibility Verification
+
+Run — do not guess:
+
+**If code exists:**
+- [ ] Automated accessibility scan (axe-core, Lighthouse, or equivalent) — report results
+- [ ] Keyboard navigation test — report results
+- [ ] Screen reader test (at minimum, check heading structure and form labels)
+- [ ] Zoom to 200% — report results
+- [ ] Check prefers-reduced-motion behaviour — report results
+
+**If design artefacts only:**
+- [ ] Contrast ratios verified with a tool (not by eye)
+- [ ] Touch targets measured (not estimated)
+- [ ] Heading hierarchy documented
+- [ ] All states designed (not just the happy path)
+
+### Step 4: Content Verification
+
+- [ ] All placeholder text has been replaced with real content
+- [ ] Error messages are written (not "TODO")
+- [ ] Alt text is present for all images
+- [ ] Labels are specific and descriptive
+
+### Step 5: Cross-Reference Personas
+
+For each persona from the inclusive-personas phase:
+- [ ] Could [Persona 1] complete the primary task? How?
+- [ ] Could [Persona 2] complete the primary task? How?
+- [ ] Could [Edge Case Persona] complete the primary task? What barriers remain?
+
+### Step 6: Check Design Debt
+
+Before declaring the project shippable, review the Design Debt Register in `design-state.md`:
+
+- [ ] All Critical and Major items are Resolved (not just Open or Escalated)
+- [ ] Any Escalated items have been addressed or consciously Accepted by the user
+- [ ] Open Minor items have been reviewed — the user knows what debt ships with this release
+- [ ] Accessibility debt items have explicit user acknowledgement if Accepted
+
+### Step 7: Report
+
+Present verification results to the user:
+
+```markdown
+## Verification Report: [Feature/Task]
+
+**Date:** [YYYY-MM-DD]
+
+### Plan Completion
+[All tasks complete / X tasks remaining]
+
+### Brief Alignment
+[Aligned / Gaps identified]
+
+### Accessibility Results
+- Automated scan: [Pass/Fail — specific issues]
+- Keyboard: [Pass/Fail — specific issues]
+- Screen reader: [Pass/Fail — specific issues]
+- Zoom: [Pass/Fail — specific issues]
+- Motion: [Pass/Fail — specific issues]
+
+### Content Status
+[Complete / Gaps identified]
+
+### Persona Walkthrough
+[Summary of persona-by-persona evaluation]
+
+### Design Debt Status
+- Open items shipping with this release: [count]
+- Escalated items: [count] — [resolved/accepted]
+- Accessibility debt accepted: [count] — [summary]
+- Oldest unresolved: [DD-XXX] from [date]
+
+### Verdict
+[Ready to ship / Issues to resolve first]
+```
+
+## Integration
+
+- **Called by:** Before any completion claim
+- **Follows:** `designpowers-critique`, `design-handoff`
+- **Blocks:** Completion claims, PR creation, merge decisions
+
+## The Iron Law
+
+If you cannot produce evidence that the design works for the identified personas — including those at the margins of the ability spectrum — it is not done. Go back and verify.

package/packages/shared-skills/skills/frontend/references/designpowers/vendor/skills/voice-and-tone/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: voice-and-tone
+description: "Use when establishing or applying brand voice — defining voice attributes, tone adaptation across contexts, vocabulary lists, writing examples, and ensuring consistent personality across the interface"
+---
+
+# Voice and Tone
+
+Voice is who you are. Tone is how you say it right now. Voice stays constant. Tone adapts to context. This skill defines both so every word sounds like the same person wrote it.
+
+## When to Use
+
+- At the start of a project, during or after `design-strategy`
+- When the content-writer agent needs voice guardrails
+- When interface copy sounds inconsistent across screens
+
+## Step 1: Define Voice Attributes
+
+Choose 3-5. For each, define "this, not that":
+
+| Attribute | This | Not that |
+|-----------|------|----------|
+| Warm | Friendly, approachable | Sycophantic, emoji-heavy |
+| Knowledgeable | Confident, precise | Academic, condescending |
+| Direct | Clear, action-oriented | Blunt, cold, robotic |
+| Encouraging | Celebrates effort | Patronising, fake-cheerful |
+
+The "not that" column prevents drift.
+
+## Step 2: Define Tone by Context
+
+| Context | Feel | Example |
+|---------|------|---------|
+| Success | Celebration, warmth | "Your monstera is happy. Next water Thursday." |
+| Error | Calm, helpful, no blame | "We couldn't save that. Check your connection and try again." |
+| Onboarding | Welcoming, confidence-building | "Let's get to know your plants. About 30 seconds." |
+| Empty state | Inviting, action-oriented | "Your windowsill is empty. Add your first plant." |
+| Loading | Reassuring, brief | "Checking your plants..." |
+| Destructive | Clear, calm, reversible | "Remove this plant? You can undo this." |
+
+## Step 3: Build the Vocabulary
+
+| Always use | Never use |
+|-----------|----------|
+| water | irrigate |
+| happy | optimal |
+| check it out | investigate |
+| you | the user |
+
+The content-writer agent uses this as a constraint.
+
+## Step 4: Set Reading Level
+
+| Audience | Target |
+|----------|--------|
+| General consumer | Grade 6-8 |
+| Professional tool | Grade 8-10 |
+| Technical docs | Grade 10-12 |
+
+## Voice Audit Checklist
+
+- [ ] Every screen sounds like the same person wrote it
+- [ ] Voice attributes are present in the copy
+- [ ] Tone matches the context
+- [ ] Vocabulary list words used consistently
+- [ ] Reading level at or below target
+- [ ] Copy works read aloud by a screen reader
+
+## What You Deliver
+
+- Voice attributes table (3-5, with "this not that")
+- Tone guide by context with examples
+- Vocabulary list
+- Reading level target
+- 3-5 before/after examples
+
+## Integration
+
+- **Informed by:** `design-strategy`, `design-discovery`
+- **Feeds into:** `content-writer` agent, `accessible-content`, `design-critic`

package/packages/shared-skills/skills/frontend/references/designpowers/vendor/skills/writing-design-plans/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: writing-design-plans
+description: "Use when you have a design brief or strategy and need to break implementation into reviewable chunks — creates step-by-step plans with verification criteria for each task"
+---
+
+# Writing Design Plans
+
+A design plan breaks an approved design direction into discrete, reviewable tasks. Each task is small enough to evaluate clearly and specific enough that the result is predictable.
+
+## When to Use
+
+- After design-discovery and/or design-strategy have produced an approved direction
+- Before any implementation work begins
+- When a design task is too large to complete and review in one step
+
+## Process
+
+### Step 1: Review Inputs
+
+Gather:
+- Design brief (from design-discovery)
+- Strategy document (from design-strategy, if applicable)
+- Personas (from inclusive-personas)
+- Existing design system inventory
+
+### Step 2: Identify Design Tasks
+
+Break the work into categories:
+
+1. **Structure tasks** — information architecture, page hierarchy, navigation
+2. **Component tasks** — individual UI components that need designing
+3. **Layout tasks** — how components compose into screens
+4. **Interaction tasks** — states, transitions, feedback patterns
+5. **Content tasks** — copy, labels, error messages, help text
+6. **Accessibility tasks** — specific inclusive design requirements per component
+
+### Step 3: Order the Work
+
+Design work has natural dependencies:
+
+```
+Structure → Layout → Components → Interactions → Content → Review
+     ↑ accessibility woven through each step, not a final phase ↑
+```
+
+Order tasks so that:
+- Foundation work (structure, layout) comes before detail work (interactions, content)
+- Each task can be reviewed independently
+- Accessibility is addressed within each task, not deferred
+
+### Step 4: Write the Plan
+
+```markdown
+# Design Plan: [Feature/Project Name]
+
+> **For agentic workers:** REQUIRED: Use designpowers:designpowers-critique to review completed work against this plan.
+
+**Goal:** [One sentence — what this plan delivers]
+
+**Design Direction:** [Reference to the design brief or strategy]
+
+**Personas:** [Reference to personas this plan serves]
+
+---
+
+## Task 1: [Task Name]
+
+**Files:** [Which files will be created or modified]
+
+- [ ] Step 1: [Specific action]
+- [ ] Step 2: [Specific action]
+- [ ] Step 3: [Specific action]
+
+**Accessibility check:** [What inclusive design criteria this task must meet]
+
+**Verification:** [How to confirm this task is complete and correct]
+
+---
+
+## Task 2: [Task Name]
+...
+```
+
+### Step 5: Task Sizing
+
+Each task should be:
+- **2-5 minutes of focused work** — small enough to hold in your head
+- **Independently reviewable** — someone can evaluate it without seeing everything else
+- **Specifically described** — exact files, exact components, exact acceptance criteria
+- **Accessibility-inclusive** — each task addresses its own inclusive design requirements
+
+If a task takes longer than 5 minutes, break it down further.
+
+### Step 6: Save and Review
+
+Save to: `docs/designpowers/plans/YYYY-MM-DD-<feature>-plan.md`
+
+Present the plan to the user. Walk through:
+- Does the task order make sense?
+- Are any tasks missing?
+- Are the accessibility checks appropriate for each task?
+- Is the scope right, or should anything be deferred?
+
+User must approve the plan before execution begins.
+
+## Integration
+
+- **Called by:** `design-discovery`, `design-strategy`
+- **Calls:** Implementation begins via the relevant design skills (`ui-composition`, `interaction-design`, etc.)
+- **Pairs with:** `designpowers-critique` (reviews work against the plan)
+
+## Anti-Patterns
+
+| Pattern | Problem |
+|---------|---------|
+| Tasks without accessibility checks | Every task affects the user experience. Every task has accessibility implications |
+| Tasks that say "make it look good" | Vague tasks produce vague results. Be specific about what "good" means |
+| Accessibility as the final task | By then it is too late. Accessibility is in every task |
+| Plan without persona references | If you do not know who you are designing for, you cannot verify the design works |