| .. | ||
| .claude-plugin | ||
| commands | ||
| skills | ||
| README.md | ||
ui-design
Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.
Skills (9)
- layout-grid — Define responsive layout grid systems with columns, gutters, margins, and breakpoints.
- color-system — Build a comprehensive color system with palette generation and accessibility compliance.
- typography-scale — Create a modular typography scale with size, weight, and line-height relationships.
- responsive-design — Design adaptive layouts and interactions across all screen sizes and inputs.
- visual-hierarchy — Establish clear visual hierarchy through size, weight, color, spacing, and position.
- spacing-system — Create a consistent spacing system based on a base unit with application rules.
- dark-mode-design — Design effective dark mode interfaces with proper color adaptation and contrast.
- illustration-style — Define an illustration style guide with visual language and usage rules.
- data-visualization — Design clear, accessible data visualizations with appropriate chart selection.
Commands (4)
/design-screen— Design a complete screen layout from a description or requirements./color-palette— Generate a full color palette with semantic mapping and accessibility checks./type-system— Create a complete typography system from brand fonts or requirements./responsive-audit— Audit a design for responsive behavior across breakpoints.