mirror of
https://github.com/Owl-Listener/designer-skills.git
synced 2026-09-19 03:07:41 +08:00
Expand visual-critique, add .gitattributes, CHANGELOG, and release prep
- visual-critique: add critique-color, critique-affordance, critique-information-density skills - visual-critique: add /critique-ux command; update /critique-screen to cover all 7 dimensions - visual-critique: update README and plugin.json (v1.1.0) - Root README: update visual-critique row and skill/command counts (97 skills, 30 commands) - Add .gitattributes so GitHub detects Markdown as the primary repo language - Add CHANGELOG.md seeded from project history https://claude.ai/code/session_01MUrcEMBTiXyyhv1XvkRf2H
This commit is contained in:
Claude
@@ -0,0 +1,4 @@
|
||||
*.md linguist-language=Markdown
|
||||
*.md linguist-detectable=true
|
||||
*.json linguist-detectable=true
|
||||
*.sh linguist-detectable=false
|
||||
@@ -0,0 +1,45 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to this collection are documented here.
|
||||
|
||||
---
|
||||
|
||||
## [1.0.0] — 2026-06-11
|
||||
|
||||
First stable release. Tagging the current state of main as v1.0.0 to give integrators a stable version to pin to.
|
||||
|
||||
### Design practice collection
|
||||
|
||||
- 9 plugins, 97 skills, 30 commands
|
||||
- Plugins: design-research, design-systems, ux-strategy, ui-design, interaction-design, prototyping-testing, design-ops, designer-toolkit, visual-critique
|
||||
- Gemini CLI extension support across all plugins
|
||||
|
||||
### visual-critique — expanded from 4 to 7 skills
|
||||
|
||||
Added three new critique dimensions and a second command:
|
||||
|
||||
- **critique-color** — contrast ratios, palette coherence, semantic colour use, and colour accessibility
|
||||
- **critique-affordance** — clickability signals, state visibility, CTA clarity, and action discoverability
|
||||
- **critique-information-density** — cognitive load, content priority, scanning patterns, and progressive disclosure
|
||||
- `/critique-ux` command — focused functional critique (hierarchy + affordance + density) for quick loops and PM-led reviews
|
||||
- `/critique-screen` updated to run all seven dimensions
|
||||
|
||||
### Repository
|
||||
|
||||
- Added `.gitattributes` so GitHub detects Markdown as the primary language
|
||||
- Added `CHANGELOG.md`
|
||||
- Added `README.md` getting-started section with three starting-point paths, deliverable lookup table, recommended install set, and sequence guide
|
||||
|
||||
---
|
||||
|
||||
## Pre-release history
|
||||
|
||||
| Date | Change |
|
||||
|---|---|
|
||||
| 2026-06 | Rename project from Skills Suite to Skills Pack |
|
||||
| 2026-05 | Aggregate full designer skills suite into one marketplace |
|
||||
| 2026-05 | Add Gemini CLI extension support |
|
||||
| 2026-04 | Add visual-critique plugin (four skills, one command) |
|
||||
| 2026-04 | Add 15 skills covering gaps across all design plugins |
|
||||
| 2026-04 | Add 9 UX design principle skills across ui-design and interaction-design |
|
||||
| 2026-03 | Initial release: 6 design plugins, 53 skills, 23 commands |
|
||||
@@ -60,7 +60,7 @@ Each collection also lives in its own repo, with its own stars and full detail.
|
||||
|
||||
## Design practice (this repo)
|
||||
|
||||
Agentic skills, commands, and plugins for design, from research to systems, UI, interaction, and delivery. **91 skills and 28 commands across 9 plugins.**
|
||||
Agentic skills, commands, and plugins for design, from research to systems, UI, interaction, and delivery. **97 skills and 30 commands across 9 plugins.**
|
||||
|
||||
### Plugins
|
||||
|
||||
@@ -74,7 +74,7 @@ Agentic skills, commands, and plugins for design, from research to systems, UI,
|
||||
| prototyping-testing | 8 | 4 | Validate designs: prototyping strategies, usability testing, heuristic evaluation, and A/B experiments. |
|
||||
| design-ops | 9 | 3 | Streamline operations: critique frameworks, handoff specs, sprint planning, team workflows, design debt, and impact reporting. |
|
||||
| designer-toolkit | 7 | 3 | Essential utilities: design rationale, presentations, case studies, UX writing, system adoption, and design negotiation. |
|
||||
| visual-critique | 4 | 1 | Visual critique: hierarchy analysis, brand consistency checks against mood/voice/tokens, composition evaluation, and typography audits. |
|
||||
| visual-critique | 7 | 2 | Visual critique: hierarchy, brand consistency, composition, typography, colour, affordance, and information density. |
|
||||
|
||||
### All commands
|
||||
|
||||
@@ -107,7 +107,8 @@ Agentic skills, commands, and plugins for design, from research to systems, UI,
|
||||
| `/designer-toolkit:write-rationale` | designer-toolkit | Write design rationale for decisions. |
|
||||
| `/designer-toolkit:build-presentation` | designer-toolkit | Structure a design presentation. |
|
||||
| `/designer-toolkit:write-case-study` | designer-toolkit | Create a portfolio case study. |
|
||||
| `/visual-critique:critique-screen` | visual-critique | Run all four visual critiques on a screen and output a prioritised fix list. |
|
||||
| `/visual-critique:critique-screen` | visual-critique | Run all seven visual critiques on a screen and output a prioritised fix list. |
|
||||
| `/visual-critique:critique-ux` | visual-critique | Focused functional critique: hierarchy, affordance, and information density. |
|
||||
|
||||
## What are skills and commands?
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "visual-critique",
|
||||
"version": "1.0.0",
|
||||
"description": "Visual critique skills for designers: analyse hierarchy, brand consistency, composition, and typography — then compile a prioritised fix list.",
|
||||
"version": "1.1.0",
|
||||
"description": "Visual critique skills for designers: analyse hierarchy, brand consistency, composition, typography, colour, affordance, and information density — then compile a prioritised fix list.",
|
||||
"author": { "name": "MC Dean", "url": "https://marieclairedean.substack.com/" },
|
||||
"keywords": ["critique", "visual-hierarchy", "brand", "composition", "typography", "review"],
|
||||
"keywords": ["critique", "visual-hierarchy", "brand", "composition", "typography", "colour", "affordance", "information-density", "review"],
|
||||
"homepage": "https://github.com/Owl-Listener/designer-skills",
|
||||
"license": "MIT"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Visual Critique
|
||||
|
||||
Visual critique skills for designers. Analyse a screen across four dimensions — hierarchy, brand consistency, composition, and typography — then compile a prioritised fix list.
|
||||
Visual critique skills for designers. Analyse a screen across seven dimensions — hierarchy, brand consistency, composition, typography, colour, affordance, and information density — then compile a prioritised fix list.
|
||||
|
||||
## Skills
|
||||
|
||||
@@ -10,12 +10,16 @@ Visual critique skills for designers. Analyse a screen across four dimensions
|
||||
| `critique-brand-consistency` | Checks against `mood.md`, `voice.md`, and `tokens.md` |
|
||||
| `critique-composition` | Evaluates balance, whitespace, rhythm, and gestalt principles |
|
||||
| `critique-typography` | Reviews scale usage, readability, consistency, and token compliance |
|
||||
| `critique-color` | Audits contrast ratios, palette coherence, semantic colour use, and colour accessibility |
|
||||
| `critique-affordance` | Evaluates clickability signals, state visibility, CTA clarity, and action discoverability |
|
||||
| `critique-information-density` | Assesses cognitive load, content priority, scanning patterns, and progressive disclosure |
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | What it does |
|
||||
|---|---|
|
||||
| `/critique-screen` | Runs all four critiques in sequence and outputs a prioritised fix list |
|
||||
| `/critique-screen` | Runs all seven critiques in sequence and outputs a prioritised fix list |
|
||||
| `/critique-ux` | Focused functional critique: hierarchy, affordance, and information density — for quick loops and PM-led reviews |
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -24,7 +28,12 @@ Run a full screen critique:
|
||||
/critique-screen onboarding step 2
|
||||
```
|
||||
|
||||
Run a focused UX critique (faster, no visual polish dimensions):
|
||||
```
|
||||
/critique-ux checkout step 3
|
||||
```
|
||||
|
||||
Or invoke individual skills for targeted feedback:
|
||||
```
|
||||
Use the critique-typography skill on this screen.
|
||||
Use the critique-affordance skill on this screen.
|
||||
```
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
---
|
||||
description: Run all four visual critiques on a screen and output a prioritised fix list.
|
||||
description: Run all seven visual critiques on a screen and output a prioritised fix list.
|
||||
argument-hint: "[screen name, Figma URL, or image — e.g., 'onboarding step 2' or a screenshot]"
|
||||
---
|
||||
# /critique-screen
|
||||
Run a full visual critique of a screen across hierarchy, brand, composition, and typography.
|
||||
Run a full visual critique of a screen across hierarchy, brand, composition, typography, colour, affordance, and information density.
|
||||
## Steps
|
||||
1. **Visual hierarchy** — Analyse entry point, eye flow, weight, and emphasis using `critique-visual-hierarchy` skill.
|
||||
2. **Brand consistency** — Check mood, voice, and token alignment using `critique-brand-consistency` skill.
|
||||
3. **Composition** — Evaluate balance, whitespace, rhythm, and gestalt using `critique-composition` skill.
|
||||
4. **Typography** — Audit scale, readability, consistency, and token compliance using `critique-typography` skill.
|
||||
5. **Prioritise** — Collect every flagged issue from all four critiques and rank them:
|
||||
5. **Colour** — Audit contrast ratios, palette coherence, semantic colour use, and accessibility using `critique-color` skill.
|
||||
6. **Affordance** — Evaluate clickability signals, state visibility, CTA clarity, and action discoverability using `critique-affordance` skill.
|
||||
7. **Information density** — Assess cognitive load, content priority, scanning patterns, and progressive disclosure using `critique-information-density` skill.
|
||||
8. **Prioritise** — Collect every flagged issue from all seven critiques and rank them:
|
||||
- **P1 — Critical**: Breaks usability, accessibility, or brand compliance; fix before shipping.
|
||||
- **P2 — Important**: Degrades experience or creates inconsistency; fix in current sprint.
|
||||
- **P3 — Polish**: Minor visual refinement; address when capacity allows.
|
||||
## Output
|
||||
A single prioritised fix list grouped by priority level. Each item includes:
|
||||
- **Issue**: what is wrong
|
||||
- **Dimension**: which critique area it belongs to (Hierarchy / Brand / Composition / Typography)
|
||||
- **Dimension**: which critique area it belongs to (Hierarchy / Brand / Composition / Typography / Colour / Affordance / Density)
|
||||
- **Fix**: the specific change required
|
||||
Conclude with a one-paragraph overall assessment noting the strongest and weakest dimension.
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
description: Run a focused UX critique on a screen — affordances, information density, and hierarchy — and output a prioritised fix list.
|
||||
argument-hint: "[screen name, Figma URL, or image — e.g., 'checkout step 3' or a screenshot]"
|
||||
---
|
||||
# /critique-ux
|
||||
Run a focused functional critique on a screen. This command covers the three dimensions most likely to block task completion: whether actions are discoverable, whether the right information is present, and whether priority is clear. Use this for quick feedback loops, PM-led reviews, or when you want functional critique without a full visual audit.
|
||||
## Steps
|
||||
1. **Visual hierarchy** — Identify entry point and whether the primary action reads clearly using `critique-visual-hierarchy` skill.
|
||||
2. **Affordance** — Evaluate clickability signals, state visibility, CTA clarity, and action discoverability using `critique-affordance` skill.
|
||||
3. **Information density** — Assess cognitive load, content priority, scanning patterns, and progressive disclosure using `critique-information-density` skill.
|
||||
4. **Prioritise** — Collect every flagged issue and rank them:
|
||||
- **P1 — Critical**: Blocks task completion or hides a required action; fix before shipping.
|
||||
- **P2 — Important**: Slows the user or creates confusion; fix in current sprint.
|
||||
- **P3 — Polish**: Minor friction or clarity improvement; address when capacity allows.
|
||||
## Output
|
||||
A prioritised fix list grouped by level. Each item includes:
|
||||
- **Issue**: what is wrong
|
||||
- **Dimension**: Hierarchy / Affordance / Density
|
||||
- **Fix**: the specific change required
|
||||
Conclude with one sentence summarising the biggest functional risk on the screen.
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
name: critique-affordance
|
||||
description: Critique a screen's interactive affordances — what looks clickable, state visibility, CTA clarity, and action discoverability.
|
||||
---
|
||||
# Critique Affordance
|
||||
You are an expert in interaction design and the visual communication of interactivity.
|
||||
## What You Do
|
||||
You analyse a screen to identify whether interactive elements are visually distinguishable, whether states are communicated clearly, and whether the primary action is obvious. You flag affordance failures and propose specific fixes.
|
||||
## Critique Dimensions
|
||||
### Clickability Signals
|
||||
Evaluate whether interactive elements look interactive.
|
||||
- Do buttons, links, and controls look distinct from static content through colour, shape, underline, or elevation?
|
||||
- Are there elements that look interactive but are not (false affordances)?
|
||||
- Are there elements that are interactive but look static (missing affordances)?
|
||||
- Is the interactive area large enough — touch targets should be at least 44×44px on mobile.
|
||||
### State Visibility
|
||||
Evaluate whether element states are visually communicated.
|
||||
- Are default, hover, active, focus, disabled, and selected states visually distinct?
|
||||
- Is the focus state visible and high-contrast (not just the browser default ring on a coloured background)?
|
||||
- Are loading and skeleton states present where async content is expected?
|
||||
- Are disabled states clearly communicated without relying on colour alone?
|
||||
### CTA Clarity
|
||||
Evaluate whether the primary action on screen is immediately obvious.
|
||||
- Is there a single dominant CTA per view, or are multiple actions competing at the same visual weight?
|
||||
- Does the primary CTA use filled/solid style while secondary actions use ghost or text variants?
|
||||
- Is the CTA label specific and action-oriented ("Save changes", not "OK")?
|
||||
- Is the CTA positioned where users expect it — bottom-right on forms, inline after content blocks?
|
||||
### Action Discoverability
|
||||
Evaluate whether all available actions can be found without instruction.
|
||||
- Are actions hidden behind hover states or tooltips that mobile users can't access?
|
||||
- Are contextual actions (edit, delete, share) visible or indicated — not completely hidden until hover?
|
||||
- Are empty states actionable — do they tell the user what to do next?
|
||||
- Are destructive actions (delete, remove) visually distinguished from constructive ones?
|
||||
## Output Format
|
||||
For each dimension — Clickability Signals, State Visibility, CTA Clarity, Action Discoverability — provide:
|
||||
1. **Observation** — what you see (neutral, factual)
|
||||
2. **Problem** — what is broken and why it matters
|
||||
3. **Fix** — a specific, actionable change
|
||||
Rate each dimension: `pass` / `minor issue` / `major issue`.
|
||||
## Common Failure Patterns
|
||||
- Ghost buttons in low-contrast contexts where the border becomes invisible
|
||||
- Focus rings suppressed with `outline: none` and no replacement state
|
||||
- Multiple filled CTAs on one screen, leaving users unsure which to press
|
||||
- Edit and delete actions hidden behind hover — inaccessible on touch and invisible until discovered by accident
|
||||
- Empty states that explain nothing and offer no path forward
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
name: critique-color
|
||||
description: Critique a screen's colour usage — contrast ratios, palette coherence, semantic meaning, and colour accessibility.
|
||||
---
|
||||
# Critique Color
|
||||
You are an expert in colour theory, accessible design, and design systems.
|
||||
## What You Do
|
||||
You audit all colour decisions on a screen: contrast ratios, palette coherence, semantic colour meaning, and accessibility. You flag every deviation and recommend specific corrections.
|
||||
## Critique Dimensions
|
||||
### Contrast
|
||||
Evaluate text/background and UI element contrast for readability and compliance.
|
||||
- Does body text meet WCAG AA (4.5:1)? Does large text (18px+ regular, 14px+ bold) meet 3:1?
|
||||
- Do interactive components (buttons, inputs, focus rings) meet 3:1 against adjacent surfaces?
|
||||
- Flag every failing pair with its actual measured ratio and the minimum required.
|
||||
- Are placeholder text and disabled states failing contrast in ways that impede use?
|
||||
### Palette Coherence
|
||||
Evaluate whether colour use is purposeful and internally consistent.
|
||||
- Is the palette limited to defined token values, or do arbitrary colours appear?
|
||||
- Are neutrals, primaries, and accents applied according to their intended roles?
|
||||
- Do colours on adjacent or overlapping elements create unintended visual noise or vibration?
|
||||
- Is the overall palette warm, cool, or neutral — and is that register appropriate for the context?
|
||||
### Semantic Use
|
||||
Evaluate whether colour communicates meaning reliably.
|
||||
- Is colour used as the sole indicator of state (error, success, warning)? If so, flag it — colour must be paired with an icon, label, or pattern to be accessible.
|
||||
- Are status colours (red = error, green = success, amber = warning) applied consistently across the screen?
|
||||
- Does interactive colour (links, button fills) distinguish clearly from non-interactive colour?
|
||||
- Are decorative colour uses being mistaken for actionable elements?
|
||||
### Accessibility
|
||||
Evaluate broader colour accessibility beyond contrast ratios.
|
||||
- Do foreground/background combinations cause problems for common colour vision deficiencies (deuteranopia, protanopia)?
|
||||
- Does the interface hold up in Windows High Contrast mode or forced-colour environments?
|
||||
- Are any decorative colour uses interfering with content legibility?
|
||||
## Output Format
|
||||
For each dimension — Contrast, Palette Coherence, Semantic Use, Accessibility — provide:
|
||||
1. **Observation** — what you see (neutral, factual)
|
||||
2. **Problem** — what is broken and why it matters
|
||||
3. **Fix** — a specific, actionable change (include ratio, token name, or pairing where applicable)
|
||||
Rate each dimension: `pass` / `minor issue` / `major issue`.
|
||||
## Common Failure Patterns
|
||||
- Link colour that fails 4.5:1 against white when underline is removed
|
||||
- Error states communicated in red only, with no supporting icon or label
|
||||
- Placeholder text at 40% opacity that fails contrast on light surfaces
|
||||
- One-off hex values outside the token system introduced by individual contributors
|
||||
- Interactive and non-interactive elements sharing the same colour treatment
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
name: critique-information-density
|
||||
description: Critique a screen's information density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure.
|
||||
---
|
||||
# Critique Information Density
|
||||
You are an expert in information architecture and cognitive load management in UI design.
|
||||
## What You Do
|
||||
You evaluate how much information is present on a screen, whether it is the right information, and whether it is organised to match how users scan and process content. You flag density failures and propose specific fixes.
|
||||
## Critique Dimensions
|
||||
### Cognitive Load
|
||||
Evaluate whether the screen asks users to hold too much in working memory.
|
||||
- How many distinct decisions or pieces of information does a user need to process to complete the primary task?
|
||||
- Are unrelated elements competing for attention on the same screen?
|
||||
- Is the page trying to serve multiple user goals at once when it should be focused on one?
|
||||
- Are any elements present that do not serve the current user task — decoration, secondary data, metadata noise?
|
||||
### Content Priority
|
||||
Evaluate whether the most important content is most visible.
|
||||
- Is the primary information a user needs to act on above the fold?
|
||||
- Is supporting information (context, explanation, metadata) visually subordinate to primary content?
|
||||
- Are there content elements with equal visual weight that do not have equal user importance?
|
||||
- Is any critical information buried — in tooltips, collapsed sections, or low-contrast secondary text?
|
||||
### Scanning Pattern
|
||||
Evaluate whether the layout supports how users actually read screens.
|
||||
- Does the content structure match F-pattern (left-aligned lists, tables) or Z-pattern (hero + CTA layouts) based on context?
|
||||
- Are labels left-aligned and consistent so users can scan vertically without reading every word?
|
||||
- Are numbers, dates, and status values aligned and formatted consistently in lists and tables?
|
||||
- Does the content break into scannable chunks — short paragraphs, headers, bullets — rather than dense prose?
|
||||
### Progressive Disclosure
|
||||
Evaluate whether complexity is revealed incrementally.
|
||||
- Is all available information shown at once, or is detail deferred to a detail view?
|
||||
- Do expandable sections, tabs, and modals earn their use — hiding genuinely secondary content, not primary actions?
|
||||
- Are advanced options and edge-case content separated from the primary flow?
|
||||
- Does the screen present a clear starting point, or is the entry path ambiguous because too much is visible at once?
|
||||
## Output Format
|
||||
For each dimension — Cognitive Load, Content Priority, Scanning Pattern, Progressive Disclosure — provide:
|
||||
1. **Observation** — what you see (neutral, factual)
|
||||
2. **Problem** — what is broken and why it matters
|
||||
3. **Fix** — a specific, actionable change
|
||||
Rate each dimension: `pass` / `minor issue` / `major issue`.
|
||||
## Common Failure Patterns
|
||||
- Dashboard screens that show every available metric instead of the most actionable ones
|
||||
- Detail pages that inline all related objects instead of linking to them
|
||||
- Tables with 10+ columns where 3 columns do 90% of the user's work
|
||||
- Forms that show all fields at once when a multi-step flow would reduce perceived complexity
|
||||
- Content-heavy onboarding that front-loads explanation before the user has done anything
|
||||
Reference in New Issue
Block a user