技能 devtools

📦

devtools

Name: devtools
Author: vercel-labs

內容修訂 r1 安全 ⚙️ 外部命令

Debug json-render Apps with an Inspector Panel

Generative interfaces can make rendering errors, state changes, and streamed updates difficult to trace. This skill guides devtools integration and inspection workflows for json-render apps.

支援: Claude Codex Code(CC)

🥉 78 銅級

Maintain this Skill? Claim it 🥉 78 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "devtools" from https://skillstore.io/skills/vercel-labs-devtools.md and its manifest at https://skillstore.io/api/skills/vercel-labs-devtools/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/vercel-labs-devtools.md 已簽名 manifest GET /api/skills/vercel-labs-devtools/manifest 已簽名 lockfile GET /api/skills/vercel-labs-devtools/lockfile

測試它

正在使用「devtools」。 Where should I place devtools in my Vue json-render app?

預期結果:

Install the devtools core package and Vue adapter.
Place the inspector inside the existing JSONUIProvider beside the renderer.
Pass the current spec and provide a catalog for catalog browsing.

正在使用「devtools」。 My fixed chat composer overlaps the bottom inspector.

預期結果:

Use right docking for a layout with a fixed bottom composer.
Disable dock toggling when the application supports only that position.
Use the published CSS offsets for fixed elements that still need space.

正在使用「devtools」。 How do I stop state collisions across generated chat turns?

預期結果:

Keep one top-level provider and shared state store.
Prefix each turn's element keys and state paths with a unique message identifier.
Pass the latest spec to the Spec panel and all messages to the Stream panel.

安全審計

安全

v1 • 2026/9/29 開啟版本化報告

All 53 static findings are false positives: Markdown backticks and Solid framework references were misclassified as execution or reconnaissance. No evidence found of prompt injection, credential theft, or unauthorized data transfer in SKILL.md. This review covers integration documentation, not dependency implementations or runtime production safeguards.

已掃描檔案

186

分析行數

複核項目

已忽略的誤報

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/vercel-labs-devtools/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/vercel-labs-devtools/security.svg)](https://skillstore.io/skills/vercel-labs-devtools?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/vercel-labs-devtools?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-devtools/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/vercel-labs-devtools.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

vercel-labs. (2026). devtools security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-devtools/audits/1

BibTeX 引用

@techreport{vercel-labs-vercel-labs-devtools-2026,
  author = {vercel-labs},
  title = {devtools security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/vercel-labs-devtools/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "devtools security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "vercel-labs"
date-released: "2026-09-29"
url: "https://skillstore.io/skills/vercel-labs-devtools/audits/1"
identifiers:
  - type: other
    value: "skillstore:vercel-labs-devtools:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

Diagnose Missing UI Elements

Integrate the inspector to examine spec structure, visibility, and validation warnings when a generated component does not appear.

Trace Chat UI Streams

Connect shared providers and message history to inspect stream patches and separate state across generated conversation turns.

Reproduce State and Action Issues

Use runtime state editing and action timelines to investigate unexpected transitions in a development environment.

試試這些提示

Add the Inspector

Add json-render devtools to my existing React app. Identify the provider and install the matching adapter before placing the inspector.

Investigate a Missing Component

Help debug a missing element in my json-render interface. Use the spec tree, validation warnings, visibility settings, and current state.

Adapt Inspector Docking

Configure devtools for my app with a fixed bottom composer. Use right docking and review reserved space and CSS offsets for overlap.

Trace Multiple Streamed Renderers

Integrate devtools into my multi-turn json-render chat with one shared provider and namespaced state. Connect message history and a bounded server-side stream tap. Keep sensitive content out of telemetry.

最佳實務

Match the framework adapter to the host renderer and place the inspector inside the existing provider.
Namespace state paths and element keys for each generated chat turn.
Use test data, review captured events for sensitive content, and verify production behavior before deployment.

避免

Wrapping every chat renderer in a separate state provider when the inspector needs shared state.
Reusing state paths across generated messages without unique namespaces.
Forwarding raw state, action parameters, or stream content to telemetry without reviewing sensitive data.

常見問題

Which frameworks does the skill cover?

It documents React, Vue, Svelte, and Solid adapters for json-render.

Does the inspector run in production?

The documentation says the component renders null when NODE_ENV is production. Verify this behavior in your build before deployment.

Can I edit application state?

The State panel supports inline edits at JSON Pointer paths through the application state store.

Can one inspector cover multiple renderers?

Yes. The documented setup uses one shared provider, separate renderer specs, and namespaced state paths.

Can I capture events on the server?

The skill shows a bounded event store with JSON stream tapping and names a YAML equivalent. Review captured content before persistence or telemetry.

What does this skill install by itself?

The skill is documentation, not an installer. It provides npm commands and integration examples for separately distributed packages.

開發者詳細資訊

作者

vercel-labs

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/vercel-labs/json-render/tree/c2600d73908ed505e6d726f5b6f969ba8f597ce7/skills/devtools

引用

bad9dafc37d1638cd29cb9bab06d5f8dbcd0f6c2

維護新鮮度

2026/9/30

使用量

0 次下載 · 0 次瀏覽

檔案結構

📄 SKILL.md

devtools

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 評分

你可以打造什麼

Diagnose Missing UI Elements

Trace Chat UI Streams

Reproduce State and Action Issues

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