Toolverse
All skills
Frontend

solidjs-patterns

by different-ai

SolidJS reactivity + UI state patterns for OpenWork

Installation

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

Installation

Quick info

Author
different-ai
Category
Frontend
Views
2
GitHub repo

About this skill

SolidJS reactivity + UI state patterns for OpenWork

How to use

  1. Zainstaluj skill w swoim projekcie OpenWork, dodając referencję do solidjs-patterns w konfiguracji agenta lub MCP servera.
  2. Przeczytaj sekcję "Core rules" aby zrozumieć cztery główne zasady: preferuj sygnały granularne, zakreślaj stany asynchroniczne, derywuj UI state przez createMemo(), unikaj mutacji wartości w sygnałach.
  3. Dla każdej asynchronicznej akcji (np. wysyłanie formularza, pobieranie danych) utwórz dedykowany sygnał pending zamiast polegać na globalnym busy() — to zapobiega blokowaniu niezwiązanych przycisków interfejsu.
  4. Jeśli czytasz sygnały wewnątrz funkcji asynchronicznej i potrzebujesz stabilnych wartości, zrób snapshot sygnału na początku funkcji (np. const requestID = request().id) zanim wykonasz operację asynchroniczną.
  5. Do obliczania stanów UI (np. czy przycisk powinien być wyłączony) użyj createMemo() zamiast ręcznego duplikowania zmiennych boolowskich — to zapewnia reaktywność bez błędów.
  6. Przy aktualizacji list lub obiektów przechowywanych w sygnałach zawsze twórz nowe wartości zamiast mutować istniejące — użyj setter callbacków do derywowanych aktualizacji.

Related skills

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Frontend
23124

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

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

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

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