/preview-component

Render and inspect a design-system component in a trusted project. Trigger for explicit visual component preview requests. Do not trigger for simple theme/class lookup or untrusted repositories.

BOOST

agiflow@agiflow

GitHub

From plugin

aicode-toolkit

1619 skills1 command6 MCP

Install

$ npx -y skills add agiflow/aicode-toolkit --skill preview-component --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/preview-component

Context preview

The summary Claude sees to decide when to auto-load this skill.

Render and inspect a design-system component in a trusted project. Trigger for explicit visual component preview requests. Do not trigger for simple theme/class lookup or untrusted repositories.

SKILL.md

preview-component.SKILL.md

name: preview-component
description: 'Render and inspect a design-system component in a trusted project. Trigger for explicit visual component preview requests. Do not trigger for simple theme/class lookup or untrusted repositories.'

Preview a component safely

1. Confirm the user trusts the consumer repository. `get_component_visual` can execute its components, Storybook/build tooling and browser processes; do not treat it as passive file inspection. 2. Check `project.json` design configuration, relevant stories/components and Chromium availability. If setup is absent, explain what is required rather than guessing or installing browser binaries silently. 3. Discover candidates with `list_shared_components` / `list_app_components`, inspect the actual `get_component_visual` input schema, then ask before rendering and run in the consumer workspace. The MCP server supports stdio; do not start it using HTTP/SSE or `--dev` by default. 4. Report the preview output and component path, rendering errors, any executed code and remaining manual verification. Never claim a visual check succeeded when browser setup or component rendering failed.

Read it on GitHub ↗

Ships withaicode-toolkit

This repo provides: project and feature scaffolding via templates file-level design guidance before edits rule-based review after edits design-system discovery for frontend work

Get the whole plugin

Stats

TypeScript JavaScript Node Next.js Tailwind

+7 tags

CSS Drizzle GitHub Playwright Anthropic Gemini MCP

161

Stars

Forks

Active

Maintenance

TypeScript

Language