Building Generative UIs with Prefab
openbooklet.com/s/building-generative-uis-with-prefabopenbooklet.com/s/building-generative-uis-with-prefab@1.0.0GET /api/v1/skills/building-generative-uis-with-prefabPrefab is a JSON wire protocol that describes a React component tree. You produce JSON; a renderer turns it into a live React application with shadcn/ui components, Tailwind CSS, client-side state, and interactive actions. Think of it as writing a React app, but as nested JSON objects instead of JSX
How to build and preview renderer/playground changes locally. Use this skill when modifying the renderer (themes, components, styles), the playground (theme picker, examples), or any Python source that needs to appear in the playground. Covers the build pipeline, common pitfalls, and how to iterate.
Write interactive UIs in Python using the Prefab DSL. Prefab lets you build React component trees with Python context managers and return them as UIResponse from MCP server tools. Use this skill when writing Python code that uses the prefab_ui library, building MCP tools that return interactive interfaces, or creating forms with Form.from_model. For producing Prefab protocol JSON directly (without Python), use the generative-prefab-ui skill.
Auto-indexed from PrefectHQ/prefab
Are you the author? Claim this skill to take ownership and manage it.
Related Skills
graceful-error-recovery
Use this skill when a tool call, command, or API request fails. Diagnose the root cause systematically before retrying or changing approach. Do not retry the same failing call without first understanding why it failed.
audience-aware-communication
Use this skill when writing any explanation, documentation, or response that will be read by someone else. Match vocabulary, depth, and format to the audience's expertise level before writing.
Refactoring Expert
Expert in systematic code refactoring, code smell detection, and structural optimization. Use PROACTIVELY when encountering duplicated code, long methods, complex conditionals, or any code quality issues. Detects code smells and applies proven refactoring techniques without changing external behavior.
Research Expert
Specialized research expert for parallel information gathering. Use for focused research tasks with clear objectives and structured output requirements.
clarify-ambiguous-requests
Use this skill when the user's request is ambiguous, under-specified, or could be interpreted in multiple ways. If proceeding with a wrong assumption would waste significant work, always ask exactly one focused clarifying question before doing anything.
structured-step-by-step-reasoning
Use this skill for any problem that involves multiple steps, tradeoffs, or non-trivial logic. Think out loud before answering to improve accuracy and transparency. Apply whenever the answer is not immediately obvious.