Skill UI

This framework analyzes foundational design principles—such as affordances, signifiers, and conceptual models—to create products that are highly intuitive and discoverable. It guides analysis by bridging the 'Gulf of Execution' and the 'Gulf of Evaluation.' Use this when diagnosing confusing user interfaces, poor usability, or needing to ensure a product is robustly human-centered and easy to understand.

This framework outlines the 'Hook Model' (Trigger, Action, Variable Reward, Investment) for building deeply engaging, habit-forming product loops. It guides designers in optimizing user retention, understanding behavioral psychology, and structuring product features to move users from deliberate usage to automatic, routine behavior. Use it for onboarding, feature design, and improving long-term user stickiness.

A comprehensive, systematic framework for auditing and improving web UI designs and frontend code. It teaches core principles like grayscale-first design, constrained scaling (for spacing, type, and color), and establishing clear visual hierarchy. Use this guide when needing to refine an existing UI that 'looks off,' or requires professional structural and aesthetic improvements.

This framework provides a systematic guide for evaluating and improving user interface usability based on established heuristic principles. It covers core concepts like 'Don't Make Me Think' and 'Get Rid of Half the Words,' helping users conduct detailed usability audits, analyze navigation flow, and optimize copy. Use this when reviewing a product's user experience, addressing user confusion, or performing a formal UX review to enhance clarity and efficiency.

HyperFrames is a comprehensive framework that treats HTML as the source of truth for video production. It allows users to create complex video compositions, including animated title cards, dynamic captions synced to audio, advanced text-to-speech narratives, and sophisticated audio-reactive visuals (like beat synchronization). The tool manages the entire video workflow, from composition authoring and timing to scene transitions (crossfades, wipes) and final rendering.

This comprehensive guide acts as an expert framework for developing a complete, accessible design system using Neumorphism principles. It provides structured instructions covering visual foundations, design tokens, component states (default, hover, error, etc.), accessibility requirements (WCAG 2.2 AA), and content standards, ensuring engineers and designers build consistent and highly usable interfaces.

A specialized writing tool for generating Chinese critical essays, public commentaries, and concept essays based on the CrossFrame framework. It structures analysis, concept mapping, and evidence boundaries before drafting high-quality, long-form articles.

This advanced skill provides highly structured and actionable feedback on any digital or physical design. It applies professional UX frameworks, including Nielsen's Heuristics, Gestalt principles, and Jobs-to-be-Done (JTBD), to evaluate usability, identify critical issues, and provide prioritized, specific recommendations. Ideal for reviewing wireframes, UI screens, user flows, and assessing product completeness.

Generates a comprehensive and actionable UX research plan for any product feature or question. This skill covers the entire research lifecycle, including defining objectives, selecting methodology (e.g., usability testing, interviews), creating participant screeners, writing discussion guides, and structuring a synthesis framework. Ideal for product managers and UX researchers needing a structured approach to validate assumptions and drive design decisions.

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 comprehensive guide provides core principles and implementation patterns for adopting the Flat Design aesthetic. It details how to build interfaces across web (CSS), mobile (SwiftUI, Flutter), and cross-platform frameworks, emphasizing zero depth, sharp geometries, and high-contrast solid colors while strictly avoiding shadows, gradients, and bevels. Use this when aiming for a modern, minimalist, and clean UI/UX experience.

A comprehensive framework for creating structured, clean, and highly accessible design systems. It defines foundational constraints, typography scales, color tokens, and component-level rules, ensuring consistency and usability across engineering and design teams. Focuses on achieving WCAG 2.2 AA compliance and implementation readiness.