Setup & Installation
openclaw skills install @kleberbaum/tsx
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
npx clawhub install tsx
What This Skill Does
TSX is a TypeScript component toolkit by Netsnek e.U. for scaffolding React components with type-safe props, Storybook integration, and auto-generated documentation. It provides shell scripts to create, list, and inspect components.
Combining scaffolding, type generation, and Storybook wiring into a single script reduces the manual steps typically needed when setting up a new React component.
When to use it
- Scaffold a new React component with boilerplate in one command
- List all components in a project to audit the component library
- Check Storybook integration status before running visual tests
- Generate type files alongside component files to enforce prop contracts
- Bootstrap a component with its Story file for immediate visual development
Example Workflow
Here's how your AI assistant might use this skill in practice.
INPUT
User asks: create a new Button component
AGENT
- 1Run `./scripts/component-gen.sh --scaffold Button` to generate component files
- 2Review the generated types file and define the Button props
- 3Run `./scripts/component-gen.sh --info` to confirm Storybook integration details
- 4Open Storybook to visualize the Button component variants
OUTPUT
A Button component with a types file and Story file ready for development