mirror of
https://github.com/wshobson/agents.git
synced 2026-03-18 09:37:15 +00:00
4d504ed8fa
Rewrites 14 commands across 11 plugins to remove all cross-plugin subagent_type references (e.g., "unit-testing::test-automator"), which break when plugins are installed standalone. Each command now uses only local bundled agents or general-purpose with role context in the prompt. All rewritten commands follow conductor-style patterns: - CRITICAL BEHAVIORAL RULES with strong directives - State files for session tracking and resume support - Phase checkpoints requiring explicit user approval - File-based context passing between steps Also fixes 4 plugin.json files missing version/license fields and adds plugin.json for dotnet-contribution. Closes #433
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