# Tsx

> TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.

- Skill: `modbender/tsx` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add modbender/tsx`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modbender/tsx/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: modbender (https://skillmd.com/u/modbender)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/modbender/tsx

---


# 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

1. Scaffold a new component with `scripts/component-gen.sh --scaffold <Name>`
2. Define props in the generated types file
3. Run Storybook to visualize variants with `scripts/component-gen.sh --info`
4. 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

```bash
# 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
```