home / skills / secondsky / claude-skills / thesys-generative-ui

thesys-generative-ui skill

unsafe

/plugins/thesys-generative-ui/skills/thesys-generative-ui

This skill helps you generate production-ready React components from natural language prompts using a schema-driven Thesys UI, accelerating frontend

npx playbooks add skill secondsky/claude-skills --skill thesys-generative-ui

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

Files (31)

SKILL.md

2.1 KB

---
name: thesys-generative-ui
description: AI-powered generative UI with Thesys - create React components from natural language.
license: MIT
---

# Thesys Generative UI

**Last Updated**: 2025-11-10

## Quick Start

```typescript
import { generateUI } from 'thesys';

const ui = await generateUI({
  prompt: 'Create a user profile card with avatar, name, and email',
  schema: {
    type: 'component',
    props: ['name', 'email', 'avatar']
  }
});

export default function Profile() {
  return <div>{ui}</div>;
}
```

## Core Features

- **Natural Language**: Describe UI in plain English
- **Schema-Driven**: Type-safe component generation
- **React Components**: Generate production-ready components
- **AI-Powered**: Uses LLMs for intelligent design

## Example

```typescript
const form = await generateUI({
  prompt: 'Create a contact form with name, email, and message fields',
  theme: 'modern'
});
```

## Resources

### Core Documentation
- `references/what-is-thesys.md` - What is TheSys C1, success metrics, getting started
- `references/use-cases-examples.md` - When to use, 12 errors prevented, all templates catalog
- `references/tool-calling.md` - Complete tool calling guide with Zod schemas
- `references/integration-guide.md` - Complete setup for Vite, Next.js, Cloudflare Workers

### Additional References
- `references/component-api.md` - Complete component prop reference
- `references/ai-provider-setup.md` - OpenAI, Anthropic, Cloudflare Workers AI setup
- `references/tool-calling-guide.md` - Tool calling patterns
- `references/theme-customization.md` - Theme system deep dive
- `references/common-errors.md` - Expanded error catalog

### Templates (15+ files)
- **Vite + React**: `basic-chat.tsx`, `custom-component.tsx`, `tool-calling.tsx`, `theme-dark-mode.tsx`
- **Next.js**: `app/page.tsx`, `app/api/chat/route.ts`, `tool-calling-route.ts`
- **Cloudflare Workers**: `worker-backend.ts`, `frontend-setup.tsx`
- **Utilities**: `theme-config.ts`, `tool-schemas.ts`, `streaming-utils.ts`

**Official Docs**: https://docs.thesys.dev | **Playground**: https://console.thesys.dev/playground

Overview

This skill provides AI-powered generative UI with Thesys to create production-ready React components from plain English. It combines natural-language prompts, schema-driven type safety, and theming to output clean JSX and TypeScript-ready components. The result is an accelerated frontend workflow for prototypes and production UI elements.

How this skill works

Send a prompt describing the desired UI along with an optional component schema and theme. The skill uses an LLM to interpret the prompt, apply the schema (props and types), and produce React + Tailwind-ready component code. Outputs are type-safe components you can drop into Vite, Next.js, or Cloudflare Worker frontends and customize further.

When to use it

Rapidly prototype UI elements from product specs or design notes
Generate type-safe React components when working with dynamic data schemas
Create consistent components that follow a theme system (Tailwind v4 supported)
Accelerate developer handoff by producing ready-to-use JSX and prop definitions
Integrate AI-assisted component generation into CLI-driven workflows

Best practices

Provide a clear, concise prompt that lists structure, fields, and any interaction behavior
Include a schema object (props and types) to ensure type safety and predictable outputs
Specify a theme or style guide when consistency across components is required
Validate and review generated code before production use, focusing on accessibility and security
Use templates for recurring patterns and extend generated components rather than editing core generation logic directly

Example use cases

Create a user profile card: avatar, name, email with prop types and responsive layout
Generate a contact form with validation-ready fields and modern theming
Build a dashboard widget component for real-time metrics with streaming updates
Produce a set of themed UI primitives (buttons, inputs, cards) to seed a design system
Integrate component generation into a CLI or CI flow to auto-generate boilerplate for new features

FAQ

What inputs does the generator accept?

A natural-language prompt plus optional schema (component type and props) and theme settings. Including a schema yields stronger type safety.

Which frameworks and tooling are supported?

Generated code targets React with Tailwind v4 and TypeScript. Outputs are compatible with Vite, Next.js, and Cloudflare Worker frontends.