菜单
Instructions and guidelines for using the component-preview and component-preview-server components within the Sona-UI repository. Includes details on registry fetching.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Integrate a new component into the Sona UI library end to end — the full per-component pipeline of writing the component, demo, docs, registry entry, nav link, playground controls, regenerating the registry, and verifying it live. Use this whenever the user wants to add, create, scaffold, register, or "wire up" a new component in this repo (sona-ui), or mentions doing "the steps" / "the pipeline" to bring a component into the library — even if they only hand you the component code or just a name and an idea. Trigger it for phrases like "add a <name> component", "new component", "integrate this into the registry", "scaffold a component", or "set up the docs/playground for X".
Instructions and guidelines for using the code-block components (CodeBlock, CodeBlockSource, InternalCodeBlock) within the sona-ui repository.
Guidelines and rules for using the CodeBlockSource component, specifically handling how source files and code are read from the system in the Sona-UI repository.
基于 SOC 职业分类
| name | component-preview-usage |
| description | Instructions and guidelines for using the component-preview and component-preview-server components within the Sona-UI repository. Includes details on registry fetching. |
This skill covers the usage of the Component Preview ecosystem in the sona-ui repository. The preview system handles displaying live React components alongside their raw source code in an interactive tabbed interface.
The system relies on three primary files:
ComponentPreview (src/components/common/component-preview.tsx): The client-side UI wrapper providing the Tabs (Preview / Code) and invoking CodeBlock under the hood. It takes raw component and code nodes.ComponentPreviewServer (src/components/common/component-preview-server.tsx): A server component wrapper that automatically resolves a component and its source code from a global registry map.ComponentWrapper (src/components/common/component-wrapper.tsx): The visual layout shell that adds the standard background, padding, and centered layout to the actual rendered component.If you already have the component node and its raw string code, you can use ComponentPreview directly. This is generalized and can be used on any path or any arbitrary block of UI.
import ComponentPreview from "@/components/common/component-preview";
import MyButton from "./my-button";
const codeString = `
export default function MyButton() {
return <button>Click</button>
}
`;
export default function Page() {
return (
<ComponentPreview
component={<MyButton />}
code={codeString}
/>
)
}
To build scalable documentation (like a UI library docs site), rely on ComponentPreviewServer. This abstracts away importing explicit components and parsing raw strings by reading from a central registry.
import { ComponentPreviewServer } from "@/components/common/component-preview-server";
// Auto fetches the "default" example from the "button" category
// in the exampleRegistry
<ComponentPreviewServer
component="button"
name="default"
/>
The ComponentPreviewServer component integrates tightly with the @/registry/index file (specifically exampleRegistry).
When you pass component="button" and name="default":
exampleRegistry["button"] to get an array of button examples..find()s the specific example where e.name === "default".<example.component /> and its literal string example.code down to ComponentPreview.Example default not found in registry for component button.If you need to bootstrap these preview block wrapper components into another standalone project, full source code for the components is provided in the reference/ block of this skill.