📦

devtools

Name: devtools
Author: vercel-labs

Révision du contenu r1 Sûr ⚙️ Commandes externes

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.

Prend en charge: Claude Codex Code(CC)

🥉 78 Bronze

Maintain this Skill? Claim it 🥉 78 Bronze

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

Demande d’agent

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.

Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/vercel-labs-devtools.md manifest signé GET /api/skills/vercel-labs-devtools/manifest lockfile signé GET /api/skills/vercel-labs-devtools/lockfile

Tester

Utilisation de « devtools ». Where should I place devtools in my Vue json-render app?

Résultat attendu:

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.

Utilisation de « devtools ». My fixed chat composer overlaps the bottom inspector.

Résultat attendu:

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.

Utilisation de « devtools ». How do I stop state collisions across generated chat turns?

Résultat attendu:

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.

Audit de sécurité

Sûr

v1 • 29/09/2026 Ouvrir le rapport versionné

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.

Fichiers analysés

186

Lignes analysées

Éléments à examiner

Faux positifs ignorés

Le dernier audit statique et sémantique terminé n’a détecté aucun constat de sécurité confirmé. Cela ne prouve pas que le skill est sans effets secondaires.

Audité par: codex

Partager et citer ce rapport

Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.

Ouvrir le rapport versionné

Copier le lien du rapport

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

Badge 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)

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>

Carte intégrable

<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>

Citations académiques (APA · BibTeX · CFF)

Citation APA

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

Citation 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"

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Moyen

Architecture

Maintenabilité

Contenu

Communauté

Conformité aux spécifications

Ce que vous pouvez créer

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.

Essayez ces prompts

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.

Bonnes pratiques

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.

Éviter

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.

Foire aux questions

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.

Détails du développeur

Auteur

vercel-labs

Licence

MIT

Révision Skillstore

Avis de version

L’auteur n’a déclaré aucune version.

Dépôt

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

Réf

bad9dafc37d1638cd29cb9bab06d5f8dbcd0f6c2

Récence de maintenance

30/09/2026

Utilisation

0 téléchargements · 0 vues

Structure de fichiers

📄 SKILL.md

devtools

Installer avec mon Agent

Ressources lisibles par les agents

Tester

Audit de sécurité

Facteurs de risque

Copier le lien du rapport

Badge Markdown

Badge HTML

Carte intégrable

Citation APA

Citation BibTeX

CITATION.cff

Score Skillstore

Ce que vous pouvez créer

Diagnose Missing UI Elements

Trace Chat UI Streams

Reproduce State and Action Issues

Essayez ces prompts

Bonnes pratiques

Éviter

Foire aux questions

Détails du développeur