mirror of
https://github.com/wshobson/agents.git
synced 2026-03-18 17:47:16 +00:00
47a5dbc3f9
Remove references to non-existent resource files (references/, assets/, scripts/, examples/) from 115 skill SKILL.md files. These sections pointed to directories and files that were never created, causing confusion when users install skills. Also fix broken Code of Conduct links in issue templates to use absolute GitHub URLs instead of relative paths that 404.
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