Skill UI

A comprehensive, implementation-ready guide for building editorial interfaces. This system defines foundational tokens, typography (DM Serif Display), color palettes, and accessibility standards (WCAG 2.2 AA) to create clean, readable, and aesthetically rich long-form content layouts, perfect for blogs and storytelling platforms.

This skill converts complex, machine-readable Markdown artifacts (like research reports, review summaries, and idea proposals) into a single, polished, human-friendly HTML view. It maintains the original Markdown as the source of truth while providing advanced presentation features such as structured layouts, callouts, and interactive dashboards for optimal reading experience. Ideal for generating shareable, non-technical reports.

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.

Unship is a dedicated local workflow for front-end developers to compare multiple AI-generated UI alternatives (such as layouts, copy, or flows) directly within a running application environment. Instead of committing to one generated version, it adds temporary source-level variants, allowing for visual comparison. After the user selects the final version, the skill automatically cleans up all unused temporary code and attributes, ensuring a clean, production-ready codebase. Note: This tool is for local iteration only, not for production A/B testing or analytics.

Plan experiments before data collection: choose designs, randomize, block, and generate reproducible DOE layouts to avoid confounding and pseudoreplication.

A comprehensive tool for managing the entire Android development lifecycle from the terminal. It allows users to create new projects, manage SDK packages, interact with emulators and physical devices, run detailed tests, inspect UI layouts, and search official Android documentation via CLI commands. Essential for professional Android developers.

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.

This guide details the principles and implementation for Color Blocking design, an aesthetic characterized by large, solid, contrasting color sections (Mondrian style). It provides comprehensive technical implementations using CSS Grid (Web), SwiftUI, and Flutter for achieving striking, geometric layouts defined by bold colors and clean typography. Perfect for modern, impactful UIs.