Free Cursor rule
Small components
One job per file. Split a React screen before it becomes a junk drawer.
The rule
---
description: Keep each React component on one job and split large files.
globs: "**/*.{tsx,jsx}"
alwaysApply: false
---
# Small components
- A component renders one idea. Data loading, formatting, and the screen it sits in are separate.
- When a file is hard to name, it has two jobs. Split it.
- Prefer a new component over a longer conditional block.
- Share business rules from a module the web app and any mobile app can both import. Keep the screen itself on its platform.
How to use it
Copy the rule into .cursor/rules/small-components.mdc in your own project. It is free to use. It is a working habit from [Wann Labs](/), the public notes of BrandMatchGrowth, not a promise that your codebase will pass an audit.
If you want the same standard applied to a product people pay for, book a working session. The public product that came out of this shop-and-software work is OpenSign.