Install
$ agentstack add skill-almax000-claude-skills-dev-console ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
Dev Console
> In-browser UI review + DOM annotation tool for frontend quality feedback loops.
Safety Guarantee
- Vite plugin uses
apply: 'serve'— zero production footprint - All resources served via
/__dev-console/middleware routes, nothing written todist/ - Annotation data persists to
.claude/feedback/annotations.json(gitignored)
Commands
| Command | Description | |---------|-------------| | /dev-console-init | First-time setup: copy plugin files + inject into vite.config | | /dev-console | Enable/disable the Dev Console |
Modules
| Module | Description | |--------|-------------| | annotation | DOM element annotation + notes, state machine IDLE→SELECTING→FORM_OPEN→IDLE | | component-boundaries | Vue component boundary visualization | | css-vars | CSS variable viewer/editor |
Architecture
plugin/ # Source files (Git tracked, portable)
├── vite-plugin-dev-console.mjs # Vite plugin entry (apply: 'serve')
├── dev-console-shell.js # Shadow DOM host + panel UI
├── dev-console-shell.css # Panel styles (dark/light themes)
├── dev-console-i18n.js # Bilingual EN/ZH
├── dev-console-theme.js # Theme system
└── modules/ # Feature modules
├── annotation.js
├── component-boundaries.js
└── css-vars.js
Runtime paths (created by init command, gitignored):
.claude/plugins/— plugin runtime copies.claude/feedback/annotations.json— annotation data
Workflow
/dev-console-init # First time: copy plugin/ → .claude/plugins/ + inject vite.config
npm run dev # Start dev server, Console auto-loads
Browser bottom-right ● button # Open/close Dev Console drawer
Annotate DOM elements + notes # Data saved to .claude/feedback/annotations.json
Claude reads annotations # Feedback loop closed
Requirements
- Vite — any Vite-powered project (Vue, React, Svelte, etc.)
- Node.js >= 18
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: almax000
- Source: almax000/claude-skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.