playbooks

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

qwik-component-generator skill

/qwik-component-generator

This skill generates complete Qwik TSX components with resumability and TypeScript, ready to use from a single prompt.

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

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

Files (2)
SKILL.md
611 B
---
name: qwik-component-generator
description: Generate Qwik components with resumability and TypeScript. Triggers on "create qwik component", "generate qwik file", "qwik component", "qwik city page".
---

# Qwik Component Generator

Generate Qwik components with resumability and TypeScript.

## Output Requirements

**File Output:** `*.tsx` component files
**Format:** Valid Qwik TSX
**Standards:** Qwik 1.x, TypeScript

## When Invoked

Immediately generate a complete Qwik component.

## Example Invocations

**Prompt:** "Create Qwik button component"
**Output:** Complete `Button.tsx` with Qwik patterns.

Overview

This skill generates complete Qwik components in TypeScript that follow Qwik 1.x patterns and resumability best practices. It outputs ready-to-use .tsx files suitable for Qwik projects and focuses on valid TSX structure, props typing, and event handling. Use triggers like "create qwik component" or "qwik city page" to produce a finished component file instantly.

How this skill works

When invoked, the skill creates a full .tsx component file using Qwik conventions: component() factory, Props typing, resumability-friendly patterns (no closed-over mutable state), and exported default components. It includes basic styling placeholders, accessible attributes, typed props, and optional server/client behavior hints when relevant. The result is a drop-in TSX file that compiles under Qwik 1.x with TypeScript.

When to use it

  • Scaffold a new Qwik UI component (buttons, inputs, cards) quickly.
  • Create Qwik City route pages or page components with correct export structure.
  • Produce resumability-safe components that avoid runtime serialization issues.
  • Generate components with typed props and sample usage examples.
  • Bootstrap a consistent component pattern for a Qwik codebase.

Best practices

  • Prefer primitive props and serializable data to ensure resumability.
  • Avoid closing over non-serializable values; pass functions or use signals appropriately.
  • Keep components focused and stateless where possible; delegate side effects to useClientEffect when needed.
  • Include clear prop types and default values for predictable behavior.
  • Provide minimal accessible markup (aria-labels, semantic elements) in generated components.

Example use cases

  • Create a reusable Button.tsx with typed onClick and loading state using Qwik signals.
  • Generate an AuthForm.tsx component scaffold with props for submit handlers and validation hooks.
  • Produce a Qwik City page file with route exports and serverData placeholders.
  • Scaffold a Card.tsx that accepts children, header and footer props for consistent layout.
  • Quickly produce small UI primitives (IconButton, Toggle, Badge) following resumability rules.

FAQ

What file format does this produce?

It outputs .tsx files containing valid Qwik + TypeScript component code.

Which Qwik version does it target?

Components are generated for Qwik 1.x and follow current resumability recommendations.