What problem does it solve?
This Skill eliminates inconsistent frontend implementation in Atomic CRM by providing clear, standardized conventions for component structure, data fetching, and responsive design, reducing bugs and cutting down onboarding time for new developers working on the project.
Core Features & Use Cases
- Standardized Component Architecture: Enforces correct import paths for admin-wrapped vs pure UI components, proper resource file structure, and semantic splitting of form fields into reusable sub-components.
- Consistent Data Fetching Patterns: Mandates use of ra-core hooks and custom dataProvider methods instead of ad-hoc API calls, ensuring reliable and maintainable data access across the application.
- Responsive Design Compliance: Requires dual desktop/mobile variants for all major pages, using
useIsMobile() to branch layouts for optimal user experience on all device sizes.
- Use Case Example: When building a new contact management resource page, this Skill guides you to structure the folder correctly, use the right input components, implement mobile variants, and follow data fetching best practices to match the rest of the Atomic CRM codebase.
Quick Start
When creating or modifying a React component, form, list page, or detail view for Atomic CRM, follow the conventions outlined in this Skill to ensure your code aligns with project standards and passes all verification checks.
