skills.rest
CinimoDY
CinimoDYCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

migrate-component

Migrate eidotter components to React Aria with Tailwind-first styling.

2|1|Updated Jan 27, 2025
Search Tags:#accessibility#tailwind#migrate#react-aria#eidotter#v37
One-click install
npx skills add https://github.com/CinimoDY/eiDotter --skill migrate-component-cinimody
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-component
Source: https://github.com/CinimoDY/eiDotter/tree/main/.claude/skills/migrate-component
Command: npx skills add https://github.com/CinimoDY/eiDotter --skill migrate-component-cinimody

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrate an eidotter component to the React Aria + Tailwind-first pattern following the V.37 migration strategy established by Button (PR #200).

Core Features & Use Cases

  • Standardizes ARIA primitives integration with Tailwind-first styling for components.
  • Provides migration steps that cover source, tests, stories, and registry updates to align with V.37.
  • Use Case: migrate a component to V.37 to ensure consistency and accessibility across the codebase.

Quick Start

Run the migration workflow for a specified component to adopt the V.37 React Aria + Tailwind-first guidance.

Frequently Asked Questions about migrate-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a React component to React Aria and Tailwind CSS?▼

To migrate a component to React Aria and Tailwind, follow the V.37 pattern to replace existing styling with ARIA primitives and Tailwind-first classes. This ensures props compatibility, versioned variants, and accessibility across the codebase.

What does the V.37 component migration pattern include?▼

The V.37 migration pattern standardizes React Aria integration with Tailwind-first styling for components. It enforces updating source code, CSS, tests, stories, and registry entries to align components with established accessibility and styling consistency.

Do I need to update tests and stories when migrating to React Aria?▼

Yes, migrating to React Aria requires updating tests, stories, and registry entries alongside the source code. This ensures the component maintains accessibility compliance and props compatibility after adopting the V.37 Tailwind-first pattern.

When should I migrate my eidotter components to Tailwind-first styling?▼

You should migrate eidotter components to Tailwind-first styling when adopting the V.37 pattern to ensure accessibility and consistency across the codebase, using the Button component's migration as the established reference.

Can I use this V.37 migration pattern for any component in my codebase?▼

Yes, this V.37 migration pattern applies to migrating components across the entire codebase. It standardizes ARIA primitives integration, props compatibility, and versioned variants for consistent React Aria and Tailwind-first styling.

Why migrate components to React Aria primitives instead of custom accessibility?▼

Migrating to React Aria primitives standardizes accessibility implementation by leveraging established ARIA behaviors and Tailwind-first styling. This ensures consistent props compatibility and versioned variants across the codebase without maintaining custom accessibility logic.

Related Skills

Explore More Software Engineering Skills→
CinimoDYCinimoDY
2

figma-audit

Audit eiDotter React components against V.37 Figma designs via Figma Console MCP.

Community
Intermediate
factorialcofactorialco
27

f0-storybook-testing

Automate interaction and accessibility tests for Storybook components with Playwright and axe-playwright.

Official
Intermediate
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
mlbrightmlbright

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utility classes.

Community
Intermediate