Skill UI

Compare two recorded browser sessions step-by-step using screenshots and DOM snapshots. Identifies visual regressions, verifies replay accuracy, and compares A/B variants. Reports divergence scores and accessibility changes for quality assurance.

A comprehensive guide to building robust, reliable, and maintainable End-to-End (E2E) test suites using Playwright. This includes implementing the Page Object Model (POM), configuring advanced Playwright settings for CI/CD, managing artifacts (screenshots, traces), and strategies for handling flaky tests to ensure high test stability.

This tool automatically converts design screenshots or visual exports into structured, functional Vue 3 Composition API components. It supports popular UI libraries like Vant, Element Plus, and Ant Design Vue. By batch converting screenshots, it streamlines the development process from raw design assets to reusable, production-ready code, significantly boosting frontend development efficiency.

Guides builders to verify task delivery by collecting required evidence such as CLI output, screenshots, or DOM snapshots, then submitting artifacts for review. Useful when a task must self-certify against a verify plan.

Hallmark is a specialized design skill engineered for AI coding assistants. It enforces deep structural variety and aesthetic sophistication, ensuring generated UIs look professionally 'made' rather than generically templated. Users can invoke Hallmark to build new pages (default), audit existing designs for anti-patterns, redesign components while preserving intent, or extract the 'DNA' (structure, archetypes, color) from existing URLs or screenshots for reference.

This skill generates validated local artifacts (PNG, JPEG, or PDF) from public HTTP(S) web URLs using the Latchshot service. It is ideal for creating visual reports, quality assurance documentation, or social media previews of public web content. Note that this tool only supports public pages and cannot access private, authenticated, or restricted content.

This command-line tool allows users to upload local files (screenshots, images, PDFs, videos, etc.) directly to GitHub's internal user-attachments endpoint. It outputs a special URL that GitHub automatically renders when pasted into PRs, issues, or comments, facilitating the easy sharing of media and screenshots within development workflows. It also supports downloading existing private attachments.

This skill generates high-quality, styled code screenshots by calling the ray.tinte.dev API. It allows users to convert raw code snippets into professional PNG images, supporting multiple programming languages (e.g., Python, JavaScript, TypeScript), customizable themes, and various styling parameters like font size and padding. Use this when the user explicitly requests code images, code snippets as pictures, or mentions 'ray' to visualize code.

Control Android and iOS devices, emulators, and simulators to launch apps, tap, swipe, type, take screenshots, and read accessibility trees. Ideal for mobile UI testing, app debugging, and reproducing phone bugs.

This skill enables developers to orchestrate Android development tasks via the command line. It supports project creation, SDK management, device interaction, emulator control, and UI inspection. Users can install, update, and manage the Android CLI tool, run applications, capture screenshots, and search official documentation for guidance on APIs and best practices.

Systematically test and verify React Native or native Android apps on an emulator using ADB. Inspect UI elements, perform taps, swipes, and text input, capture screenshots, and analyze logs for state verification and visual regression checking.

BrowserAct is a browser automation CLI for AI agents, enabling real browser interaction, JavaScript-rendered extraction, screenshots, network capture, parallel sessions, verification handling, and human handoff. Ideal for tasks requiring authenticated state, dynamic content, or multi-session isolation.