Skill UI

A multi-agent framework integrating styles and insights from 31 world-renowned directors to assist screenwriting, visual style design, and narrative decisions through sequential chains, debate voting, and chair board collaboration modes.

Turns product data, packaging, target platform and audience into executable e-commerce visual plans: conversion strategy, style lock, main-image and PDP storyboards, in-image copy, image prompts and compliance checks for Taobao, Amazon, TikTok Shop and more.

This skill generates high-quality, styled code screenshots by calling the ray.tinte.dev API. It allows users to convert raw code snippets into professional PNG images, supporting multiple programming languages (e.g., Python, JavaScript, TypeScript), customizable themes, and various styling parameters like font size and padding. Use this when the user explicitly requests code images, code snippets as pictures, or mentions 'ray' to visualize code.

Automates the conversion of visual designs from Stitch into high-quality, modular React and Vite components. This skill ensures strict adherence to modern architectural standards, including logic isolation via custom hooks, data decoupling, and robust type safety using TypeScript. It manages complex workflows like network fetching, style guide synchronization, and multi-phase validation to generate production-ready frontend code.

This skill generates hand-drawn 16:9 article illustrations featuring the Grav character IP. It creates sparse annotations and clear visual metaphors for blog posts and technical content. Each illustration uses a consistent whiteboard-sketch style with a floating character as the active participant. Ideal for turning abstract concepts into memorable visual explanations without PPT infographics.

This skill provides a comprehensive guide for implementing Brutalist Typography in web and mobile applications. It focuses on aggressive layout decisions, oversized system fonts, and raw visual presentation. Users can apply this style to create bold, unpolished designs that break traditional grid systems and design conventions. Includes CSS, SwiftUI, Flutter, and React Native implementation examples.

This skill provides a guide for implementing the Cyber Y2K aesthetic, characterized by modern Y2K, holographic visuals, and glitch effects. It covers core principles like iridescent gradients, RGB split text, and tribal-tech vectors. Includes implementation code examples for Web (CSS), iOS (SwiftUI), and Flutter apps, featuring deep black backgrounds and fluid color palettes.

This skill covers core game art principles including visual style selection, asset pipeline management, and animation workflows. It guides decisions on art styles (pixel, 3D, flat), color theory, resolution scaling, and asset organization to ensure art serves gameplay effectively.

Convert Markdown documents into narrated MP4 videos with synchronized visuals and speech. Generates Marp slides, Edge-TTS narration, and combines them into a presentation-style video. Ideal for tutorials, reports, and presentations.

A comprehensive guide to implementing the Minimalism design aesthetic across web, iOS (SwiftUI), Flutter, and React Native. This style mandates generous whitespace, strict typography, and the elimination of visual clutter (like borders and shadows), ensuring that content remains the primary focus and the user experience feels clean and breathable.

Guides how to craft detailed prompts for Google Stitch so it generates high-quality web and mobile UI designs, covering specificity, visual style, multi-screen structure, platform targeting, and iterative refinement.

A comprehensive guide to implementing the Swiss Design (International Typographic Style). This style emphasizes absolute mathematical grids, clean sans-serif typography (like Helvetica), and asymmetrical layouts. It is ideal for users requiring highly structured, minimal, and objective visual communication across web and mobile platforms.