jsoehner/skills-backup/frontend-design-system-orchestrator

Frontend Design System Orchestrator - Consistent UI Development

This skill manages the transition from design concepts to production-ready frontend components. It ensures that every UI element is consistent with the design system, secure, accessible, and visually correct.

When to Use

Use this skill when:

• Building a new product's UI/UX.
• Developing a reusable component library.
• Implementing a new design system.
• Auditing an existing frontend for visual and security issues.

The Orchestrated Workflow

This skill executes the following phases in sequence:

Phase 1: Design & Foundations

1. UI/UX Design: Invoke ui-ux-designer to create wireframes, design tokens, and user flows.
2. Design System Setup: Invoke tailwind-design-system to establish the tokenized styling, component libraries, and responsive patterns.

Phase 2: Component Development

1. Component Scaffolding: Invoke frontend-developer to build React components using TypeScript, hooks, and the established design tokens.
2. State Management: Invoke react-state-management to manage global and server state effectively.

Phase 3: Security & Quality

1. Security Scanning: Invoke frontend-security-coder to check for XSS vulnerabilities and client-side security issues.
2. Visual Validation: Invoke ui-visual-validator to verify that the final implementation matches the design specifications and accessibility standards.

Freedom Calibration & Constraints

• Constraint Level: Medium
• Rigidity: The sequence of Design $\rightarrow$ Tokens $\rightarrow$ Components $\rightarrow$ Validation is mandatory.
• Freedom: The specific UI components and layout choices are left to the designer and developer's collaboration.

Critical Anti-Patterns (NEVER List)

Verification

1. A design system with tokens and components is established.
2. New features are built using the established system.
3. Components pass security and visual validation checks.
4. Accessibility standards are met across all new UI.