AI-powered generative UI with Thesys - create React components from natural language.
/plugin marketplace add secondsky/claude-skills/plugin install thesys-generative-ui@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/ai-provider-setup.mdreferences/common-errors.mdreferences/component-api.mdreferences/error-catalog.mdreferences/integration-guide.mdreferences/tool-calling.mdreferences/use-cases-examples.mdreferences/what-is-thesys.mdscripts/check-versions.shscripts/install-dependencies.shtemplates/basic-usage.tsxtemplates/cloudflare-workers/frontend-setup.tsxtemplates/cloudflare-workers/worker-backend.tstemplates/cloudflare-workers/wrangler.jsonctemplates/nextjs/api-chat-route.tstemplates/nextjs/app-page.tsxtemplates/nextjs/package.jsontemplates/nextjs/tool-calling-route.tstemplates/python-backend/README.mdtemplates/python-backend/fastapi-chat.pyLast Updated: 2025-11-10
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>;
}
const form = await generateUI({
prompt: 'Create a contact form with name, email, and message fields',
theme: 'modern'
});
references/what-is-thesys.md - What is TheSys C1, success metrics, getting startedreferences/use-cases-examples.md - When to use, 12 errors prevented, all templates catalogreferences/tool-calling.md - Complete tool calling guide with Zod schemasreferences/integration-guide.md - Complete setup for Vite, Next.js, Cloudflare Workersreferences/component-api.md - Complete component prop referencereferences/ai-provider-setup.md - OpenAI, Anthropic, Cloudflare Workers AI setupreferences/tool-calling-guide.md - Tool calling patternsreferences/theme-customization.md - Theme system deep divereferences/common-errors.md - Expanded error catalogbasic-chat.tsx, custom-component.tsx, tool-calling.tsx, theme-dark-mode.tsxapp/page.tsx, app/api/chat/route.ts, tool-calling-route.tsworker-backend.ts, frontend-setup.tsxtheme-config.ts, tool-schemas.ts, streaming-utils.tsOfficial Docs: https://docs.thesys.dev | Playground: https://console.thesys.dev/playground
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.