react
Przewodnik do tworzenia komponentów React z gotowymi wzorcami i biblioteką UI
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność dla agentów AI wspierająca pracę z komponentami React (.tsx). Zawiera wytyczne do stylowania za pomocą antd-style i @lobehub/ui, architekturę routingu hybrydowego (Next.js App Router + React Router DOM) oraz katalog gotowych komponentów do layoutu, nawigacji i wprowadzania danych. Automatycznie aktywuje się przy tworzeniu lub modyfikacji komponentów, implementacji layoutów i zadań nawigacyjnych.
Jak używać
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.