Toolverse
All skills
Frontend

opik-frontend

by comet-ml

React frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.

Installation

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

Installation

Quick info

Author
comet-ml
Category
Frontend
Views
27
GitHub repo

About this skill

React frontend patterns for Opik. Use when working in apps/opik-frontend, on components, state, or data fetching.

How to use

  1. Zainstaluj skill w swoim środowisku agenta, wskazując repozytorium comet-ml/opik i ścieżkę .agents/skills/opik-frontend. 2. Gdy pracujesz nad komponentami w apps/opik-frontend, konsultuj architekturę routingu (TanStack Router z routingiem plikowym) i data fetchingu (TanStack Query zamiast raw fetch w useEffect). 3. Zarządzaj stanem globalnym za pomocą Zustand z selektorami specifycznymi (unikaj wybierania całego store'a), a stanem lokalnym React state dla inputów formularzy i toggleów UI. 4. Buduj komponenty z shadcn/ui i Radix UI, używając React Hook Form do formularzy i Zod do walidacji. 5. Pamiętaj o warstwowej architekturze (ui → shared → pages-shared → pages bez zależności cyklicznych) i uruchom npm run deps:validate po zmianach importów. 6. Stosuj memoizację (useMemo, useCallback) tylko dla złożonych obliczeń i funkcji przekazywanych dzieciom – nie memoizuj prostych wartości czy prymitywów.

Related skills

2d-games

by davila7

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

Frontend
2674

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

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

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

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

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