Agent 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 component", "build an interface", "Thesys", "generative UI", or asks to turn a description into a React component.

View SKILL.md on GitHub Repository
Stars 109
Forks 14

Install this agent skill to your Project

npx add-skill https://github.com/secondsky/claude-skills/tree/main/plugins/thesys-generative-ui/skills/thesys-generative-ui

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

secondsky/claude-skills

skill-name

[TODO: Write comprehensive description in third-person. Start with "This skill provides..." or "This skill should be used when..."] [TODO: Add "Use when" scenarios - specific situations where Claude should use this skill] [TODO: Add keywords - technologies, use cases, error messages that should trigger this skill]

109 14
Explore
secondsky/claude-skills

websocket-implementation

Implements real-time WebSocket communication with connection management, room-based messaging, and horizontal scaling. Use when building chat systems, live notifications, collaborative tools, or real-time dashboards.

109 14
Explore
secondsky/claude-skills

ai-sdk-ui

109 14
Explore
secondsky/claude-skills

bun-nextjs

This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.

109 14
Explore
secondsky/claude-skills

bun-sqlite

Use for bun:sqlite, SQLite operations, prepared statements, transactions, and queries.

109 14
Explore
secondsky/claude-skills

bun-sveltekit

Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs

109 14
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results