Skill UI

A comprehensive guide for designing and implementing professional, data-driven dashboards across web, iOS, and Flutter. It details core principles like modular grid layouts, establishing data hierarchy (KPIs, charts), and maintaining minimalist aesthetics. Includes specific code examples using CSS Grid, SwiftUI, and Flutter widgets to ensure optimal user experience and data clarity.

This guide details the principles and technical implementation of widget-based user interfaces, mimicking the aesthetic of modern mobile operating systems (like iOS Home Screen). It covers core design principles such as strict aspect ratios, glanceability, and corner radius matching. Practical code examples are provided for Web (CSS Grid), iOS (SwiftUI), and Cross-platform (Flutter) development, enabling designers to create modular, highly functional mini-apps.

Standards for maintainable Flutter/Dart apps: layer separation, feature-based structure, immutable state, modern Dart, widget choices, testing, review checklists, monorepo and localization. Use when planning, writing, reviewing, or refactoring Flutter code.

This utility generates self-contained, visual HTML widgets for displaying the output of various tools (MCP tools). It takes a user's desired visual description and the tool's JSON test output to create an interactive, visually rich card that enhances the chat experience.