core-components

The core-components skill provides essential guidance for maintaining a high-quality, consistent user interface in React Native projects. It serves as the primary reference for developers and AI agents to ensure that all UI implementations adhere to established design system patterns. By mandating the use of a centralized component library instead of raw platform components, it eliminates visual drift and simplifies maintenance. The skill emphasizes the strict application of design tokens—specifically spacing, colors, and typography—to prevent the anti-pattern of hard-coded values that often lead to technical debt and brittle layouts.

• Standardizes usage of core layout components including Box, HStack, VStack, and Card to maintain structural consistency.

• Enforces strict token-based props for interactive elements like Buttons and Inputs, ensuring consistent variants and validation behaviors.

• Provides clear templates for complex layouts such as Screen headers, form structures, and list item patterns to reduce repetitive coding tasks.

• Prevents common anti-patterns by explicitly contrasting hard-coded styles with recommended token-based implementations.

• Offers guidance on component prop patterns, encouraging developers to build new reusable components that strictly utilize the existing design token architecture.

• Always prefer component abstractions (e.g., <Box />) over native React Native primitives (e.g., <View />) to ensure theme compliance.

• Apply semantic color tokens (e.g., $textPrimary, $statusError) rather than hex or RGB codes to support theme switching and accessibility.

• Use the provided spacing and typography scales for all layout calculations to maintain a consistent visual rhythm across the application.

• Consult this skill when implementing new UI features, building form layouts, or refactoring existing view layers to ensure they align with the project's design language.

• Integrate with other skills like react-ui-patterns for loading states and testing-patterns for mocking these components in unit tests.