Slate DevTools UI
SkillStack Official
Dark-slate design system for developer-tools landing pages and consoles: install-command hero, live terminal, latency charts, trace waterfalls and alert builders — built for CLIs, APIs and observability products.
Build a dark developer-tools landing page for my API with an install-command hero, a live terminal and a latency chart, using devtools-slate-ui.
What you get
- A complete dark-slate devtools design system: SKILL.md with IP guardrails, workflow, tokens, motion and QA checklist; three references (design tokens, components, paste-ready snippets); and two working demo pages — a Tracefield observability landing page (install-command hero, live terminal, latency chart, trace waterfall, pricing) and an interactive console (traces table, waterfall detail, alert-rule builder) with self-hosted fonts.
Good fit
- Teams shipping a CLI, API, SDK, database or observability product who need a dark, code-first landing page that earns a developer's trust in seconds.
Not for
- Consumer, lifestyle or luxury products; light-mode-first brands; pages that need photography as the hero.
- Name
- Slate DevTools UI
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0 — Slate DevTools UI: deep-slate developer-tools design system (Tracefield observability demos). Install-command hero, live terminal with log stream, p50/p95/p99 latency chart with range tabs, trace waterfall, alert-rule builder console, pricing with annual toggle, FAQ accordion. Self-hosted Inter + JetBrains Mono fonts; prefers-reduced-motion fallbacks throughout.
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip devtools-slate-ui-v1.0.0.zip -d ~/.claude/skills/devtools-slate-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Like this free skill? Premium unlocks 91 exclusive skills.
One subscription unlocks every premium skill, prompt and pack — plus all future drops.
Reviews
Related skills
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3
Bento-Style UI Design
Bento-Style UI Design
Design bento-grid landing pages — modular unequal cards where tile size carries the editorial hierarchy, each card with its own mini-visualization, choreographed stagger/reveal/hover motion. Ships tokens, components, copy-paste snippets, and an animated Hexagrid demo.
Claude Code · Codex · Cursor · Copilot +3
AI Aesthetic UI
AI Aesthetic UI
Build landing pages and product UI in the AI product aesthetic — near-black luminous base, violet→cyan intelligence gradient, chat-first hero, streaming text, glow cards.
Claude Code · Codex · Cursor · Copilot +3
Neon Noir UI
Neon Noir UI
Design neon-noir cyberpunk websites — a near-black night city lit by two neon hues, pink and cyan, with cut-corner panels, HUD mono labels, and a perspective grid floor. Use when the user asks for a cyberpunk look, a neon night-city aesthetic, an electronic music festival site, or a "dark, glowing, after-midnight" mood.
Claude Code · Codex · Cursor · Copilot +3