Agent skill

Thesys Generative UI

by secondsky in secondsky/claude-skills

Generate, modify, and style React components from natural language using the Thesys SDK.

MITAuto-check passedFrontend & Design

Install Thesys Generative UI

skills CLI
$ npx skills add secondsky/claude-skills --skill thesys-generative-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install secondsky/claude-skills thesys-generative-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/secondsky/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/thesys-generative-ui/skills/thesys-generative-ui .claude/skills/thesys-generative-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
thesys-generative-ui
GitHub stars
227
Token cost
~614 tokens
SKILL.md length
124 words
Files
34 (incl. scripts, references)
Skills in repo
169
Repo updated
First seen
Licence
MIT

At a glance

Generate, modify, and style React components from natural language using the Thesys SDK.

  • The user says generate UI
  • SKILL.md covers Quick Start, Core Features, Example and Resources
  • Runs Shell and TypeScript scripts from its folder
  • Create a component

What it does

Thesys Generative UI is an agent skill from secondsky/claude-skills. 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.

Its SKILL.md is about 610 tokens, which your agent loads only when the skill is triggered. The skill folder holds 38 other files, including scripts and reference files (for example `references/ai-provider-setup.md`, `references/common-errors.md` and `references/component-api.md`).

It sits in Frontend & Design, covering React components and Structured output and tool calling. It works with Cloudflare Workers, Vite and Next.js. The repository describes itself as: Production-ready skills for Claude Code CLI - Cloudflare, React, Tailwind v4, and AI integrations. The licence is MIT.

When your agent uses it

  • The user says generate UI
  • Create a component
  • Build an interface
  • Asks to turn a description into a React component

Example prompts

  • “generate UI”
  • “create a component”
  • “build an interface”
  • “/thesys-generative-ui”

Requirements

  • Node.js
  • A Bash shell

What it can do on your machine

Read from SKILL.md and the folder at commit 8837836. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (Shell and TypeScript, from the files we listed), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.thesys.dev
    • console.thesys.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Thesys Generative UI loads about 614 tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 106 tokens; SKILL.md has 124 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~106
When it runs · the whole SKILL.md, loaded when a task matches
~614
With references · SKILL.md plus every file in references/, read only if the agent opens them
~18k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from secondsky/claude-skills at commit 8837836, republished under its MIT licence (© secondsky). 124 words, ~614 tokens.

Download SKILL.mdSave it as .claude/skills/thesys-generative-ui/SKILL.md (or your agent's skills folder). This skill also uses 33 other files; get the full folder from GitHub.
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
  • 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

© secondsky, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 33 other files (scripts, references) in plugins/thesys-generative-ui/skills/thesys-generative-ui of secondsky/claude-skills.

  • SKILL.md
  • references/ai-provider-setup.md
  • references/common-errors.md
  • references/component-api.md
  • references/error-catalog.md
  • references/integration-guide.md
  • references/tool-calling.md
  • references/use-cases-examples.md
  • references/what-is-thesys.md
  • scripts/check-versions.sh
  • scripts/install-dependencies.sh
  • templates/basic-usage.tsx
  • templates/cloudflare-workers/frontend-setup.tsx
  • templates/cloudflare-workers/worker-backend.ts
  • templates/cloudflare-workers/wrangler.jsonc
  • templates/nextjs/api-chat-route.ts
  • … and 18 more

Open the folder on GitHubat commit 8837836

Compare with similar skills

Thesys Generative UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Thesys Generative UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Thesys Generative UI this skillsecondsky/claude-skills227—~614Automated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Spotpatchhuanglvjing/spotpatch134—~998Automated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
Shadcn Tailwind UILiarMTTT/TavernWeave150—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes
  • Spotpatch

    huanglvjing/spotpatch

    为 React 项目建立从浏览器页面元素到精确 JSX/TSX 源码、结构化上下文与可审阅修改的 SpotPatch 工作流。用户提到 SpotPatch、截图沟通前端修改、页面元素定位源码、Vite 或 Next.js 接入、组件数据链路、结构化 Prompt、AI 补丁审阅、安装检查或故障排查时使用此技能。

    134 GitHub stars~998 tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed
  • React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    150 GitHub stars~1.7k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Doctype

    thedaviddias/Front-End-Checklist

    A skill your agent uses when applies to all HTML documents. An agent skill from thedaviddias/Front-End-Checklist.

    74k GitHub stars~831 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from secondsky/claude-skills

All 169 skills in this repo
  • Tanstack AI

    secondsky/claude-skills

    TanStack AI (alpha) provider-agnostic type-safe chat with streaming for OpenAI, Anthropic, Gemini, Ollama.

    227 GitHub starsUsed in 1 repo~3.6k tokens
    Auto-check: notes
  • Auto Animate

    secondsky/claude-skills

    AutoAnimate (@formkit/auto-animate) zero-config animations for React.

    227 GitHub stars~2.9k tokensUpdated 10 days ago
    Auto-check passed
  • Base UI React

    secondsky/claude-skills

    MUI Base UI unstyled React components with Floating UI. An agent skill from secondsky/claude-skills.

    227 GitHub stars~1.9k tokensUpdated 10 days ago
    Auto-check passed
  • Cloudflare Images

    secondsky/claude-skills

    This skill should be used when the user asks to "upload images to Cloudflare", "implement direct creator upload", "configure image transformations", "optimize WebP/AVIF", "create image variants"…

    227 GitHub stars~3.6k tokensUpdated 10 days ago
    Auto-check: notes
  • Cloudflare Nextjs

    secondsky/claude-skills

    Deploy Next.js to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare).

    227 GitHub stars~5.3k tokensUpdated 10 days ago
    Auto-check: notes
  • Cloudflare Sandbox

    secondsky/claude-skills

    Cloudflare Sandboxes SDK for secure code execution in Linux containers at edge.

    227 GitHub stars~4.5k tokensUpdated 10 days ago
    Auto-check passed

