| name | maintain-component |
| description | Guidelines for creating or updating UI components, ensuring tests and documentation stay in sync. |
Component Maintenance Skill
Use this skill whenever you are tasked with creating a new UI component or modifying an existing one in the gvtech-design library. All components must follow the monorepo-based architecture to support Web, React Native, and shared contracts.
Architecture Standards
Components are split across three primary packages:
@gv-tech/ui-core: Shared contracts/interfaces.
- Location:
packages/ui-core/src/contracts/[name].ts
- Role: Defines the "Truth" of what a component's API should be.
@gv-tech/ui-web: Web (DOM/Radix) implementation.
- Location:
packages/ui-web/src/[name].tsx
- Tests:
packages/ui-web/src/[name].test.tsx
@gv-tech/ui-native: React Native (NativeWind) implementation.
- Location:
packages/ui-native/src/[name].tsx
Workflow
1. Contract Definition (Core)
- Always start by defining or updating the base props in
packages/ui-core/src/contracts/[name].ts.
- Export these props from
packages/ui-core/src/index.ts.
- CRITICAL: Use specific types. Avoid
any. Use unknown or specific interfaces for extension.
2. Platform Implementation
- Web:
- Build the implementation in
packages/ui-web/src/[name].tsx.
