Can this skill help with converting components between frameworks?

Yes, it excels at framework conversion, such as translating JSX to Vue templates or converting React's useEffect logic into Svelte's reactive syntax while preserving functionality.

Does it support animation libraries like Framer Motion?

Yes, it includes templates for Framer Motion in React and transition APIs for Vue and Svelte to create spring physics, gestures, and enter/exit sequences.

How does the skill handle accessibility (a11y)?

It follows an 'a11y-first' approach, implementing semantic HTML, ARIA attributes, keyboard navigation (tabbing, focus traps), and color contrast checks according to WCAG standards.

Is TypeScript required to use this skill?

While it can generate standard JavaScript, it specializes in strict TypeScript excellence, using generics, discriminated unions, and utility types for maximum type safety.

Which frontend frameworks are supported by this skill?

The skill provides specialized guidance and implementation patterns for React, Vue, and Svelte, including framework-specific idioms like hooks, composables, and reactive declarations.

UI Component Builder

Name: UI Component Builder
Author: deve1993

bydeve1993

•

Herramientas de Diseño

Builds, converts, and optimizes production-ready UI components across React, Vue, and Svelte frameworks with a focus on accessibility and TypeScript.

Acerca de

This skill transforms Claude into a senior frontend engineer specializing in high-end component library development. It provides the domain expertise required to build complex, accessible, and high-performance components using modern architectural patterns like compound components, render props, and polymorphic 'as' props. Beyond initial creation, the skill excels at seamless cross-framework conversion—such as migrating React hooks to Svelte reactive declarations—while maintaining strict TypeScript safety, implementing physics-based animations, and ensuring WCAG compliance for production-grade design systems.

Características Principales

Multi-framework support for React, Vue, and Svelte with TypeScript
Built-in accessibility (a11y) suite for keyboard navigation and ARIA compliance
Cross-framework component conversion while preserving logic and props
1 GitHub stars
Performance optimization including memoization and virtual scrolling patterns
Advanced pattern implementation including Compound Components and Render Props

Casos de Uso

Migrating an existing UI codebase from one framework to another (e.g., React to Vue).
Refactoring legacy components to support screen readers and complex keyboard interactions.
Architecting a standardized design system library with consistent TypeScript patterns.

Acerca de

Características Principales

Multi-framework support for React, Vue, and Svelte with TypeScript
Built-in accessibility (a11y) suite for keyboard navigation and ARIA compliance
Cross-framework component conversion while preserving logic and props
1 GitHub stars
Performance optimization including memoization and virtual scrolling patterns
Advanced pattern implementation including Compound Components and Render Props

Casos de Uso

Migrating an existing UI codebase from one framework to another (e.g., React to Vue).
Refactoring legacy components to support screen readers and complex keyboard interactions.
Architecting a standardized design system library with consistent TypeScript patterns.