Toolverse
All skills

epic-react-patterns

by epicweb-dev

Guide on React patterns, performance optimization, and code quality for Epic Stack

Installation

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

Installation

Quick info

Category
Frontend

About this skill

Guide on React patterns, performance optimization, and code quality for Epic Stack

How to use

  1. Zainstaluj umiejętność epic-react-patterns w swoim środowisku Epic Stack. Umiejętność będzie dostępna jako referencja dla asystenta AI (Claude, Copilot lub inny) podczas pracy nad kodem React.

  2. Kiedy piszesz nowy komponent lub refaktoryzujesz istniejący kod, poproś asystenta o zastosowanie wzorców z epic-react-patterns. Wspomni o tym, że pracujesz w Epic Stack.

  3. Dla pobierania danych użyj React Router loaderów zamiast useEffect. Zdefiniuj funkcję loader w pliku routu, pobierz dane z bazy lub API, a następnie przekaż je do komponentu przez loaderData.

  4. Optymalizuj wydajność stopniowo: najpierw upewnij się, że kod działa, potem uczyń go czytelnym, wreszcie optymalizuj re-rendy i bundle. Nie dodawaj złożoności, jeśli nie przynosi rzeczywistej wartości.

  5. Unikaj typowych błędów: nie pobieraj danych w useEffect, nie ignoruj zależności hooków, nie tworz zbędnych abstrakcji. Umiejętność zawiera przykłady zarówno poprawnych, jak i błędnych podejść.

  6. Gdy pracujesz nad code splittingiem lub optymalizacją routingu, odwołaj się do konwencji Epic Stack zawartych w umiejętności – asystent będzie wiedział, jak strukturować kod zgodnie ze standardami projektu.

Related skills

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

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

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

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

markitdown

by K-Dense-AI

Convert various file formats (PDF, Office documents, images, audio, web content, structured data) to Markdown optimized for LLM processing. Use when converting documents to markdown, extracting text from PDFs/Office files, transcribing audio, performing OCR on images, extracting

Frontend
75173

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335