react-headless-dev

The 'react-headless-dev' skill is designed for developing unstyled, logic-only React components that follow the SEED headless architecture patterns. This skill enables developers to create components that focus solely on data handling, state management, and business logic, leaving styling concerns to external libraries like '@seed-design/react'. The skill addresses the need for components that are decoupled from styling, ensuring flexibility and scalability in the design system. It enables the creation of components that handle complex logic while remaining agnostic to their visual presentation.

Main features include support for custom hooks to manage component states and behaviors, primitive composition for combining React elements into logical components, and the use of data attributes to reflect state changes. It is especially useful for developers working in design systems that require unstyled logic components, making it easier to implement reusable, testable, and maintainable components. This skill is ideal for improving code modularity and following best practices for separation of concerns in UI development.

Use cases include developing new headless components in the 'packages/react-headless' folder, refactoring existing logic to enhance or separate business logic, and implementing custom hooks for managing component states and events. Target users are React developers working within a headless architecture, particularly in large-scale design systems such as SEED Design System.