How do I install the Robot Components skill?

Run npx skillmds@latest add tomevault-io/robot-components in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Robot Components safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Robot Components?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Robot Components free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Robot Components?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Robot Components by tomevault-io — Agent Skill

Name: Robot Components
Author: tomevault-io

File contents

Node Editor Expansion

You are helping expand the Node Editor Canvas component. The user wants to add or modify features.

User Request

$ARGUMENTS

Key Files

Main component: app/nodegrid/page.tsx (~4500 lines)
Global styles: app/globals.css
Sound effects: src/utils/SoundEffects.ts

Architecture

GridPlayground (line ~3600) - Main orchestrator
- State: floatingPanels, connections, connectionDrag, topPanelId, sliceTrail
FloatingPanel (line ~850) - Draggable/resizable panels
- Physics: velocity tracking, friction, bounce damping
- Features: resize from edges/corners, connection handles
DotGridCanvas (line ~2250) - Animated dot grid background
- Responds to panel positions and mouse movement
- Draws connection lines between panels
NoiseOverlay (line ~2050) - WebGL film grain effect

Design System (Tailwind neutral palette)

Use these colors with comments:

#fafafa /* neutral-50 */ - Primary text
#e5e5e5 /* neutral-200 */ - Headings
#a3a3a3 /* neutral-400 */ - Secondary text
#737373 /* neutral-500 */ - Muted text
#525252 /* neutral-600 */ - Subtle icons
#404040 /* neutral-700 */ - Borders
#262626 /* neutral-800 */ - Card backgrounds
#171717 /* neutral-900 */ - Page background
#2563eb /* blue-600 */ - Active/processing
#4ade80 /* green-400 */ - Success/completed

Guidelines

Use inline styles for layout in nodegrid - The nodegrid page has issues with some Tailwind layout classes (fixed, min-h-screen). Use inline style={{}} for position, display, and dimensions.
Use Tailwind color values - Always use colors from the palette above with comments
Test positioning - Verify new elements appear on screen
Maintain physics - Preserve the velocity/friction/bounce system
Sound feedback - Add sounds using soundEffects.playHoverSound() or playBounceSound()

Instructions

Read the relevant sections of app/nodegrid/page.tsx
Implement the requested feature
Follow existing patterns in the codebase
Test that changes don't break existing functionality
Suggest gradual implementation and fine tuning vs. multiple new features at once

Now implement the user's request.

Source: dashrobotco/robot-components — distributed by TomeVault.

---name: robot-componentsdescription: Add features to the Node Editor Canvas - visual effects, interactions, physics, keyboard shortcuts Use when this capability is needed.---# Node Editor ExpansionYou are helping expand the Node Editor Canvas component. The user wants to add or modify features.## User Request$ARGUMENTS## Key Files- **Main component**: `app/nodegrid/page.tsx` (~4500 lines)- **Global styles**: `app/globals.css`- **Sound effects**: `src/utils/SoundEffects.ts`## Architecture1. **GridPlayground** (line ~3600) - Main orchestrator - State: `floatingPanels`, `connections`, `connectionDrag`, `topPanelId`, `sliceTrail`2. **FloatingPanel** (line ~850) - Draggable/resizable panels - Physics: velocity tracking, friction, bounce damping - Features: resize from edges/corners, connection handles3. **DotGridCanvas** (line ~2250) - Animated dot grid background - Responds to panel positions and mouse movement - Draws connection lines between panels4. **NoiseOverlay** (line ~2050) - WebGL film grain effect## Design System (Tailwind neutral palette)Use these colors with comments:- `#fafafa` /* neutral-50 */ - Primary text- `#e5e5e5` /* neutral-200 */ - Headings- `#a3a3a3` /* neutral-400 */ - Secondary text- `#737373` /* neutral-500 */ - Muted text- `#525252` /* neutral-600 */ - Subtle icons- `#404040` /* neutral-700 */ - Borders- `#262626` /* neutral-800 */ - Card backgrounds- `#171717` /* neutral-900 */ - Page background- `#2563eb` /* blue-600 */ - Active/processing- `#4ade80` /* green-400 */ - Success/completed## Guidelines1. **Use inline styles for layout in nodegrid** - The nodegrid page has issues with some Tailwind layout classes (`fixed`, `min-h-screen`). Use inline `style={{}}` for position, display, and dimensions.2. **Use Tailwind color values** - Always use colors from the palette above with comments3. **Test positioning** - Verify new elements appear on screen4. **Maintain physics** - Preserve the velocity/friction/bounce system5. **Sound feedback** - Add sounds using `soundEffects.playHoverSound()` or `playBounceSound()`## Instructions1. Read the relevant sections of `app/nodegrid/page.tsx`2. Implement the requested feature3. Follow existing patterns in the codebase4. Test that changes don't break existing functionality5. Suggest gradual implementation and fine tuning vs. multiple new features at onceNow implement the user's request.---> Source: [dashrobotco/robot-components](https://github.com/dashrobotco/robot-components) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions

Robot Components