---
description: 
globs: 
alwaysApply: false
---
---
description: If you are need to polish the code quality AFTER creating new tsx file. Read this rule
globs: 
alwaysApply: false
---
You have to follow these rules:
## Do:

1. Strictly follow requirements
2. Use functional programming techniques exclusively
3. Maintain immutability throughout
4. Use DRY principle across all files
5. Always have bun-first mindset
6. Always clean leftover unnecessary files
7. Highly reusability `react` FC functions in SINGLE tsx file
8. Use Ver and Hor based structure on tsx file
9. Within the nested ver hor, the last deepest child should use proper html semantic not div, ver hor

## Don't:
10. Do not use `tailwind.config.js` it is deprecated in Tailwind CSS v4. v4 only needs `@import "tailwindcss";` in the CSS file.
11. No DIV allowed, only use Ver Hor for directional component spreads
12. Avoid OOP, classes, or inheritance
13. Avoid traditional methods. use HOF
14. Don't write // comments
15. Don't use `any` or `unknown` types
16. Don't use JSX elements like <div>, <Ver>, <Hor>, etc in the return statements, they should be extracted into separate functional FC components.
17. No props drilling, use jotai
18. use lucide react rather than writing svgs
19. Do not create any new files other than these;
    a. `src\components\page\*.page.tsx` : 
    b. `src\components\ui\*.reuse.tsx` :
    c. `src\types\common.type.ts` :
    d. `src\types\props.type.ts` :
    e. `src\state-management\hooks\*.hook.ts` : jotai useAtom
    f. `src\state-management\hooks\*.state.ts` : jotai atom