Skill UI

This skill audits a live web page against WCAG standards. It precisely locates accessibility violations, providing a detailed, selector-grounded worklist of necessary fixes without making any changes to the code. Ideal for QA engineers and developers needing a comprehensive, non-destructive report of broken accessibility elements.

A sophisticated pipeline that generates professional, print-ready academic conference posters (e.g., for ICLR, NeurIPS). It builds the poster as a single HTML/CSS file and renders it precisely to PDF using headless Chromium. The system enforces measurement-driven hard gates, utilizes a two-hue design system, and ensures figure provenance, guaranteeing structural integrity for publication standards.

This skill uses WeasyPrint to render HTML content, including applied CSS styles, into high-quality, print-ready PDF documents. It is ideal for exporting structured content such as reports, invoices, or templated dashboards where the source material already exists in HTML format. Supports advanced CSS Paged Media features like custom headers, footers, and explicit page breaks for professional document layouts. Note that it does not execute JavaScript.

Analyzes any frontend codebase (React, Vue, Svelte, Angular, plain CSS, Tailwind) to document the complete design system. It extracts crucial visual elements—including color palettes, typography, spacing scales, and component patterns—directly from source files, without needing to build, render, or run the application. Ideal for design audits, visual language documentation, or migrating a project's identity into a design tool.

Designed to capture a fully functional, standalone static HTML file from any modern web application (React, Next.js, Vue, etc.). It resolves all computed styles and inlines CSS and images (as Base64) into the output, ensuring the captured view can be shared or archived without external dependencies. Supports both automated snapshotting via Puppeteer and interactive capture.

This comprehensive guide and tool suite transforms web designs created in Stitch (HTML/CSS) into clean, production-ready React Native components. It meticulously maps HTML elements (like <div>, <button>) to native RN primitives (View, Pressable) and converts complex CSS styles (Flexbox, typography, shadows) into React Native's StyleSheet.create(). It guides developers to follow architectural best practices, including Atomic Design and data decoupling, for scalable cross-platform mobile development.

This skill generates a complete React component structure following the industry-standard Container/Presentation pattern. It automatically scaffolds necessary files, including TypeScript, Storybook, and SCSS styles, ensuring adherence to project conventions. Use this when building new, scalable components, allowing you to properly classify whether the component is UI-focused (Presentation) or logic-heavy (Container).

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.

A comprehensive guide detailing the aesthetic and technical implementation of AI-native user interfaces for web and mobile applications. It emphasizes conversational flow, adaptive layouts, and generative state visual cues, providing CSS, SwiftUI, and Flutter code examples.

A comprehensive guide detailing the implementation of the 'Bento UI' design pattern across web (CSS Grid), mobile (SwiftUI), and cross-platform (Flutter) environments. This pattern creates highly structured, modular, grid-based dashboards resembling modern app layouts, ensuring aesthetic consistency and responsiveness.

A comprehensive guide for implementing Brutalist Typography aesthetics across web and mobile platforms. This style intentionally breaks traditional design rules, utilizing massive system fonts, clashing colors (Black, White, Red), and aggressive layouts (overlapping, negative margins) to create a raw, attention-demanding, and unapologetic visual experience. Includes detailed CSS, SwiftUI, Flutter, and React Native examples.

This comprehensive guide provides implementation details for Card-Based Design, a popular pattern for displaying bite-sized, discrete information units. It covers best practices for achieving responsive, Pinterest-style layouts across multiple platforms, including modern CSS Grid/Masonry for web, and native frameworks like SwiftUI, Flutter, and React Native for mobile apps. Use it when structuring content feeds, portfolio grids, or news articles.