Sunbytes React

When to apply

Trigger on .tsx files or any React component work. Always load sb-typescript alongside this skill.

Components

• Function components only. No class components.
• One component per file. File name = component name in PascalCase.tsx.
• Props go in a typed prop alias at the top of the file: type FooProps = { ... }. Don't inline anonymous prop types in the signature.
• Destructure props in the signature. No props.foo access inside the body.
• Type children as ReactNode, not JSX.Element or ReactElement.
• Don't export prop types unless another module legitimately needs them. Internal types stay internal.

Hooks