devtools
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.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 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.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"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.
보안 감사
안전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.
위험 요인
⚙️ 외부 명령어 (50)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/vercel-labs-devtools/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](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/1BibTeX 인용
@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 json-render devtools to my existing React app. Identify the provider and install the matching adapter before placing the inspector.
Help debug a missing element in my json-render interface. Use the spec tree, validation warnings, visibility settings, and current state.
Configure devtools for my app with a fixed bottom composer. Use right docking and review reserved space and CSS offsets for overlap.
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?
Does the inspector run in production?
Can I edit application state?
Can one inspector cover multiple renderers?
Can I capture events on the server?
What does this skill install by itself?
개발자 세부 정보
작성자
vercel-labs라이선스
MIT
Skillstore 리비전
r1
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
bad9dafc37d1638cd29cb9bab06d5f8dbcd0f6c2
유지보수 최신성
2026. 9. 30.
사용량
0 다운로드 · 0 조회
파일 구조
📄 SKILL.md