Tsx OpenClaw Plugin & Skill | ClawHub
Looking to integrate Tsx into your AI workflows? This free OpenClaw plugin from ClawHub helps you automate web & frontend development tasks instantly, without having to write custom tools from scratch.
What this skill does
TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.
Install
ClawHub CLI
openclaw skills install @kleberbaum/tsxNode.js (npx)
npx clawhub@latest install tsxFull SKILL.md
Open originalMetadata table.
| name | version | description | user invocable |
|---|---|---|---|
| tsx | 0.1.0 | TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs. | true |
SKILL.md content below is scrollable.
What is TSX?
TSX is the TypeScript component toolkit by Netsnek e.U. It enables rapid development of React components with type-safe props, Storybook integration, and automatic component documentation.
Component Workflow
- Scaffold a new component with
scripts/component-gen.sh --scaffold <Name> - Define props in the generated types file
- Run Storybook to visualize variants with
scripts/component-gen.sh --info - List existing components with
scripts/component-gen.sh --list
Available Commands
| Command | Args | Purpose |
|---|---|---|
| component-gen.sh | --scaffold <Name> |
Create component files, types, and Story |
| component-gen.sh | --list |
List all components in the project |
| component-gen.sh | --info |
Show Storybook integration details |
Real-World Example
# Create a new Button component
./scripts/component-gen.sh --scaffold Button
# List available components
./scripts/component-gen.sh --list
# Get Storybook info
./scripts/component-gen.sh --info
ClawHub Registry URL: https://clawhub.ai/kleberbaum/skills/tsx