UI Demo
Fmarzochi/EGCRecord polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.
At a glance
This skill is for Design and helps you record ui demo videos, create product walkthroughs, and build tutorial videos.
git clone --depth 1 https://github.com/Fmarzochi/EGC
cp -r EGC/skills/frontend/ui-demo ~/.claude/skills/ui-demo
Setup, runtime and requirements describe Fmarzochi/EGC, the repo this skill ships in.
playwrightWebmvideocursorweb apptutorial
Also in Fmarzochi/EGC
View the repoDesign, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards. Use this skill to generate semantic ARIA for Web...
Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipl...
Head-to-head comparison of coding agents (Gemini Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metri...
Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates.
Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing.
Build persistent multi-agent operating systems on Gemini CLI. Covers kernel architecture, specialist agents, slash commands, file-based memo...
Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports.
Add x402 payment execution to AI agents: per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents need...
Build an evidence-backed EGC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY bu...
Engineering operating model for teams where AI agents generate a large share of implementation output.
Clean Architecture patterns for Android and Kotlin Multiplatform projects: module structure, dependency rules, UseCases, Repositories, and d...
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices o...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
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,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
Generate configurable chat motion overlays from a transcript or screenshot, including plain bubble scenes, app-style chat containers, option...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...