Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
React developers frequently encounter UI bugs where falsy values like zero or NaN appear on the screen during conditional rendering. This happens because the logical AND operator returns the left-hand operand if it evaluates to false, causing the browser to render the literal number zero inside the DOM. By adopting explicit ternary operators instead of shorthand logical expressions, you force the component to return null rather than an unintended value. This practice ensures your UI remains clean, prevents layout shifts caused by unexpected text content, and removes ambiguity in your component tree. While the shorthand approach is tempting for brevity, explicit checks make your rendering logic predictable and easier to debug, ensuring that only the desired JSX fragments actually enter the output stream when a condition fails.
When to Use This Skill
- •Rendering numeric counters that may start at zero
- •Displaying lists that might be empty but not null
- •Showing status badges based on calculated integer values
- •Conditional insertion of components into layout containers
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Refactor this to avoid rendering zero
- “Fix accidental numeric rendering in my component
- “Use explicit ternary for this conditional rendering
- “Replace logical AND with ternary in this file
- “Clean up my conditional render statements
What this skill does
- •Prevents numeric falsy values from leaking into the DOM
- •Forces explicit null return values for conditional slots
- •Standardizes component output patterns for better consistency
- •Eliminates unnecessary text nodes in the generated HTML
- •Increases readability for junior developers and automated linters
When not to use it
- ✕When the condition is guaranteed to be a boolean
- ✕When simple boolean toggles are sufficient for UI state
Example workflow
- Identify a component that renders numeric data conditionally
- Test the component with a value of zero
- Observe the undesired text node in the browser
- Replace the && operator with a ternary condition
- Verify that the DOM is now empty when the value is zero
Prerequisites
- –Basic knowledge of React JSX syntax
- –Understanding of JavaScript truthy and falsy values
Pitfalls & limitations
- !Overusing ternaries for simple booleans where AND is acceptable
- !Nesting multiple ternaries which can decrease code readability
- !Forgetting to return null in the else branch of the ternary
FAQ
How it compares
While manual debugging requires you to spot the bug in the browser, this skill systematically prevents the issue at the architectural level. Generic prompts often ignore numeric edge cases, whereas this approach enforces explicit handling of all data states.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Use explicit ternary operators (
? :) instead of && for conditional rendering when the condition can be 0, NaN, or other falsy values that render.**Incorrect (renders "0" when count is 0):**
function Badge({ count }: { count: number }) {
return (
<div>
{count && <span className="badge">{count}</span>}
</div>
)
}
// When count = 0, renders: <div>0</div>
// When count = 5, renders: <div><span class="badge">5</span></div>**Correct (renders nothing when count is 0):**
function Badge({ count }: { count: number }) {
return (
<div>
{count > 0 ? <span className="badge">{count}</span> : null}
</div>
)
}
// When count = 0, renders: <div></div>
// When count = 5, renders: <div><span class="badge">5</span></div>How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rendering-conditional-render/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/rendering-conditional-render/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rendering-conditional-render/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rendering-conditional-render/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
