thesys-generative-ui

Name: thesys-generative-ui
Author: secondsky

github.com/secondskyDesign & UI240377 installsUpdated 5w ago

About thesys-generative-ui

A skill for creating React UI components from natural-language descriptions with Thesys. It uses schemas for typed component generation and includes integration, theme, and tool-calling references.

Key features

01Natural-language UI descriptions
02Schema-driven component generation
03Type-safe React components
04Theme customization guidance
05Tool-calling patterns
06Integration templates and references

Use cases

01Generating a profile card from a description
02Creating a contact form
03Building chat interfaces with templates
04Configuring tool calling for UI flows

Install

Copy the command and run it in a terminal.

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

After installing, type/thesys-generative-uiin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

ai-provider-setup.md

common-errors.md

component-api.md

error-catalog.md

integration-guide.md

tool-calling.md

use-cases-examples.md

what-is-thesys.md

scripts/

check-versions.sh

install-dependencies.sh

templates/

basic-usage.tsx

templates/cloudflare-workers/

frontend-setup.tsx

worker-backend.ts

wrangler.jsonc

templates/nextjs/

api-chat-route.ts

app-page.tsx

package.json

tool-calling-route.ts

templates/python-backend/

fastapi-chat.py

flask-chat.py

README.md

requirements.txt

templates/shared/

streaming-utils.ts

theme-config.ts

tool-schemas.ts

templates/vite-react/

basic-chat.tsx

custom-component.tsx

package.json

theme-dark-mode.tsx

tool-calling.tsx

Details

From the project README

Thesys Generative UI

Last Updated: 2025-11-10

Quick Start

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

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

Comments

Markdown supported