Skills
.Work. You
Rest

optimize-conditional-rendering-activity

Community

Standardize conditional rendering with Activity.

Software Engineering#react#tabs#modals#activity#conditional rendering#ui patterns
Authornayukata
Version1.0.0
Installs0

System Documentation

What problem does it solve?

All conditional rendering should use the Activity component to manage visibility and preserve component state across UI transitions.

Core Features & Use Cases

  • Centralized visibility control: wrap components with Activity to toggle between visible and hidden modes without unmounting.
  • Support for common UI patterns: tabs, modals, show/hide panels, and API response states (loading, error, empty, data).
  • Improved accessibility and performance: avoids frequent re-mounts and preserves scroll positions and form data across visibility toggles.

Quick Start

Wrap the target component with Activity and set mode based on the condition to control visibility without unmounting.

Dependency Matrix

Required Modules

None required

Components

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: optimize-conditional-rendering-activity
Download link: https://github.com/nayukata/notify-patch-notes/archive/main.zip#optimize-conditional-rendering-activity

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.