Skill UI

This utility allows developers to view, add, and modify design tokens (such as colors, spacing, typography, and shadows) within the StyleSeed design system. It ensures visual consistency by managing the synchronization of changes across JSON source files and corresponding CSS custom properties, supporting both light and dark mode variations.

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.

This skill generates a sophisticated, single-screen consumer dashboard mimicking a high-end lifestyle publication's dating column. It moves beyond simple swiping mechanics to visualize complex social metrics, mutual matches, and connectivity trends using editorial typography and restrained design. Ideal for concepts requiring data-driven storytelling about personal or community relationships.

Generate professional, single-file, horizontal-swipe HTML decks modeled after Replit Slides's visual system. Choose from eight distinct, comprehensive themes (e.g., helix, holm, atlas), each providing a complete visual identity (palette, typography, accents). Ideal for creating polished board reports, brand memos, product pitches, or long-form chapters with professional aesthetic consistency.

Per-page Codex review plus targeted python-pptx and Beamer fixes for existing academic talk decks: scales PPTX fonts to projector-readable size, resizes text frames, removes italic style leaks, fixes overflow, and aligns visual weight with a reference PDF.

StyleSeed is a comprehensive design judgment engine designed to elevate the aesthetic quality of AI-generated user interfaces. It codifies 69 visual rules covering color discipline, spatial rhythm, information hierarchy, and motion feedback. By integrating these principles, developers can ensure that AI output looks professionally designed and polished, rather than simply generated. Includes React components, Tailwind CSS implementation, and actionable design guidelines.

This skill provides comprehensive, expert-level guidelines for authoring robust design systems. It covers foundational style tokens, strict accessibility requirements (WCAG 2.2 AA), and detailed component anatomy (states, variants, interaction behavior). Use this to create implementation-ready documentation that ensures visual consistency and optimal user experience across all digital platforms.

An expert guide for creating comprehensive, implementation-ready design systems based on the Dramatic style. It provides strict rules on foundational tokens, component anatomy, interaction states, accessibility compliance (WCAG 2.2 AA), and documentation workflow, ensuring consistency and visual rigor for engineers and designers.

This skill provides comprehensive, expert guidelines for building a robust and accessible Glassmorphism design system. It offers actionable rules for engineers and designers, covering style foundations (typography, color, spacing), component anatomy, state management, and WCAG 2.2 AA accessibility requirements. Use it to ensure visual consistency, high performance, and modern elegance across all platforms.

Act as an expert guide for architecting comprehensive, implementation-ready design systems tailored for luxury brands. This skill generates structured guidelines covering style foundations, design tokens, component anatomy, state management, and rigorous accessibility criteria (WCAG). It ensures consistency, adherence to a high-end visual aesthetic, and provides actionable, code-review-ready documentation.

This expert skill guides the creation of comprehensive, highly structured, and implementation-ready design system guidelines based on Material Design principles. It ensures consistency across visual style, accessibility (WCAG 2.2 AA), and component behavior. The output is actionable documentation covering tokens, states, variants, and anti-patterns, suitable for guiding both engineers and designers.

This comprehensive guide provides expert, implementation-ready guidelines for building narrative-driven digital experiences. It covers foundational elements like visual style, typography, color tokens, and spacing, alongside strict component rules and accessibility standards (WCAG 2.2 AA). Use it to transform functional interfaces into emotionally resonant and memorable user journeys.