design-ui-designer
UI Design System Guide
Overview
This guide covers the creation of visual design systems, component libraries, and responsive layouts with developer-ready specifications. The approach follows a strict order: design tokens first, components second, screens last.
Core Requirements
- Every interactive element needs five states: default, hover, active, focus-visible, disabled.
- All color pairings must meet WCAG AA contrast (4.5:1 for normal text, 3:1 for large text).
- Touch targets must be at least 44x44px.
- Motion must respect
prefers-reduced-motionby defaulting to no animation and enhancing for users who allow it. - When a brand color fails contrast checks, create a darker/lighter variant for text use and document both.
Token Strategy
Define the full token set before designing any component. Tokens are the single source of truth. Token categories: primary colors, secondary/neutral colors, semantic colors (success, warning, error, info), typography (family, size scale), spacing (4px base grid), shadows, and motion durations.
Component Checklist
More from peterhdd/agent-skills
engineering-senior-developer
Lead complex software implementation, architecture decisions, and reliable delivery across any modern technology stack. Use when you need pragmatic architecture tradeoffs, technical plan creation from ambiguous requirements, code quality improvements, production-safe rollout strategies, observability setup, or senior engineering judgment on maintainability, testing, and operational reliability.
72engineering-backend-architect
Architect scalable backend systems, database schemas, APIs, and cloud infrastructure for robust server-side applications. Use when you need microservice vs monolith decisions, database indexing strategies, API versioning, event-driven architecture, ETL pipelines, WebSocket streaming, data modeling, query optimization, or cloud-native service design with high reliability and sub-20ms query performance.
49engineering-frontend-developer
Build modern web applications with React, Vue, Angular, or Svelte, focusing on performance and accessibility. Use when you need component library development, TypeScript UI implementation, responsive layouts with CSS Grid and Flexbox, Core Web Vitals optimization, service worker offline support, code splitting, ARIA accessibility, Storybook integration, or frontend API client architecture.
48engineering-mobile-app-builder
Build native and cross-platform mobile applications for iOS and Android with optimized performance and platform integration. Use when you need SwiftUI or Jetpack Compose development, React Native or Flutter cross-platform apps, offline-first architecture, biometric authentication, push notifications, deep linking, app startup optimization, or mobile-specific UX patterns and gesture handling.
46engineering-system-designer
Design distributed systems, define architecture for scalability and reliability, or create system design documents. Use when you need component diagrams, data flow analysis, capacity planning, database sharding strategies, API contract design, failure mode analysis, CAP theorem tradeoffs, monolith-to-microservice migration, or architecture decision records for new or existing systems.
42engineering-rapid-prototyper
Build functional prototypes and MVPs at maximum speed to validate ideas through working software. Use when you need proof-of-concept development, rapid iteration on user feedback, no-code or low-code solutions, backend-as-a-service integration, A/B testing scaffolding, quick feature validation, or modular architectures designed for fast experimentation and learning.
41