rendering-conditional-render
Replaces '&&' with ternary operators for safer UI rendering. Prevents falsy values like 0 or NaN from appearing in the DOM.
Install
mkdir -p .claude/skills/rendering-conditional-render && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7258" && unzip -o skill.zip -d .claude/skills/rendering-conditional-render && rm skill.zipInstalls to .claude/skills/rendering-conditional-render
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.Key capabilities
- →Identify unsafe conditional rendering
- →Suggest ternary operator replacements
- →Prevent rendering of falsy values like 0 or NaN
How it works
The skill detects patterns where logical AND is used for UI rendering and replaces them with ternary operators to handle falsy values explicitly.
Inputs & outputs
When to use rendering-conditional-render
- →Fix UI rendering bugs
- →Refactor conditional components
- →Improve React rendering logic
About this skill
Use Explicit Conditional Rendering
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>
When not to use it
- →When using logical AND for non-rendering conditions
Limitations
- →Limited to conditional rendering patterns
How it compares
It prevents UI bugs caused by unexpected rendering of falsy values, which is a common issue with the standard logical AND approach.
Compared to similar skills
rendering-conditional-render side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| rendering-conditional-render (this skill) | 1 | 7mo | No flags | Beginner |
| react-modernization | 21 | 2mo | No flags | Advanced |
| writing-react-effects | 1 | 3mo | No flags | Intermediate |
| zustand | 113 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by TheOrcDev
View all by TheOrcDev →You might also like
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
react
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-testing
langgenius
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.