Toolverse
All skills
Frontend

react-web

by alinaqi

React web development with hooks, React Query, Zustand

Installation

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

Installation

Quick info

Author
alinaqi
Category
Frontend
Views
1
GitHub repo

About this skill

React web development with hooks, React Query, Zustand

How to use

  1. Załaduj skill razem z plikami base.md i typescript.md, aby uzyskać pełny kontekst TypeScript i podstawowy setup.

  2. Przed napisaniem komponentu utwórz plik testowy z rozszerzeniem .test.tsx — zdefiniuj tam wszystkie oczekiwane zachowania komponentu za pomocą React Testing Library (render, screen, fireEvent).

  3. Uruchom testy poleceniem npm test — powinny się nie powieść, bo kod implementacyjny jeszcze nie istnieje. To potwierdza, że test jest poprawnie napisany.

  4. Napisz minimalny kod komponentu w pliku .tsx, wystarczający do przejścia testów. Nie dodawaj funkcjonalności, którą testy nie wymagają.

  5. Ponownie uruchom testy — powinny przejść. Jeśli nie, popraw implementację, aż wszystkie testy będą zielone.

  6. Po zatwierdzeniu logiki dodaj style w pliku .module.css lub wybranym systemie stylowania. Testy logiki już gwarantują, że komponent działa prawidłowo.

Related skills

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

apple-reminders

by openclaw

Manage Apple Reminders via the `remindctl` CLI on macOS (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.

Frontend
2085

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

landing-page-guide-v2

by bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements

Frontend
3486

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Frontend
23124

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