create-component
정적 HTML/CSS를 RNBT 동적 컴포넌트로 변환합니다. Figma Conversion에서 생성된 정적 파일을 RNBT_architecture 패턴에 맞게 동적 컴포넌트로 변환합니다. Use when converting static HTML to dynamic components, creating RNBT components, or implementing components with data binding and event handling.
When & Why to Use This Skill
This Claude skill automates the conversion of static HTML/CSS into dynamic RNBT (React Native/Web) components, specifically designed to bridge the gap between Figma designs and functional code. By adhering to the RNBT_architecture pattern, it streamlines the implementation of data binding, event handling, and standardized UI states, significantly accelerating the frontend development lifecycle within a design system.
Use Cases
- Figma-to-Code Transformation: Seamlessly convert static HTML files exported from Figma into production-ready dynamic components.
- Design System Scaling: Rapidly add new components to an existing UI library while maintaining consistent states like Neutral, Primary, Success, and Danger.
- Architectural Standardization: Ensure all newly created components strictly follow the RNBT_architecture pattern for better maintainability and scalability.
- Automated UI Documentation: Generate corresponding MDX documentation automatically for every new component created, ensuring the design system stays up-to-date.
- Component State Management: Implement complex UI logic including prefix/suffix slots and hierarchical state changes with minimal manual coding.
| name | create-component |
|---|---|
| description | Add a new component to the design system |
Create Component
When creating Equality components,
Common Patterns
States
We commonly use the following states for components:
- Neutral (Default)
- Primary (A hierarchical increase, uses the primary brand color)
- Success (Something has worked correctly)
- Warning (The user should be informed that something may not be working as intended or requires attention)
- Danger (Destructive actions or serious errors)
Prefix and Suffix Slots
Components like "Button" and "Input" have prefix and suffix slots to place icons or buttons before, or after the primary component content.
Documentation
After creating the component in the "ui" package, always create a corresponding docs MDX under packages/demo/src/content/components.
Review the create-documentation skill for instructions on how to format the docs.