ui-component-builder

Build accessible React components by combining TypeScript typing with semantic HTML, ARIA attributes, and keyboard navigation. This Skill provides patterns for compound components, render props, and custom hooks while ensuring ARIA compliance, focus management, and keyboard accessibility requirements for production-ready components.

Yes, convert and migrate UI components across React, Vue, and Svelte frameworks. This Skill handles cross-framework porting by applying consistent patterns, TypeScript generics, and polymorphic component designs that maintain API compatibility and functionality across all three frameworks.

Implement compound components, render props, and custom hooks to build flexible, reusable UI patterns. This Skill applies advanced TypeScript patterns including generics and discriminated unions for type safety while optimizing performance through memoization and code-splitting.

Optimize component performance by applying memoization techniques and code-splitting strategies. This Skill reduces bundle impact through efficient TypeScript typing patterns and lazy-loading approaches while maintaining accessibility and cross-framework compatibility.

Yes, integrate animations into TypeScript-based components using Framer Motion and CSS transitions. This Skill combines animation libraries with accessible patterns, ensuring animated components maintain keyboard navigation, focus management, and ARIA requirements.

Convert component libraries by starting with strong TypeScript foundations, semantic HTML, and accessibility audits. Preparation involves inventorying current patterns, identifying framework-specific implementations, and establishing strict typing standards before migrating to the new cross-framework structure.