use-explicit-conditional-rendering
CommunityPrevent rendering of falsy values.
Software Engineering#frontend#react#javascript#ui development#conditional rendering#ternary operator
Authorihj04982
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill prevents unexpected rendering of falsy values like 0 or NaN in React components, ensuring a cleaner and more predictable UI.
Core Features & Use Cases
- Explicit Ternary Operator: Replaces
&&with? :for conditional rendering. - Handles Falsy Values: Correctly renders nothing when conditions evaluate to
0,NaN,null,undefined, orfalse. - Use Case: Ensure a badge counter doesn't display "0" when the count is zero, but shows the count when it's positive.
Quick Start
Use the use-explicit-conditional-rendering skill to refactor the Badge component to use explicit conditional rendering.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: use-explicit-conditional-rendering Download link: https://github.com/ihj04982/my-cursor-settings/archive/main.zip#use-explicit-conditional-rendering Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.