Skill UI

A modern, dark-themed UI component library built with React, Tailwind CSS, and Framer Motion. It provides a comprehensive set of components and styles ideal for developing professional dashboards, admin panels, and data-rich applications. Features include advanced glassmorphism effects and tasteful, smooth animations to enhance user experience.

Guides building native-feeling macOS interfaces, covering layout/composition, traffic lights, draggable chrome, shortcuts, light/dark mode, visuals, animations, drag-and-drop, and onboarding for desktop tools whether React, Electron, or native.

A comprehensive guide to modern utility-first CSS using Tailwind CSS v4 principles. Covers the shift to CSS-first configuration, utilizing CSS variables for design tokens, implementing advanced container queries, and mastering responsive, dark mode, and complex layout patterns (Grid/Flex). Essential for building modern, component-driven UIs efficiently.

Build complete transactional email systems using React Email templates and providers like Resend, Postmark, or SendGrid. Supports i18n, dark mode, spam optimization, and analytics tracking. Includes preview server and unified sending interface for production-ready code.

This utility allows developers to view, add, and modify design tokens (such as colors, spacing, typography, and shadows) within the StyleSeed design system. It ensures visual consistency by managing the synchronization of changes across JSON source files and corresponding CSS custom properties, supporting both light and dark mode variations.

This skill provides a comprehensive audit of user interfaces, evaluating screens against Nielsen's 10 Usability Heuristics and modern mobile UX best practices. It systematically checks for critical usability flaws, design inconsistencies, accessibility gaps, and potential dark patterns, ensuring the resulting product delivers a superior and intuitive user experience across all platforms.

Wraps any existing HTML artifact (landing page, dashboard, etc.) with a live sidebar panel of controls. This panel allows users to instantly adjust design variables—such as accent color, typography scale, layout density, and dark mode—by rewriting CSS custom properties in real time. All changes are persisted via localStorage, enabling continuous exploration and variant testing without losing state.

A comprehensive design system guide for building modern, high-density, and data-rich dashboards. It establishes foundational rules covering dark-themed aesthetics, modular grids, typography, color tokens, and rigorous accessibility standards (WCAG 2.2 AA). Ideal for engineers and designers building complex cloud-platform interfaces for optimal productivity and data analysis.

A comprehensive style guide for building mission control, NOC dashboards, and global monitoring systems. This theme utilizes dark mode, glowing accents (cyan, amber, red), and complex data visualization elements to simulate a high-stakes, real-time operational environment across web, iOS, and Flutter platforms.

This comprehensive guide outlines the core principles for implementing effective and aesthetically pleasing dark mode across multiple platforms. It covers critical rules such as avoiding pure black backgrounds, defining elevation using lightness contrast, and utilizing desaturated accent colors to reduce eye strain. Detailed code examples for Web (CSS), iOS (SwiftUI), and Flutter are provided, ensuring a premium, high-fidelity user experience.

A comprehensive style guide for implementing the Synthwave and Outrun aesthetic across web and mobile applications. This guide details the core principles, including dark mode backgrounds, glowing neon accents (magenta, cyan), and the signature perspective grid. It provides technical examples using CSS, SwiftUI, Flutter, and React Native to achieve authentic retro-futuristic visual fidelity.

A comprehensive skill for building beautiful, accessible, and production-ready user interfaces. It combines the modularity of shadcn/ui components (built on Radix UI), the utility-first flexibility of Tailwind CSS, and the visual power of canvas-based design systems. Use this skill for implementing complete design systems, creating responsive layouts, managing themes (including dark mode), and generating polished visual assets across multiple applications.