Questions about Thesys Generative UI

What does Thesys Generative UI do?

Generate, modify, and style React components from natural language using the Thesys SDK. Thesys Generative UI is an agent skill from secondsky/claude-skills. Generate, modify, and style React components from natural language using the Thesys SDK.

When should I use Thesys Generative UI?

Thesys Generative UI fits situations like: the user says generate UI; create a component; build an interface; asks to turn a description into a React component.

How do I install Thesys Generative UI in Claude Code?

Run `npx skills add secondsky/claude-skills --skill thesys-generative-ui -a claude-code`. Or copy the skill folder (plugins/thesys-generative-ui/skills/thesys-generative-ui in secondsky/claude-skills) into .claude/skills/thesys-generative-ui in your project. Claude Code loads it when a task matches its description.

How do I install Thesys Generative UI in Codex?

Run `npx skills add secondsky/claude-skills --skill thesys-generative-ui -a codex`. Or copy the skill folder (plugins/thesys-generative-ui/skills/thesys-generative-ui in secondsky/claude-skills) into .agents/skills/thesys-generative-ui in your project. Codex loads it when a task matches its description.

Can I use Thesys Generative UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add secondsky/claude-skills --skill thesys-generative-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/thesys-generative-ui, .gemini/skills/thesys-generative-ui, .github/skills/thesys-generative-ui and .opencode/skills/thesys-generative-ui in your project.

What does Thesys Generative UI need to run?

Going by SKILL.md and its folder, Thesys Generative UI needs a shell and TypeScript for the scripts in its folder. Our summary lists: Node.js; A Bash shell.

Does Thesys Generative UI access the network?

SKILL.md names 2 domains. As links in the text: docs.thesys.dev and console.thesys.dev. This is read from the text; nothing was executed.

Is Thesys Generative UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Thesys Generative UI use?

Thesys Generative UI is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Thesys Generative UI use?

About 614 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 18k tokens, read only when the agent opens those files.

What are the alternatives to Thesys Generative UI?

Skills that share tags, products or a category with Thesys Generative UI: Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Spotpatch (huanglvjing/spotpatch, 134 stars) and React Best Practices (ryokun6/ryos, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Thesys Generative UI?

secondsky (a GitHub user) maintains it in secondsky/claude-skills, which has 227 GitHub stars. The repository holds 169 skills in this directory. The repository was last updated on September 28, 2026.

Source: secondsky/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.