tiny-robot-skill

Guides TinyRobot Vue AI chat UI implementation, setup, and code generation. Use when the user mentions TinyRobot, OpenTiny TinyRobot, Bubble, Sender, Prompts, chat container, message list, conversation tools, or asks to build chat interfaces with TinyRobot components.

opentiny/agent-skills32 installsMITSynced Aug 22

Works with

Claude CodeCursorCodex CLIGitHub CopilotGemini CLI
---
name: tiny-robot-skill
description: Guides TinyRobot Vue AI chat UI implementation, setup, and code generation. Use when the user mentions TinyRobot, OpenTiny TinyRobot, Bubble, Sender, Prompts, chat container, message list, conversation tools, or asks to build chat interfaces with TinyRobot components.
license: MIT
---

# TinyRobot Component Library Assistant

Use this skill to produce accurate TinyRobot guidance and code with the smallest necessary context.

TinyRobot is a Vue-oriented component library for AI chat interfaces.

## When to use this skill

Use this skill when the user:

- explicitly mentions TinyRobot or OpenTiny TinyRobot
- asks about `Bubble`, `Sender`, `Prompts`, chat containers, or similar TinyRobot components
- asks for TinyRobot component usage or examples
- wants to build an AI chat UI with TinyRobot
- needs TinyRobot setup, import, or theme guidance
- asks about TinyRobot message, conversation, or AI request integration

Example requests:

- "Create a chat UI using TinyRobot"
- "How do I use the Bubble component?"
- "Show a Sender example"
- "How do I configure TinyRobot theme?"
- "How should I manage conversation state with TinyRobot?"

## Quick Routing

Start by classifying the request, then read only the relevant rule file.

| Request type                               | Read first                 | Use for                                                                |
| ------------------------------------------ | -------------------------- | ---------------------------------------------------------------------- |
| Component usage or page composition        | `rules/component-use.md`   | Component lookup, composition, demos, missing component handling       |
| Project setup or theme configuration       | `rules/project-setting.md` | Installation, integration, theme, adapting docs setup to user projects |
| Code generation                            | `rules/code-generation.md` | Output style, Vue SFC conventions, simplicity, comment language        |
| Message, conversation, or AI request logic | `rules/kit-use.md`         | Safe tool usage, state separation, API uncertainty handling            |

For most implementation tasks, read `rules/code-generation.md` after the task-specific rule file.

## Resources in This Skill

This skill is organized around these resource layers:

- `components/` for component documentation
- `demos/` for working component demos
- `examples/` for full page or multi-component usage
- `guide/` for setup and configuration guidance
- `tools/` for message, conversation, and helper utilities
- `migration/` for version migration notes when relevant
- `rules/component-use.md`
- `rules/project-setting.md`
- `rules/code-generation.md`
- `rules/kit-use.md`

Use the smallest relevant layer first, then expand only when the task needs more context.

More Design Systems skills

stitch-design-taste

leonxlnx/taste-skill

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

265.6k

figma

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

101.8k

image

coreyhaines31/marketingskills

When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.

62.9k

← All Design Systems skills

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY