1. Define the component's props, styles names, CSS variables, and variants using TypeScript interfaces.
2. Choose the appropriate factory function (`factory`, `polymorphicFactory`, or `genericFactory`) based on the component's features.
3. Implement the component using the chosen factory function, `useProps` hook, and `useStyles` hook.
4. Define the component's styles in a CSS module and import it.
5. Use `createVarsResolver` to map props to CSS variables.
6. Integrate the component with the Mantine theme using `Component.extend()` to allow users to override defaults.
SynapticSkills