Toolverse
All skills
Frontend

epic-routing

by epicweb-dev

Guide on routing with React Router and react-router-auto-routes for Epic Stack

Installation

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

Installation

Quick info

Author
epicweb-dev
Category
Frontend
Views
1
GitHub repo

About this skill

Guide on routing with React Router and react-router-auto-routes for Epic Stack

How to use

  1. Zapoznaj się z konwencją plików Epic Stack: trasy umieszczaj w katalogu app/routes/, gdzie nazwa pliku określa ścieżkę URL (np. app/routes/users/$username.tsx tworzy trasę /users/:username).

  2. Utwórz nową trasę, dodając plik TypeScript w odpowiednim miejscu w app/routes/. Zacznij od najprostszej struktury — unikaj zagnieżdżonych tras, jeśli nie masz konkretnego powodu, aby ich używać.

  3. Zdefiniuj funkcję loader w pliku trasy, aby pobierać dane z serwera. Funkcja loader otrzymuje parametry URL i zwraca dane, które będą dostępne w komponencie.

  4. Eksportuj domyślny komponent React, który wyświetla dane z loadera. Komponent otrzymuje loaderData jako prop i renderuje interfejs użytkownika.

  5. Jeśli potrzebujesz obsługi formularzy lub mutacji danych, dodaj funkcję action do tej samej trasy. Action obsługuje żądania POST, PUT i DELETE.

  6. Implementuj zagnieżdżone layouty tylko wtedy, gdy rzeczywiście potrzebujesz wspólnego interfejsu dla grupy tras — na przykład gdy masz podstrony użytkownika (notatki, ustawienia) z wspólnym nagłówkiem.

Related skills

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

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

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

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

2d-games

by davila7

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

Frontend
2674

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209