Skill UI

Generates a comprehensive, long-form, single-page article optimized for editorial reading. Ideal for developing high-quality blog posts, case studies, or detailed essays. The skill enforces structured design elements, including mastheads, hero images, pull quotes, figures, and related content sections, resulting in a professional, magazine-like aesthetic.

This skill performs a rigorous, 5-dimension expert critique on any digital artifact, such as landing pages, presentations, or prototypes. It systematically evaluates five critical areas—Philosophy, Visual Hierarchy, Detail Execution, Functionality, and Innovation—scoring each 0-10. The output is a comprehensive, evidence-backed HTML report providing actionable insights, a radar chart, and prioritized lists (Keep/Fix/Quick-wins) to guide systemic design improvements.

Generates a high-conversion, single-column HTML email optimized for product launches, newsletters, and brand announcements. This skill structures the email with key components including a masthead, hero image block, dynamic headline lockup, specifications grid, and a single primary CTA, ensuring a professional and cohesive marketing message.

Generates a sophisticated, long-form poster mimicking an editorial essay from a Sunday magazine or newsprint. This layout is highly type-driven, featuring oversized serif headlines, datelines, numbered content sections, and annotated pull-quotes. Use it when your brief requires a professional, journalistic, or manifesto-style aesthetic.

Create a single mobile app screen mockup framed in a realistic iPhone 15 Pro device. Use it for app UI concepts, phone screen previews, and prototype presentations.

Generate a comprehensive, multi-screen mobile onboarding prototype displayed in a side-by-side HTML format. This tool is perfect for designing the initial user experience (UX) flow, covering splash screens, value proposition details, and final sign-in steps. Ideal for apps needing a polished debut experience.

This skill generates a single, full-bleed, looping motion composition using only inline CSS animations. It functions as a high-fidelity poster frame, specifically designed to be captured by keyframe exporters (like HyperFrames or Lottie) to create animated hero videos, title cards, or video posters for marketing campaigns. Ideal for briefs requiring sophisticated 'motion design' or 'animated hero' assets.

Generate a cohesive three-panel social media carousel (1080x1080), designed for cinematic storytelling. Perfect for creating multi-part, on-brand content series for platforms like Instagram, LinkedIn, or X. The skill ensures the panels read as one continuous narrative while maintaining individual visual appeal.

Wraps any existing HTML artifact (landing page, dashboard, etc.) with a live sidebar panel of controls. This panel allows users to instantly adjust design variables—such as accent color, typography scale, layout density, and dark mode—by rewriting CSS custom properties in real time. All changes are persisted via localStorage, enabling continuous exploration and variant testing without losing state.

A general-purpose tool for creating self-contained, professional web prototypes. Ideal for generating landing pages, marketing sites, or documentation mockups. It operates by assembling pre-engineered sections and adhering strictly to a defined design system, eliminating the need for custom CSS writing.

Generates a low-fidelity, hand-drawn wireframe sketch perfect for communicating early design concepts. It meticulously mimics the look of marker drawings, sticky notes, and whiteboard scribbles on graph paper, ensuring the output reads like a preliminary ideation sketch rather than a finished UI. Ideal for use when the brief specifies 'lo-fi,' 'sketch,' or 'whiteboard.'

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.