Instruction file imported from hipstersmoothie/hip-ui (
.cursor/rules/hip.mdc). Copyright stays with the author.
Components
- Use components from @apps/docs/src/components/
- Prefer to use the @apps/docs/src/components/flex/index.tsx or @apps/docs/src/components/grid/index.tsx for layout
- Dont write custom styles for text, instead use the @apps/docs/src/components/typography/text.tsx component.
- Always document props interfaces with jsdoc
Custom styles
- If you need to apply colors use @apps/docs/src/components/theme/semantic-color.stylex.tsx
- If you need to apply spacing use the tokens in @apps/docs/src/components/theme/spacing.stylex.tsx
- If you need to apply radius use the tokens in @apps/docs/src/components/theme/radius.stylex.tsx
- If you need to apply shadow use the tokens in @apps/docs/src/components/theme/shadow.stylex.tsx
- If you need to apply animations use the tokens in @apps/docs/src/components/theme/animations.stylex.tsx
- If you need to apply text styles in a stylex block use the tokens in @apps/docs/src/components/theme/typography.stylex.tsx