Toolverse
All skills

react-ui-patterns

by ChrisWiles

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

Installation

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

Installation

Quick info

Category
Frontend
Views
5

About this skill

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

How to use

  1. Zainstaluj skill react-ui-patterns w swoim środowisku Claude, dodając go do katalogu skills. 2. Otwórz projekt React, w którym chcesz zastosować wzorce — przygotuj komponent z zapytaniem do API lub hook'iem pobierającym dane. 3. Zapoznaj się z główną zasadą: pokazuj wskaźnik ładowania tylko wtedy, gdy nie masz żadnych danych do wyświetlenia. Unikaj migotania loadera na danych z cache'u. 4. Zastosuj decyzyjne drzewo wyboru stanu — najpierw sprawdź błąd, potem czy ładujesz bez danych, następnie czy masz dane, a na koniec czy lista jest pusta. 5. Wybierz odpowiedni typ wskaźnika: użyj szkieletu dla znanych kształtów treści (listy, karty, ładowanie strony), a spinnera dla nieznanego kształtu (modalne akcje, wysyłanie formularza). 6. Wdrażaj obsługę błędów warstwowo — błędy pól w formularzu, powiadomienia toast dla błędów odwracalnych, a komunikaty błędów dla krytycznych problemów.

Related skills

2d-games

by davila7

2D game development principles. Sprites, tilemaps, physics, camera.

Frontend
2674

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

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

better-icons

by better-auth

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search u003cqueryu003e` to find icons, `better-icons get u003cidu003e` to get SVG. Also available as MCP server for AI agents.

Frontend
2037

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

google-official-seo-guide

by littleben

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

Frontend
101196