Rapidly scaffold and document React components with type-safe props and Storybook integration.
Install
mkdir -p .claude/skills/tsx && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11801" && unzip -o skill.zip -d .claude/skills/tsx && rm skill.zipInstalls to .claude/skills/tsx
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.Key capabilities
- →Scaffold new React components with `component-gen.sh --scaffold`
- →Generate type-safe props for React components
- →Integrate with Storybook for component visualization
- →List all components in the project with `component-gen.sh --list`
- →Show Storybook integration details with `component-gen.sh --info`
- →Automate component documentation
How it works
The skill uses `component-gen.sh` to scaffold new React components, including type files and Storybook integration. It also provides commands to list existing components and display Storybook details.
Inputs & outputs
When to use tsx
- →Scaffold a new React component
- →Visualize component variants in Storybook
- →List project component inventory
About this skill
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
When not to use it
- →When developing non-React components
- →When not using TypeScript
- →When the task is not related to component scaffolding or management
Limitations
- →Specific to TypeScript component toolkit by Netsnek e.U.
- →Relies on `scripts/component-gen.sh` commands
- →Designed for React components
How it compares
This skill automates the creation and management of React components with built-in type safety and Storybook integration, simplify development compared to manual setup.
Compared to similar skills
tsx side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tsx (this skill) | 0 | 2mo | Review | Beginner |
| new-component | 0 | 4mo | No flags | Beginner |
| zustand | 113 | 2mo | No flags | Intermediate |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by javimosch
View all by javimosch →You might also like
new-component
7sferry
Scaffold a new React component following project conventions
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
writing-registry-meta
siriwatknp
Use this skill when writing meta file for MUI Treasury registry.