• Table of Content

<aside> 💡

Minha Regra na composição de Componentes (My Component Rules):

“If you copy and paste the same combo three times (or more), it's time to give it a name. Start specific, generalize when you have real need. YAGNI”

“Compose first. Use a wrapper when it makes sense. But always provide the option to compose.”

Internal Components Manifesto

</aside>

| 𝑯𝑻𝑴𝑳/𝑪𝑺𝑺 - Dicas e Tesouros

⇒ AI Open Source Tools

<aside> 🔥

AI Underground❤️‍🔥

</aside>

⇒ Background Focused

Background Arena

⇒ UI/UX & Reusable Components

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

🌹 Registries

| 𝑼𝑿/𝑼𝑰

</aside>

⇒ Animation & Design System

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

| Animations Libs

| Design System and CSS Frameworks

</aside>

⇒ NextJS APP Router Libs 💎

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️ **→ MDNEXT

</aside>

⇒ Auth & Permissions

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️ Authentication

→ **Better-Auth**

→ Clerk

→ Auth0

→ **OpenAuth**

→ **WorkOS → server/API for many auth features such login, MFA, Magic Auth, enterprise auth**

→ **AuthKit by WorkOS → hosted UI or custom UI integrated with Radix powered by WorkOS**

→ Stack Auth

→ **Casdoor**

→ **NextAuth v5 (don’t like it anymore…)**

⚛️ Permissions

• → CASL - Isomorphic Authorization </aside>

⇒ Desktop Native APP

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ Microsoft react-native-windows

→ Tauri.app

→ Socketsupply

→ **Electron-vite**

→ **Electron.js**

</aside>

→ End-to-end TypeSafe API

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> → Kubb → tRPC

→ Zodios

</aside>

→ JSON Alternatives

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> State Machines/Managers

→ FlatBuffers

</aside>

→ State Management

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> State Machines/Managers

→ Zustand

→ Jotai

→ XState

→ Valtio

→ NanoStore

→ Legend-State

URL States

→ **Nuqs**

</aside>

→ React Performance Debug

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️

→ React Scan

→ **Million.dev (full analyses inside IDE)**

→ Why Did You Render?

→ useWhyDidYouRender?

</aside>

⇒ Tests - Unit/E2E Tests

<aside> <img src="/icons/categories_blue.svg" alt="/icons/categories_blue.svg" width="40px" /> ⚛️ E2E tests

→ **Playwright (MCP available)**

→ **StageHand (AI-powered, modern E2E testing)**

→ Cypress

⚛️ Unit tests

→ React Testing Library

</aside>

<aside> 💡

</aside>