UI Skillbook
2

Bubble

The surface for a chat message's text, with variants for sender, assistant replies and errors.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-bubble and follow the Siteplane Bubble skill it prints for this task.

Paste this into your agent.

Bubble draws the coloured or bordered shape around message text and sizes it to its content. A ghost variant drops the surface for assistant answers and rich content like lists and code.

Install

bashnpx shadcn@4.18.0 add @siteplane/bubble

Import it from @/siteplane/components/bubble. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Message: Pick Message to arrange the turn around the bubble, with avatar and actions.
  • vs Card: Pick Card for content blocks outside a conversation.

Rules

  • Compose Bubble with a BubbleContent that holds the text.
  • Choose variant by sender: muted for the person in an AI chat, ghost for assistant answers, default or tinted for your own messages between people, destructive for failures.
  • Set align to match the surrounding Message.
  • Put links or buttons inside the bubble or in the Message footer, since the bubble itself is not interactive.
  • Say what happened in the text, not through colour alone.

Reference

  • Bubble docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Chat & AI. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-bubble

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Banner Designby nextlevelbuilder

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

VisualExternalGitHub stars: 142.5K

Beautiful Shadowsby MengTo

Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.

VisualExternalGitHub stars: 7.1K

Bencium Innovative Ux Designerby bencium

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

VisualExternalGitHub stars: 470

Back to Siteplane UI