Imported from javimosch/open-claw-skills (skills/kleberbaum/tsx/SKILL.md). Install upstream with npx skills add javimosch/open-claw-skills --skill tsx. Copyright stays with the author.

What is TSX?

Name: tsx
Author: javimosch

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

{ "ocm": "1", "id": "javimosch-open-claw-skills-tsx", "kind": "skill", "name": "tsx", "description": "TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.", "publisher": "javimosch", "version": "1.0.0", "capabilities": { "domains": [ "coding" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/javimosch/open-claw-skills", "path": "skills/kleberbaum/tsx/SKILL.md", "ref": "f9d3fe7cf9ac8f1ea63a0d96e98e1f510a3814db", "url": "https://github.com/javimosch/open-claw-skills/blob/f9d3fe7cf9ac8f1ea63a0d96e98e1f510a3814db/skills/kleberbaum/tsx/SKILL.md", "key": "javimosch/open-claw-skills/skills/kleberbaum/tsx/SKILL.md" } }, "instructions": "# What is TSX?\n\nTSX 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.\n\n## Component Workflow\n\n1. Scaffold a new component with `scripts/component-gen.sh --scaffold <Name>`\n2. Define props in the generated types file\n3. Run Storybook to visualize variants with `scripts/component-gen.sh --info`\n4. List existing components with `scripts/component-gen.sh --list`\n\n## Available Commands\n\n| Command | Args | Purpose |\n|---------|------|---------|\n| component-gen.sh | `", "cost": { "context_tokens": 258 } }

tsx

About

What is TSX?

Component Workflow

Available Commands

Real-World Example

Use it

Manifest

Reviews