From designpowers
Guides UI composition for layouts, color palettes, typography, visual hierarchy, spacing, and responsive design ensuring aesthetics and accessibility.
npx claudepluginhub owl-listener/designpowers --plugin designpowersThis skill uses the workspace's default tool permissions.
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.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
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.
Before making visual decisions, confirm you have:
design-system-alignment if one exists)Grid system:
Visual hierarchy:
Spacing system:
Palette construction:
Colour independence:
Dark mode / high contrast:
prefers-color-scheme and prefers-contrast media queriesType scale:
Readability:
Font selection:
Design for these breakpoints (adjust to project needs):
At every breakpoint:
For each visual decision, document:
writing-design-plans (as part of plan execution)design-system-alignment (for consistency), cognitive-accessibility (for visual load), adaptive-interfaces (for user preferences)designpowers-critique| 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 |