skills.rest
elaraai
elaraaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

e3-ui-cli

Render East UI components and decision surfaces as PNG images and standalone HTML files from TypeScript, IR, or live workspace tasks.

Updated Nov 10, 2025
Search Tags:#automation#typescript#ui#rendering#cli#screenshot#east
One-click install
npx skills add https://github.com/elaraai/east-workspace --skill e3-ui-cli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e3-ui-cli
Source: https://github.com/elaraai/east-workspace/tree/main/libs/east-ui/packages/e3-ui-cli
Command: npx skills add https://github.com/elaraai/east-workspace --skill e3-ui-cli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires commander, esbuild, playwright-core, and includes scripts (resource) components.

What problem does it solve?

This Skill solves the challenge of automating visual quality assurance and documentation for UI components by rendering them directly from source code or serialized data into high-fidelity images.

Core Features & Use Cases

  • Component Screenshots: Generate PNGs from TypeScript source files, serialized IR, or live workspace tasks.
  • Automated Audits: Sweep entire projects to render every UI export, ensuring consistent visual documentation.
  • Headless Integration: Manage headless Chromium environments across servers and CI pipelines with built-in diagnostic tools.

Quick Start

Use the e3-ui-cli skill to render the dashboard component from the dashboard.tsx file into a dashboard.png image.

Frequently Asked Questions about e3-ui-cli

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate rendering UI components to PNG screenshots from TypeScript source?▼

To automate rendering UI components to PNGs, use a CLI tool that processes TypeScript source files or serialized IR and captures high-fidelity screenshots in a managed headless Chromium environment.

What is the best way to generate standalone HTML files from serialized IR for automated UI testing?▼

Generating standalone HTML files from serialized IR requires a rendering engine that interprets the intermediate representation and outputs self-contained HTML documents suitable for automated UI testing and visual audits.

Does this UI rendering approach work with headless Chromium in CI pipelines?▼

Yes, this UI rendering approach works with headless Chromium in CI pipelines. It includes built-in diagnostic utilities for managing server-side deployments and sweeping entire projects to render every UI export consistently.

Can I sweep an entire project to render every UI export for visual documentation?▼

Yes, you can sweep an entire project to render every UI export. This automated audit functionality ensures consistent visual documentation by capturing all exported components into PNG images or standalone HTML files.

Why do I need a managed headless Chromium environment for server-side UI rendering?▼

A managed headless Chromium environment is required for server-side UI rendering to execute the browser engine reliably without a display, ensuring accurate visual capture and providing diagnostic utilities for deployment troubleshooting.

Related Skills

Explore More Software Engineering Skills→
corey-alixcorey-alix

ESBuild Configuration Assistant

Configure and optimize ESBuild for Node.js TypeScript projects.

Official
Intermediate
oguzhan18oguzhan18
6

angular-cypress

Automate Angular end-to-end and component testing with Cypress 13.x.

Community
Intermediate
cookeyholdercookeyholder

agentcore

Automate browser tasks on AWS-hosted AgentCore cloud browsers.

Community
Advanced
HouseofmvpsHouseofmvps
115

visual-diff

Detect visual regressions in web UIs via Playwright screenshot comparisons.

Community
Intermediate