Skill UI

A comprehensive skill for capturing and documenting web application and graphical UI states during the development cycle. It supports full-page captures using Playwright, reliable post-processing cropping with PIL, capturing interactive states (hovers, selections), and even handles non-web desktop applications using mss/ctypes.

This skill enables users to upload local images, such as screenshots or before-and-after comparisons, directly to GitHub using the GitHub CLI. It bypasses the lack of a public image upload API by mimicking the web UI's internal attachment flow, generating canonical `user-attachments` URLs. These URLs can then be seamlessly embedded into Pull Requests, Issues, or comments from the terminal.

A specialized presentation deck template designed for internal engineering talks, technical conferences, and deep-dive knowledge sharing. It features a professional GitHub-dark theme, JetBrains Mono coding font, and a structured layout including Cover, Agenda, main content slides (with code blocks), demo slides (terminal screenshots), and Q&A sections.

This skill analyzes raw WordPress Site Health reports (text, screenshots, or debug info). It converts diagnostic data into a prioritized, risk-tiered fix plan, identifying critical issues and recommended improvements. It provides exact, safe commands (WP-CLI/PHP snippets) necessary to address the site and strictly enforces safety protocols like backups, lint checks, and dry-runs.

This skill provides a rigorous, structured method for inspecting animated 3D characters, rigs, and motion retargeting in Blender. It moves beyond visual evidence (screenshots) by extracting and comparing structured data points such as bone transformations, bounding box changes, ground contacts, and axis conventions. Ideal for diagnosing subtle animation flaws like foot sliding, ground penetration, or incorrect orientation that are invisible in still images.

Compares two recorded browser sessions step-by-step by matching steps via shared step IDs. It performs both pixel-level diffing on screenshots (for visual regression) and node-by-node diffing on accessible DOM snapshots (for structural changes). Ideal for visual regression testing, comparing A/B flow variants, and verifying replay consistency in UI development.

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.