Toolverse
All skills
Frontend

frontend-patterns

by affaan-m

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Installation

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

Installation

Quick info

Author
affaan-m
Category
Frontend
Views
39
GitHub repo

About this skill

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

How to use

  1. Sklonuj repozytorium lub pobierz folder skills/frontend-patterns z gałęzi głównej. Zawiera on kompletną dokumentację wzorców z przykładami TypeScript.

  2. Przejrzyj sekcję Component Patterns, aby zrozumieć różnicę między kompozycją a dziedziczeniem. Przykład Card pokazuje, jak budować komponenty poprzez łączenie mniejszych, wielokrotnie używalnych części zamiast rozszerzania klas.

  3. Zapoznaj się ze wzorcem Compound Components, który demonstruje użycie React Context do zarządzania stanem między powiązanymi komponentami. Przykład Tabs pokazuje, jak tworzyć komponenty, które współpracują ze sobą bez konieczności przekazywania props'ów przez wiele poziomów.

  4. Zastosuj te wzorce w swoim projekcie React lub Next.js, dostosowując przykłady kodu do swoich potrzeb. Każdy wzorzec zawiera zarówno dobre praktyki (oznaczone ✅) jak i błędy do uniknięcia.

  5. Wróć do dokumentacji, gdy pracujesz nad optymalizacją wydajności lub zarządzaniem stanem — zawiera ona konkretne rozwiązania dla typowych wyzwań w aplikacjach frontendowych.

Related skills

2d-games

by davila7

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

Frontend
2674

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

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

keyword-research

by openclaw

Discovers high-value keywords with search intent analysis, difficulty assessment, and content opportunity mapping. Essential for starting any SEO or GEO content strategy.

Frontend
24138

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

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167