playbooks

home / skills / ehtbanton / claudeskillsrepo / solid-component-generator

solid-component-generator skill

/solid-component-generator

This skill generates complete SolidJS TSX components with TypeScript typings and reactive primitives for immediate use.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill solid-component-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
641 B
---
name: solid-component-generator
description: Generate SolidJS components with TypeScript and reactive primitives. Triggers on "create solid component", "generate solidjs component", "solid component", "solidjs file".
---

# SolidJS Component Generator

Generate SolidJS components with TypeScript and signals.

## Output Requirements

**File Output:** `*.tsx` component files
**Format:** Valid SolidJS TSX
**Standards:** SolidJS 1.8+, TypeScript

## When Invoked

Immediately generate a complete SolidJS component.

## Example Invocations

**Prompt:** "Create SolidJS button component"
**Output:** Complete `Button.tsx` with reactivity.

Overview

This skill generates ready-to-use SolidJS components in TypeScript with reactive primitives. It produces valid .tsx files that follow SolidJS 1.8+ and TypeScript conventions. Use simple triggers like "create solid component" or "generate solidjs component" to produce complete component source quickly.

How this skill works

When invoked, the skill generates a full TSX component file tailored to the requested component name and behavior. Output includes imports, reactive primitives (signals, memos, effects when appropriate), typed props, CSS class hooks or inline styles, and default exports. The component is formatted as a standalone .tsx file that can be dropped into a SolidJS project.

When to use it

  • Scaffolding a new SolidJS UI component with TypeScript and reactivity
  • Rapidly prototyping interactive components using signals and memos
  • Generating consistent component starters for team conventions
  • Converting design/requirements into a working SolidJS file
  • Learning SolidJS patterns by example

Best practices

  • Provide a clear component name and describe props and behaviors in the prompt
  • Specify whether to use CSS modules, Tailwind, or inline styles to match project style
  • Request accessibility features (aria labels, keyboard handling) when needed
  • Ask for examples of usage and basic tests if you need integration examples
  • Confirm TypeScript strictness level or prop types to fit your codebase

Example use cases

  • Create Button.tsx that accepts variant, disabled, and onClick with signal-driven loading state
  • Generate Modal.tsx with open/close signals, focus trap hints, and ARIA attributes
  • Produce InputField.tsx that exposes a value signal and validation memo
  • Scaffold ToggleSwitch.tsx with internal signal state and controlled prop support
  • Make List.tsx that maps an array prop into keyed children using For and createSignal

FAQ

What file type and standards does the skill produce?

It outputs .tsx files using SolidJS 1.8+ patterns and TypeScript types by default.

Can I control styling approach in the generated component?

Yes — include your preferred styling method (CSS module, Tailwind, inline) in the prompt and the output will follow it.