textual-screenshot
Capture a Textual terminal UI as an SVG using its headless test harness. Use when asked to make, attach, or preview a screenshot of deepagents-code/dcode or another Textual app, visually verify a TUI state, or render a modal, screen, or widget without a desktop or browser.
- Installs
- 40
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/langchain-ai/deepagents --skill textual-screenshot- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads textual-screenshot automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Textual Screenshot
Render the real app with Textual's headless test harness, drive it to the requested state, and save the composed terminal as SVG. Prefer this over browser automation or OS-level screenshot tools.
Capture workflow
- Identify the
Appclass and the shortest trusted local setup that reaches the requested UI. - Write a temporary Python script outside the repository. Keep generated screenshots outside the repository unless the user explicitly requests a committed artifact.
- Start the app with a deterministic terminal size using
app.run_test(size=(columns, rows)). - Call
await pilot.pause()after startup and after every action that changes visible state. Usepilot.press(...)for a realistic interaction path when practical; direct app methods are acceptable for a focused preview. - Call
app.save_screenshot(output_path)while the desired state is visible. Use an.svgpath. - Inspect the resulting SVG and confirm its file size is reasonable before sharing it.
- Delete temporary scripts and captures when they are no longer needed.
Minimal deepagents-code example:
import asyncio
import os
from pathlib import Path
from tempfile import TemporaryDirectory
from unittest.mock import AsyncMock, MagicMock, patch
async def main() -> None:
output = Path("/tmp/dcode-ui.svg")
with TemporaryDirectory() as profile:
os.environ["DEEPAGENTS_HOME"] = profile
from deepagents_code.app import DeepAgentsApp
app = DeepAgentsApp(agent=MagicMock())
with patch.object(app, "_post_paint_init", new=AsyncMock()):
async with app.run_test(size=(110, 36)) as pilot:
await pilot.pause()
await app._handle_command("/model")
await pilot.pause()
app.save_screenshot(output)
print(output)
asyncio.run(main())
Run from libs/code so the project environment and editable package resolve:
uv run python /tmp/capture_dcode_ui.py
Adapt only the app constructor and action that opens the target state. For a standalone Textual app, import its App subclass and use the same run_test/save_screenshot sequence.
Reliability and safety
- Use trusted local application code only. A headless app can still run startup hooks, subprocesses, or network calls. For
DeepAgentsApp, setDEEPAGENTS_HOMEto a temporary directory before importingdeepagents_code, and mock_post_paint_initbefore mounting; replacing only the agent does not isolate startup side effects. - Never capture secrets, credentials, private conversation content, or unrelated user data. Seed only synthetic content needed for the preview.
- Choose a bounded terminal size; start with
(110, 36)and adjust only when the target clips or wastes substantial space. - Wait for workers, animations, and modal transitions to settle. Add another
await pilot.pause()rather than using arbitrary sleeps. - Do not treat a generated SVG as proof that interaction works. Use normal Textual tests for behavior and the screenshot for visual inspection.
- Do not hand-edit the SVG. Reproduce the intended app state and recapture it.
FAQ
What does the textual-screenshot skill do?
Capture a Textual terminal UI as an SVG using its headless test harness. Use when asked to make, attach, or preview a screenshot of deepagents-code/dcode or another Textual app, visually verify a TUI state, or render a modal, screen, or widget without a desktop or browser.
How do I install textual-screenshot?
Run npx skills add https://github.com/langchain-ai/deepagents --skill textual-screenshot in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/textual-screenshot/ (personal) or .claude/skills/textual-screenshot/ (project).
Which AI agents can use textual-screenshot?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is textual-screenshot safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains textual-screenshot?
It is published by langchain-ai in langchain-ai/deepagents. It has 40 recorded installs.
More from langchain-ai/deepagents
langgraph-docs
langchain-ai/deepagents
Fetches and references LangGraph Python documentation to build stateful agents, create multi-agent workflows, and implement human-in-the-loop patterns. Use when the user asks about LangGraph, graph agents, state machines, agent orchestration, LangGraph API, or needs LangGraph implementation guidance.
web-research
langchain-ai/deepagents
Searches multiple web sources, synthesizes findings, and produces cited research reports using delegated subagents. Use when the user asks to research a topic online, search the web, look something up, find current information, compare options, or produce a research report.
social-media
langchain-ai/deepagents
Drafts engaging social media posts, writes hooks, suggests hashtags, creates thread structures, and generates companion images. Use when the user asks to write a LinkedIn post, tweet, Twitter/X thread, social media caption, social post, or repurpose content for social platforms.
arxiv-search
langchain-ai/deepagents
Searches arXiv for preprints and academic papers, retrieves abstracts, and filters by topic. Use when the user asks to find research papers, search arXiv, look up preprints, find academic articles in physics, math, CS, biology, statistics, or related fields.
blog-post
langchain-ai/deepagents
Writes and structures long-form blog posts, creates tutorial outlines, and optimizes content for SEO with cover image generation. Use when the user asks to write a blog post, article, how-to guide, tutorial, technical writeup, thought leadership piece, or long-form content.
skill-creator
langchain-ai/deepagents
Guide for creating effective skills that extend agent capabilities with specialized knowledge, workflows, or tool integrations. Use this skill when the user asks to: (1) create a new skill, (2) make a skill, (3) build a skill, (4) set up a skill, (5) initialize a skill, (6) scaffold a skill, (7) update or modify an existing skill, (8) validate a skill, (9) learn about skill structure, (10) understand how skills work, or (11) get guidance on skill design patterns. Trigger on phrases like "create a skill", "new skill", "make a skill", "skill for X", "how do I create a skill", or "help me build a skill".
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.