Skill UI

Provides structured guidance for distinctive, intentional visual design of frontend interfaces. Helps break generic AI-style patterns by grounding choices in subject matter, typography, and visual structure. Useful for designers and developers building new UI or reshaping existing interfaces with a unique aesthetic direction.

This skill guides the creation of world-class, immersive web designs, aiming for Awwwards-level quality. It emphasizes intentional typography, purposeful motion, and sophisticated visual composition. Users can leverage the detailed scoring rubric (Typography, Composition, Motion, etc.) to review and elevate existing designs, ensuring every pixel is deliberate and performance-optimized.

Guides frontend designer-engineers to deliver memorable, production-ready interfaces by defining an aesthetic stance, scoring feasibility with DFII, and translating every intentional decision into code, typography, motion, and texture.

Craft production-ready frontend pages, dashboards, or components with a clear visual point of view; focus on typography, color, motion, and layout so the experience feels intentional instead of generic.

An elite skill dedicated to generating premium, app-native, and highly readable UI/UX concept images. It visualizes entire application flows—from onboarding and authentication to complex dashboards—for iOS, Android, and cross-platform products. The focus is on creating believable, highly intentional designs with strong consistency, controlled color palettes, and clean hierarchies, avoiding generic, default-style mockups.

This comprehensive guide helps elevate a UI from merely functional to polished, purposeful, and aesthetically coherent with its domain. It dictates pre-coding design choices, such as defining the audience, tone (e.g., minimal, industrial), and purpose. It provides rigorous guidelines on establishing visual hierarchy, typography, color palettes, and interactions, ensuring the final product feels intentional and professional, rather than generic or templated.

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.

A comprehensive guide for implementing the raw, highly structured, and intentionally unfinished Brutalist aesthetic across web, mobile (SwiftUI, Flutter), and cross-platform applications. Learn to utilize stark borders, monospace fonts, high contrast colors, and system defaults to achieve a non-conventional, anti-polished design look.

A comprehensive skill guide for defining the core intent, tone, and strategic direction of any frontend design. It applies rigorous cross-domain principles drawn from architecture, cinema, marketing, and automotive design. Use this before coding to establish purpose, visual hierarchy, and intentional structure, ensuring every design element is deliberate and highly crafted.

This comprehensive guide helps elevate a UI from merely functional to polished, purposeful, and aesthetically coherent with its domain. It dictates pre-coding design choices, such as defining the audience, tone (e.g., minimal, industrial), and purpose. It provides rigorous guidelines on establishing visual hierarchy, typography, color palettes, and interactions, ensuring the final product feels intentional and professional, rather than generic or templated.

This skill provides the creative direction layer for video production, focusing on *what* the content should feel like, not just *how* to render frames. It distills complex visual aesthetics (such as angelcore, cloud-trance, or hyperpop) into actionable mood, color palettes, and rhythmic editing grammars. Use it when building music videos, stylistic reels, or guiding AI b-roll generation that must maintain a unified, intentional visual narrative.

Hallmark is a specialized design skill engineered for AI coding assistants. It enforces deep structural variety and aesthetic sophistication, ensuring generated UIs look professionally 'made' rather than generically templated. Users can invoke Hallmark to build new pages (default), audit existing designs for anti-patterns, redesign components while preserving intent, or extract the 'DNA' (structure, archetypes, color) from existing URLs or screenshots for reference.