Toolverse
All skills

rendering-conditional-render

by TheOrcDev

Use explicit ternary operators instead of u0026u0026 for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.

Installation

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

Installation

Quick info

Author
TheOrcDev
Category
Frontend

About this skill

Use explicit ternary operators instead of u0026u0026 for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.

How to use

  1. Zidentyfikuj miejsca w kodzie, gdzie używasz operatora && do renderowania warunkowego, zwłaszcza gdy warunek może być wartością numeryczną (0, NaN) lub inną wartością falsy, która powinna być traktowana jako "fałsz" w logice biznesowej.
  2. Zastąp wzorzec {warunek && } na {warunek ? : null}, gdzie warunek jest jawnym porównaniem (np. count > 0 zamiast count).
  3. W praktyce: jeśli masz komponent Badge, który wyświetla licznik, zmień {count && {count}} na {count > 0 ? {count} : null}, aby uniknąć wyświetlenia "0" na ekranie.
  4. Zastosuj tę zasadę do wszystkich komponentów, które renderują wartości numeryczne lub inne falsy values, które mogą być mylące dla użytkownika.
  5. Przetestuj komponenty z wartościami granicznymi (0, NaN, undefined, null), aby upewnić się, że renderowanie zachowuje się zgodnie z oczekiwaniami.

Related skills

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

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

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

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

google-official-seo-guide

by littleben

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

Frontend
101196

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