# Secondsky Claude Skills Thesys Generative UI

> Thesys Generative UI

- Skill: `tomevault-io/secondsky-claude-skills-thesys-generative-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/secondsky-claude-skills-thesys-generative-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/secondsky-claude-skills-thesys-generative-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/secondsky-claude-skills-thesys-generative-ui

---


# 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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/secondsky) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->