Skill UI

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Visits target URLs to capture screenshots and inspect pages, then extracts palettes, typography, layouts, and repeatable UI patterns so design teams can document inspiration for new projects.

Automates Mermaid Gantt chart creation and guidance for diagrams, best practices, and production-ready outputs, ensuring clear visual documentation for presentations and project planning.

Research current UI/UX visual trends from Dribbble and related design communities to inform color, typography, layout, and interaction choices before starting a project.

A comprehensive skill for generating multimodal media content using fal.ai models. It supports text-to-image (Nano Banana), text/image-to-video (Veo, Kling, Seedance), and text/video-to-audio (CSM-1B, ThinkSound). Use this tool for any creative project requiring high-quality generated images, videos, or sound effects.

Upgrades existing websites and apps to premium quality by auditing typography, color, layout, and UI patterns, then applying targeted tweaks within the current stack without rewrites.

Automates Figma workflows via Composio's Rube MCP client, covering file inspection, exports, design token extraction, comments, and project browsing while enforcing tool discovery first.

This skill acts as an expert Design Systems Lead, analyzing complex technical assets (HTML, CSS, screenshots) from existing projects. It synthesizes a comprehensive 'Semantic Design System' into a structured DESIGN.md file. This output serves as the authoritative 'source of truth' for AI prompting, ensuring that any new UI generated by tools like Stitch adheres perfectly to the established visual language, color palette, and component standards.

This skill provides expert-level, comprehensive guidelines for building a cohesive and playful design system, optimized for landing pages and creative projects. It defines foundational elements using semantic tokens, covering typography, color palettes, and spacing. The system mandates WCAG 2.2 AA accessibility, defining rigorous component anatomy, interaction states, and detailed authoring workflows to ensure both aesthetic appeal and cross-platform usability.

Provides comprehensive guidelines and code examples (CSS, SwiftUI, Flutter) for implementing modern, dynamic gradient designs. Ideal for projects needing vibrant transitions, animated backgrounds, and an energetic, contemporary aesthetic. Learn how to apply complex color blending to backgrounds, text, and borders across major platforms.

Generate highly cinematic and vintage-styled opening frames or chapter cards for films and documentaries. This template simulates the authentic look of analog film using light leak effects, 35mm grain noise, and classic letterboxed aspect ratios (2.39:1 or 16:9). Perfect for giving your video project an immediate, professional, and nostalgic film quality.

A professionally designed, minimalist A4 single-page resume template. Features a modern two-column layout (60/40 split) for organizing work experience, skills, and projects. Optimized for printing or PDF export, using clean typography and subtle color accents to highlight professional achievements.