devtools-elements

What it does and when to use it

Install developer tool components from the Elements registry. Use when user needs JSON viewers, API response displays, code diff viewers, CLI output renderers, env editors, error boundaries, webhook testers, or schema viewers. Triggers on "devtools", "json viewer", "API response", "webhook tester", "env editor", "code diff", "schema viewer", "error boundary", "CLI output".

Triggers from the description

How it works

1. Install Pattern
2. Components
3. Quick Patterns
4. Discovery

---
name: devtools-elements
description: Install developer tool components from the Elements registry. Use when user needs JSON viewers, API response displays, code diff viewers, CLI output renderers, env editors, error boundaries, webhook testers, or schema viewers. Triggers on "devtools", "json viewer", "API response", "webhook tester", "env editor", "code diff", "schema viewer", "error boundary", "CLI output".
---

# Dev Tools Elements

8 developer utility components. Zero external dependencies.

## Install Pattern

```bash
npx shadcn@latest add @elements/{name}
```

## Components

| Component | Install | Description |
|-----------|---------|-------------|
| JSON Viewer | `@elements/json-viewer` | Collapsible JSON tree with search |
| API Response Viewer | `@elements/api-response-viewer` | HTTP response with status, headers, body |
| Code Diff Viewer | `@elements/code-diff-viewer` | Side-by-side or inline diff |
| CLI Output | `@elements/cli-output` | Terminal-like output renderer |
| Env Editor | `@elements/env-editor` | Environment variable editor |
| Error Boundary UI | `@elements/error-boundary-ui` | Error boundary with stack trace |
| Webhook Tester | `@elements/webhook-tester` | Webhook request/response tester |
| Schema Viewer | `@elements/schema-viewer` | JSON Schema / OpenAPI renderer |

## Quick Patterns

```bash
# API debugging
npx shadcn@latest add @elements/api-response-viewer @elements/json-viewer

# Dev dashboard
npx shadcn@latest add @elements/env-editor @elements/webhook-tester @elements/cli-output

# Error handling
npx shadcn@latest add @elements/error-boundary-ui

# All dev tools
npx shadcn@latest add @elements/json-viewer @elements/api-response-viewer @elements/code-diff-viewer @elements/cli-output @elements/env-editor @elements/error-boundary-ui @elements/webhook-tester @elements/schema-viewer
```

## Discovery

Browse https://tryelements.dev/docs/devtools

Versions

The database has no other skills named devtools-elements.

Identical content appears in 1 other GitHub folders. We show one copy with the highest score.

Database snapshot: 13.11.2026 · package version 779475d6ee81 (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 95ai-elements
  Install AI UI components from the Elements registry. Use when user needs chat interfaces, agentic UIs (tool calls, reasoning, plans), multi-agent dashboards, or AI devtools. Triggers on "AI component", "chat UI", "agent UI", "tool call component", "streaming text", "agentic",…
• 95elements
  Browse and install components from the Elements registry (tryelements.dev). Use when user asks about available components, wants to explore providers, says "elements", "component library", "what components", "install from registry", "tryelements", or needs to find the right component category.
• 100local-ai-elements-f31a5ceb
  AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.
• 90inspect-in-devtools
  Use this skill to connect to the Chrome DevTools UI for interactive debugging, UI/UX review, Q&A, showing elements/network requests/panels to the user, inspecting the user's current DevTools selection, and addressing or polling for DevTools UI comment threads.
• 100error-handling
  Error-handling: envelope, propagation, and capture rules for server-side APIs. TRIGGER when: reviewing server-side catch blocks, response formatters, telemetry capture, or serverless error boundaries; defining or auditing application error codes or the code registry; reviewing…
• 100chrome-devtools-cli
  Use this skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.