Skill UI

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

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.

Transforms vague UI ideas into structured, Stitch-optimized prompts by adding platform context, UI/UX keywords, design system cues, and detailed page structure guidance so generated interfaces stay consistent and polished.

Automate creation of polished walkthrough videos by feeding Stitch project screens into Remotion compositions, adding smooth transitions, zooms, and contextual overlays to showcase apps for demos or product updates.

Autonomous frontend builders follow a Stitch-driven baton loop to read prompts, generate and integrate pages, refresh documentation, and hand off the next task for continuous site evolution.

Uses YARA rules to rapidly classify malware samples, author detection logic from strings or byte patterns, and stitch scans into automated triage or hunting pipelines for known threats.

Generates Stitch-friendly DESIGN.md blueprints that encode premium anti-slop UI rules—color calibration, typography, layouts, motion, and component behaviors—so agents can produce high-agency screens for Google Stitch.

This specialized skill automates the process of converting visual designs (from Stitch) into high-quality, modular React and Vite components. It adheres to modern frontend best practices, enforcing logic isolation via custom hooks, data decoupling using mock data files, and ensuring type safety with TypeScript interfaces. The workflow includes automated asset fetching, style mapping (Tailwind), and rigorous validation cycles to produce production-ready, maintainable code.