Toolverse
All skills
Frontend

react-component-patterns

by HoangNguyen0403

Modern React component architecture and composition patterns.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
HoangNguyen0403
Category
Frontend
Views
27
GitHub repo

About this skill

Modern React component architecture and composition patterns.

How to use

  1. Zainstaluj skill w swoim projekcie React, dodając go do konfiguracji agenta lub środowiska deweloperskiego, w którym pracujesz z plikami JSX i TSX.
  2. Podczas pisania komponentów stosuj wytyczne dotyczące funkcyjnych komponentów — używaj wyłącznie hooks, nigdy klas. Destrukturyzuj props w parametrach funkcji i definiuj je za pomocą interfejsów TypeScript.
  3. Organizuj kod zgodnie z zasadą composition — przekazuj zawartość przez prop children zamiast stosować dziedziczenie. Unikaj prop drilling, korzystając z Context API lub bibliotek takich jak Zustand.
  4. Przestrzegaj konwencji nazewnictwa: komponenty w PascalCase, hooki z prefiksem use*. Eksportuj tylko named exports, nie default exports.
  5. Strukturyzuj importy w kolejności: wbudowane moduły, biblioteki zewnętrzne, komponenty wewnętrzne, style. Utrzymuj komponenty małe (poniżej 250 linii), jeden komponent na plik.
  6. Unikaj anti-patternów: nie definiuj komponentów wewnątrz innych komponentów, nie używaj indeksów jako kluczy w listach, nie pisz handlersów inline. Zamiast tego wyciągaj statyczne obiekty i JSX poza komponent, aby uniknąć niepotrzebnych renderowań.

Related skills

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116

bubbletea

by hmans

Browse Bubbletea TUI framework documentation and examples. Use when working with Bubbletea components, models, commands, or building terminal user interfaces in Go.

Frontend
2158

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676