Stat Card and Interactive Components

Official

Streamline design and interactivity with stat cards and ConfirmDialogs.

Authorbytetalent
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill unit addresses the design and interactivity challenges of creating effective stat cards and implementing ConfirmDialogs and AIProgressPanels, enhancing user experience and workflow efficiency.

Core Features & Use Cases

  • Stat Card Best Practices: Defines the anatomy of stat cards for clear and effective communication.
  • ConfirmDialog Implementation: Provides guidance on using ConfirmDialogs for non-trivial actions, ensuring informed decisions.
  • AIProgressPanel Integration: Offers best practices for AIProgressPanels to manage long-running AI tasks.
  • Auto-trigger Generation: Automatically triggers AI generation on mount for phase pages, improving user engagement.
  • Phase Refetch on Focus: Ensures data consistency on shared phase pages by refetching on focus or visibility change.

Quick Start

Implement the stat card and interactive components design patterns for your application by referencing the guidelines provided in this Skill unit.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: Stat Card and Interactive Components
Download link: https://github.com/bytetalent/docs/archive/main.zip#stat-card-and-interactive-components

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 620,000+ vetted skills library on demand.