Skill UI

Automatically scans code for reflected, stored, and DOM-based XSS risks across HTML, JavaScript, CSS, and URLs, providing reports and safe proof-of-concept payloads for use in reviews, audits, or pre-deployment checks.

This tool provides a comprehensive workflow for generating powerful, self-contained frontend artifacts for AI platforms. It initializes a React/TypeScript project using Vite and Tailwind CSS, allowing developers to build complex UIs. The core function is bundling the entire application into a single, shareable HTML file, making it easily viewable within AI conversations.

This skill provides advanced architectural guidelines for generating premium, award-level web experiences. It guides code generation beyond basic HTML/CSS, focusing on creating immersive digital environments. Key areas include sophisticated motion design (scroll-driven narratives, micro-interactions), establishing strong visual identities (e.g., Brutalism, Glassmorphism), and enforcing strict performance best practices like hardware acceleration and accessibility compliance.

Transforms you into a 10x web engineer, guiding work across HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, security, performance, accessibility, and infrastructure so you can deliver standards-compliant, high-quality front- and back-end solutions.

Leverages the Anima SDK to convert visual designs from Figma into production-ready code across multiple modern frameworks (React, Vue, HTML). It supports clean TypeScript integration and Tailwind CSS styling, making it ideal for developers building automated design-to-code pipelines or rapidly prototyping complex UI components directly from design mockups.

Implements an iterative development workflow using the Anima SDK. This tool allows developers to quickly generate, compare, and preview code outputs from Figma designs across multiple frameworks (React, Vue, HTML/CSS) in a local environment. Ideal for rapid prototyping, cross-framework comparison, and refining design-to-code implementation.

This skill provides a comprehensive guide and code examples for creating a complete OneNote structure (Notebook, Section, and Page) using the Microsoft Graph API. It specifically addresses the critical technical requirement that OneNote content must follow strict XHTML standards, detailing common HTML pitfalls (such as unclosed tags, unsupported attributes, and merge cell usage) that can lead to silent content corruption during API calls.

Generates a highly polished, self-contained single-page HTML landing page optimized for maximum conversion. It incorporates advanced features like 3D CSS animations, GSAP scroll effects, and mouse parallax depth. To ensure accuracy, the skill uses a structured intake process (product pitch, target audience, brand colors, and tone) to build a conversion-ready page that reflects the actual product, not generic boilerplate. Outputs a single, deployable HTML file.

This skill uses WeasyPrint to reliably convert rich HTML content, complete with CSS styling, into professional PDF documents. It is ideal for generating static, styled exports such as reports, invoices, labels, and any HTML/Jinja-rendered page where the source content is already structured in HTML format. It supports advanced CSS Paged Media features like page sizes, margins, headers, and footers.

This skill captures a fully self-contained static HTML snapshot from any running web application (e.g., React, Vue, Next.js). Using Puppeteer, it renders the live DOM, automatically inlining all CSS styles and converting images, assets, and backgrounds to base64 data URIs. This ensures the generated HTML file is completely self-sufficient and requires no external network connection, making it perfect for sharing UI states, creating documentation, or preparing assets for offline viewing.

This skill acts as a mobile engineering bridge, converting web designs provided by Stitch into high-quality, production-ready React Native components. It handles complex tasks including translating HTML/CSS layouts into React Native primitives, extracting design tokens (colors, spacing) into a central theme file, and ensuring adherence to native component architectural rules. Ideal for developers integrating web-based prototypes into mobile applications.

This comprehensive skill serves as an entry point for all web UI design needs, covering components, pages, dashboards, and advanced layouts using React, Vue, or pure HTML/CSS. It addresses not only aesthetics and polish (color, typography, spacing) but also deep structural concerns like responsive design, UX auditing, and visual system implementation. Use it whenever a user asks to improve the look, feel, or function of a digital interface.