📦

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 برونزي

التثبيت باستخدام Agent لدي

انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.

طلب الوكيل

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 عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

تفاصيل 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 • ٢٩‏/٩‏/٢٠٢٦ فتح التقرير المرتبط بالإصدار

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

الأسطر التي تم تحليلها

عناصر المراجعة

تم تجاهل الإيجابيات الكاذبة

لم يكتشف أحدث تدقيق ثابت ودلالي مكتمل أي نتائج أمنية مؤكدة. ولا يثبت ذلك أن المهارة خالية من الآثار الجانبية.

دقّقه: codex

شارك واستشهد بهذا التقرير

شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.

فتح التقرير المرتبط بالإصدار

نسخ رابط التقرير

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

حداثة الصيانة

٣٠‏/٩‏/٢٠٢٦

الاستخدام

0 تنزيلات · 0 مشاهدات

بنية الملفات

📄 SKILL.md

devtools

التثبيت باستخدام Agent لدي

موارد مهيّأة لـ Agents

اختبرها

التدقيق الأمني

عوامل الخطر

نسخ رابط التقرير

شارة Markdown

شارة HTML

بطاقة قابلة للتضمين

اقتباس APA

اقتباس BibTeX

CITATION.cff

تقييم Skillstore

ما الذي يمكنك بناؤه

Diagnose Missing UI Elements

Trace Chat UI Streams

Reproduce State and Action Issues

جرّب هذه الموجّهات

أفضل الممارسات

تجنب

الأسئلة المتكررة

تفاصيل المطور