react
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.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
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.
How to use
Zainstaluj umiejętność w swoim agencie AI, wskazując repozytorium lobehub. Umiejętność będzie automatycznie dostępna podczas pracy z plikami React (.tsx).
Gdy tworzysz nowy komponent, agent zasugeruje użycie komponentów z @lobehub/ui zamiast pisania od zera. Dla layoutów wybierz Flexbox lub Center z biblioteki; dla stylów złożonych użyj antd-style, a dla prostych — inline style.
Sprawdź dostępne komponenty w referencji node_modules/@lobehub/ui/es/index.mjs. Najczęściej używane to ActionIcon, Button, Modal, Form, Input, Select, Tabs, SideNav i DraggablePanel.
Przy implementacji routingu rozróżnij dwa systemy: Next.js App Router dla stron autentykacji (login, signup) w src/app/[variants]/(auth)/, oraz React Router DOM dla głównej aplikacji (chat, ustawienia) w desktopRouter.config.tsx.
Dla dostępu do stanu globalnego używaj selektorów zustand store zamiast prop drilling. Umiejętność podpowie prawidłową składnię na podstawie istniejącego kodu w projekcie.
Jeśli nie jesteś pewien użycia komponentu, przeszukaj istniejący kod projektu — większość komponentów rozszerza antd o dodatkowe właściwości, a wzorce są już tam udokumentowane.