wshobson--agents
Seth Hobson
d31e8b8fea
Review feedback:
- codex.py: Codex marketplace entries now conform to the openai/codex
core-plugins schema — source {source: "local", path}, policy
{installation, authentication}, and category (was missing required
fields; flagged P1). Top-level trimmed to {name, plugins}.
- codex.py: interface.shortDescription cuts on a word boundary + ellipsis
instead of a mid-word [:120] slice in committed .codex-plugin manifests.
- cursor.py: top-level .cursor-plugin/plugin.json displayName is now the
short "Claude Code Workflows" instead of the long marketplace description.
Tooling (local drives CI):
- Bump ruff 0.15.14 -> 0.15.15 and ty 0.0.39 -> 0.0.40 in plugin-eval's
uv.lock so CI installs the same versions we run locally, and reformat the
tools/ + plugin-eval sources to ruff 0.15.15 (fixes the failing
ruff format --check; the lock-hash change also busts CI's stale cache).
make validate STRICT=1 clean / garden 0 errors / 442 tests pass; regeneration
remains drift-free.
UI/UX Design Plugin for Claude Code
Comprehensive UI/UX design plugin covering mobile (iOS, Android, React Native) and web applications with modern design patterns, accessibility, and design systems.
Features
Core Capabilities
- Design Systems: Token architecture, theming, multi-brand systems
- Accessibility: WCAG 2.2 compliance, inclusive design patterns
- Responsive Design: Container queries, fluid layouts, breakpoints
- Mobile Design: iOS HIG, Material Design 3, React Native patterns
- Web Components: React/Vue/Svelte patterns, CSS-in-JS
- Interaction Design: Microinteractions, motion, transitions
Skills
| Skill | Description |
|---|---|
design-system-patterns |
Design tokens, theming, component architecture |
accessibility-compliance |
WCAG 2.2, mobile a11y, inclusive design |
responsive-design |
Container queries, fluid layouts, breakpoints |
mobile-ios-design |
iOS Human Interface Guidelines, SwiftUI patterns |
mobile-android-design |
Material Design 3, Jetpack Compose patterns |
react-native-design |
React Native styling, navigation, animations |
web-component-design |
React/Vue/Svelte component patterns, CSS-in-JS |
interaction-design |
Microinteractions, motion design, transitions |
visual-design-foundations |
Typography, color theory, spacing, iconography |
Agents
| Agent | Description |
|---|---|
ui-designer |
Proactive UI design, component creation, layout optimization |
accessibility-expert |
A11y analysis, WCAG compliance, remediation |
design-system-architect |
Design token systems, component libraries, theming |
Commands
| Command | Description |
|---|---|
/ui-design:design-review |
Review existing UI for issues and improvements |
/ui-design:create-component |
Guided component creation with proper patterns |
/ui-design:accessibility-audit |
Audit UI code for WCAG compliance |
/ui-design:design-system-setup |
Initialize a design system with tokens |
Installation
/plugin install ui-design
Usage Examples
Design Review
/ui-design:design-review --file src/components/Button.tsx
Create Component
/ui-design:create-component Card --platform react
Accessibility Audit
/ui-design:accessibility-audit --level AA
Design System Setup
/ui-design:design-system-setup --name "Acme Design System"
Key Technologies Covered
Web
- CSS Grid, Flexbox, Container Queries
- Tailwind CSS, CSS-in-JS (Styled Components, Emotion)
- React, Vue, Svelte component patterns
- Framer Motion, GSAP animations
Mobile
- iOS: SwiftUI, UIKit, Human Interface Guidelines
- Android: Jetpack Compose, Material Design 3
- React Native: StyleSheet, Reanimated, React Navigation
Design Systems
- Design tokens (Style Dictionary, Figma Variables)
- Component libraries (Storybook documentation)
- Multi-brand theming
Accessibility
- WCAG 2.2 AA/AAA compliance
- ARIA patterns and semantic HTML
- Screen reader compatibility
- Keyboard navigation
Generated Artifacts
The plugin creates artifacts in .ui-design/:
.ui-design/
├── design-system.config.json # Design system configuration
├── component_specs/ # Generated component specifications
├── audit_reports/ # Accessibility audit reports
└── tokens/ # Generated design tokens
Requirements
- Claude Code CLI
- Node.js 18+ (for design token generation)
License
MIT License