tiny-robot-skill
Scannednpx machina-cli add skill opentiny/agent-skills/tiny-robot-skill --openclawTinyRobot 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 | Install TinyRobot, import components, theme and project setup |
| component-use | 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
Source
git clone https://github.com/opentiny/agent-skills/blob/main/skills/tiny-robot-skill/SKILL.mdView on GitHub Overview
The TinyRobot Component Library Assistant provides resources to generate compliant TinyRobot UI code. It helps you analyze, plan, or generate TinyRobot AI chat UI components while enforcing API constraints, doc/example lookup flow, and consistent coding conventions.
How This Skill Works
It operates by strictly looking up a component name, then the API/docs, and finally demo code to avoid guessing. It leverages the repository structure (themeConfig.ts, src/, demos/, rules/) and guideline documents (project-setting.md, component-use.md) to produce implementation-ready code that adheres to TinyRobot API constraints and conventions.
When to Use It
- Developing TinyRobot AI chat UI components
- Configuring project theme and setup (themeConfig.ts and project setup)
- Looking up component docs and demo code
- Writing code that follows TinyRobot best practices
- Analyzing or planning TinyRobot component usage before implementation
Quick Start
- Step 1: Install TinyRobot and configure your project per the project-setting rule
- Step 2: Look up component docs and demo code using the component-use rule
- Step 3: Generate or implement code that adheres to API constraints and TinyRobot conventions
Best Practices
- Follow API/docs strictly; do not guess TinyRobot usage from other libraries
- Do not guess TinyRobot usage; rely on official docs and demos
- Look up in order: component name → API/docs → demo code
- Consult rules (project-setting, component-use) for setup and examples
- Keep code aligned with themeConfig.ts and established TinyRobot conventions
Example Use Cases
- Generating a chat input component following TinyRobot guidelines
- Implementing a MessageList component using official docs and demos
- Configuring a UI theme for TinyRobot components via themeConfig.ts
- Reusing a component's demo code as a reference for a new screen
- Setting up a new project with TinyRobot using the project-setting rule
