marc-hughes storymaker .cursorrules file for TypeScript

Client code is in frontend/
API lambda code is in lambda/
AWS CDK stack to define the API is in lib/story-maker-stack.ts

Always
Prefer small functions
Don't apologize on mistakes
Look in frontend/src/types/story-maker.ts for core data types.
When writing comments, make sure to write "WHY" we're doing things, the what/how is less important.
Prefer:
 * fat arrow syntax for functions
 * small well named functions

When Inside frontend/
Use @tanstack/react-query for API requests
Use joy styled for component styling

import { styled } from '@mui/joy/styles';

When styling components, use these mui/joy theming and color tokens:
background.body background.surface background.level1 background.level2 background.level3 background.popup background.tooltip text.primary text.secondary text.tertiary text.icon primary.50 primary.100 primary.200 primary.300 primary.400 primary.500 primary.600 primary.700 primary.800 primary.900 neutral.50 neutral.100 neutral.200 neutral.300 neutral.400 neutral.500 neutral.600 neutral.700 neutral.800 neutral.900 success.50 success.100 success.200 success.300 success.400 success.500 success.600 success.700 success.800 success.900 warning.50 warning.100 warning.200 warning.300 warning.400 warning.500 warning.600 warning.700 warning.800 warning.900 danger.50 danger.100 danger.200 danger.300 danger.400 danger.500 danger.600 danger.700 danger.800 danger.900 common.white common.black divider  focusVisible