playbooks

home / skills / opentiny / agent-skills / tiny-robot-skill

tiny-robot-skill skill

/skills/tiny-robot-skill

This skill helps you generate compliant TinyRobot Vue components and implementation guidance by consulting docs, demos, and rules to ensure fidelity.

npx playbooks add skill opentiny/agent-skills --skill tiny-robot-skill

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
1.8 KB
---
name: tiny-robot-skill
description: TinyRobot component library **code generation** and **implementation guidance**. Use when analyzing, planning, or generating TinyRobot (AI chat UI) components. This skill provides API constraints, doc/example lookup flow, and code conventions.
license: MIT
metadata:
  author: opentiny
  version: '1.0.0'
---

# TinyRobot Component Library Assistant

This skill provides TinyRobot component library resources: component index, docs, and demo code, to help **generate compliant code quickly**.

## When to use

- Developing with TinyRobot component library (AI chat UI components)
- Configuring project theme and other setup
- Looking up component docs and demo code
- Writing code that follows TinyRobot best practices

## Directory structure

```
./themeConfig.ts - Sidebar/menu index from source (sharedSidebarItems = guide + components + tools)
./src/           - Markdown docs: components (src/components/), guide (src/guide/), tools (src/tools/), examples, migration
./demos/         - Demo source code per component (from source docs/demos)
./rules/         - Lookup and usage rules
```

## How to use

Follow the rule docs for the task:

| Rule document                                    | Use case                                                       |
| ------------------------------------------------- | -------------------------------------------------------------- |
| [project-setting](rules/project-setting.md)       | Install TinyRobot, import components, theme and project setup  |
| [component-use](rules/component-use.md)           | Find component docs and demo code                               |

## Constraints

- Follow project and component API docs strictly
- Do not guess TinyRobot usage from other libraries
- Look up in order: component name → API/docs → demo code

Overview

This skill is a TinyRobot component library assistant that accelerates code generation and implementation guidance for TinyRobot (AI chat UI) components. It supplies a component index, documentation lookup flow, and demo code to produce compliant, production-ready Vue components. Use it to ensure generated code follows TinyRobot APIs and project conventions.

How this skill works

The skill inspects the component name and follows a strict lookup order: component API/docs first, then demo code. It references project-setting and component-use rules to provide installation, theme configuration, and usage examples. Outputs adhere to the library constraints and do not infer behavior from other UI libraries.

When to use it

  • Building or scaffolding TinyRobot chat UI components in Vue
  • Configuring TinyRobot project theme, imports, and global setup
  • Finding component API details and props/events documentation
  • Copying or adapting demo code for real implementations
  • Validating generated code against TinyRobot conventions and rules

Best practices

  • Always follow the project-setting rules for installation and global theme configuration
  • Lookup component docs and demo code in order: API/docs → demos → examples before coding
  • Use demo code as canonical examples; adapt minimally to your project structure
  • Keep generated components constrained to TinyRobot APIs; avoid importing patterns from other libraries
  • Name and structure files consistent with the library directory layout (components, guide, demos)

Example use cases

  • Generate a Vue chat window component using TinyRobot ChatContainer and message components with correct props and events
  • Provide step-by-step setup: install package, configure themeConfig.ts, and register components globally
  • Translate a demo from the demos directory into a project-ready single-file component with proper imports
  • Audit a proposed component implementation and correct API misuse or missing props and events
  • Create small example pages that demonstrate component combinations using the library's recommended patterns

FAQ

What lookup order should I follow when generating code?

Always search by component name, then read the API/docs, and finally consult the demo code for usage patterns.

Can I apply patterns from other Vue UI libraries?

No. Do not assume behaviors from other libraries. Stick strictly to TinyRobot API and demo code to avoid incompatibilities.