Skills
.Work. You
Rest

use-design-system/Bubble

Community

Implement chat bubbles with ease.

Design & Creative#messaging#react#design system#chat#ui component#bubble
Authortokijh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill simplifies the implementation of chat and message bubble UI components, handling alignment, background colors, and timestamps automatically.

Core Features & Use Cases

  • Automatic Alignment: Bubbles align left (grey for received) or right (blue for sent) based on the background prop.
  • Tail and Timestamp Support: Optionally display a tail for the bubble and a timestamp below it.
  • Use Case: Quickly build a real-time chat interface where messages are correctly displayed for both the sender and receiver, including timestamps for context.

Quick Start

Render a received message bubble with the text "Hello there!" and a timestamp of "10:00 AM".

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: use-design-system/Bubble
Download link: https://github.com/tokijh/minapp/archive/main.zip#use-design-system-bubble

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.