Skill

/thesys-generative-ui

> Generate, modify, and style React components from natural language using the Thesys SDK. Guides schema-driven UI generation, theme customisation, tool calling integration, and deployment to Vite, Next.js, or Cloudflare Workers. Use when the user says "generate UI", "create a

One skill from claude-skills.

shell

$ npx -y skills add secondsky/claude-skills --skill thesys-generative-ui --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/thesys-generative-ui

Context preview

The summary Claude sees to decide when to auto-load this skill.

> Generate, modify, and style React components from natural language using the Thesys SDK. Guides schema-driven UI generation, theme customisation, tool calling integration, and deployment to Vite, Next.js, or Cloudflare Workers. Use when the user says "generate UI", "create a

Stats

Stars194

Forks29

LanguageTypeScript

LicenseMIT

Ships with claude-skills

SKILL.md

thesys-generative-ui.SKILL.md

---
name: thesys-generative-ui
description: >-
  >
    Generate, modify, and style React components from natural language using the
    Thesys SDK. Guides schema-driven UI generation, theme customisation, tool
    calling integration, and deployment to Vite, Next.js, or Cloudflare Workers.
    Use when the user says "generate UI", "create a component", "build an
    interface", "Thesys", "generative UI", or asks to turn a description into a
    React component.
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