Skill UI

This skill acts as a code education expert, specializing in breaking down complex code, algorithms, or system architecture. It transforms difficult technical concepts into understandable explanations using clear narratives, visual diagrams, and step-by-step breakdowns. Ideal for creating learning materials, onboarding guides, or detailed technical reviews for developers of all levels.

Build single-file HTML playgrounds with controls, live preview, and prompt output so users can explore large visual or structural spaces and copy actionable prompts without leaving the browser.

Defines Salesforce Lightning Web Component, Aura, and Visualforce quality/security standards covering SLDS 2 styling, accessibility (WCAG 2.1 AA), data access patterns, component communication rules, XSS/CSRF protections, view state management, and Jest testing requirements for guided UI development and reviews.

This skill provides a comprehensive review of UI components and codebases to ensure strict adherence to established design systems, accessibility guidelines (WCAG), and modern front-end best practices. It checks for design token compliance (e.g., semantic colors, scaled spacing), component conventions, WCAG accessibility standards (a11y), mobile responsiveness, and visual coherence across the entire application.

This skill performs visual inspection and validation of website design quality, identifying and fixing issues at the source code level. It supports static sites, SPA frameworks, and full-stack applications. The workflow includes information gathering, visual inspection for layout, responsive, and accessibility issues, followed by source code fixes and re-verification. It ensures responsive design, visual consistency, and accessibility compliance across various viewports.

Act as an expert guide for architecting comprehensive, implementation-ready design systems tailored for luxury brands. This skill generates structured guidelines covering style foundations, design tokens, component anatomy, state management, and rigorous accessibility criteria (WCAG). It ensures consistency, adherence to a high-end visual aesthetic, and provides actionable, code-review-ready documentation.

A comprehensive guide on embedding before-and-after screenshots directly into pull request descriptions. This skill helps reviewers visualize UI changes, layout adjustments, and data visualizations instantly, without needing to check out the branch. Includes best practices for image sizing, structured Markdown patterns, and specific API/upload guidance for Azure DevOps and GitHub.

This skill guides the entire development lifecycle for reusable, interactive Power BI custom visuals (.pbiviz). Using TypeScript and the pbiviz toolchain, developers can scaffold, implement the IVisual interface, manage complex formatting models, perform live preview, package the asset, and certify/publish the visual to AppSource.

This skill guides authors and researchers on how to strategically position their computer graphics, rendering, or visual computing work for the ACM SIGGRAPH conference. It covers core fit assessment, required evidence (visual, mathematical, or system), manuscript reframing from journal/arXiv styles, and navigating venue-specific submission requirements. Use this tool to improve your conference submission strategy and maximize visibility among top graphics reviewers.

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.

The Diagram Generator converts complex, unstructured inputs—such as natural language, code snippets, schemas, and notes—into professional, editable visual diagrams. It supports diverse standards including Mermaid, PlantUML, and Graphviz, enabling the creation of flowcharts, sequence diagrams, UML models, ER diagrams, architecture maps, and more. Outputs are designed to be reviewable, version-controllable, and highly precise.

A comprehensive toolkit designed for reading, reviewing, and programmatically creating high-fidelity PDF documents. It supports content extraction from existing PDFs, generating professionally formatted reports, and validating visual quality through rendering to PNG images. Ideal for tasks requiring precise typography, layout integrity, and polished final deliverables.