Skill UI

A comprehensive skill for creating, editing, and automating vector graphics and technical diagrams using LibreOffice Draw. It supports the native ODG format and facilitates seamless format conversion between ODG, SVG, PDF, PNG, and JPG. Ideal for generating flowcharts, organizational charts, and technical schematics, and for batch processing graphics operations via command-line or Python UNO scripting.

Guides creating memorable interactive portfolios that win jobs and clients by balancing experience design, conversion psychology, and tailored storytelling for developers and creatives.

This skill guides the creation of world-class, immersive web designs, aiming for Awwwards-level quality. It emphasizes intentional typography, purposeful motion, and sophisticated visual composition. Users can leverage the detailed scoring rubric (Typography, Composition, Motion, etc.) to review and elevate existing designs, ensuring every pixel is deliberate and performance-optimized.

Build immersive, cinematic, and premium 2.5D interactive websites using advanced scroll storytelling, parallax depth, and text animations. This skill simulates high-end web design effects (like Apple's product pages) using only static assets, CSS, and JavaScript, eliminating the need for WebGL or complex 3D software. Use it for landing pages, product sites, and any section requiring a deep, cinematic feel.

This skill applies principles of behavioral psychology and choice architecture to redesign user experience (UX) flows. It is used when a product's conversion friction is rooted in interaction design, not just copy. By auditing cognitive load, defining optimal default paths, and inserting strategic commitment points, it guides users toward desired actions ethically, maximizing commitment while preserving autonomy. Ideal for improving onboarding, checkout funnels, and complex decision-making sequences.

This skill acts as a Visual Psychologist and Environmental Researcher, guiding the systematic mapping of visual elements—including color, typography, spacing, and imagery—to desired emotional states and conversion goals. It ensures that design decisions are strategic, supporting persuasion and brand narrative rather than merely being decorative. Use it when you need visuals to evoke a specific feeling (e.g., trust, urgency, calm) for a defined target audience, while respecting cultural and accessibility constraints.

This skill acts as an elite art director, generating highly structured, premium, and conversion-aware frontend design references. It is optimized for creating multi-section websites, landing pages, and marketing sites, ensuring consistency and visual appeal across every section. Output is designed to be immediately usable by developers or coding models, adhering to strict composition rules to avoid generic AI aesthetics.

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.

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.

This skill guides the user to become an expert in authoring comprehensive, implementation-ready design system guidelines for an immersive, exhibit-style brand. It teaches how to structure rules covering design tokens, component anatomy, interaction states, accessibility requirements (WCAG 2.2 AA), and anti-patterns, ensuring consistency across all digital products.