Skill UI

Frontend Slides Designer generates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint decks, ensuring viewport-fitted slides with distinctive aesthetics for pitch decks, tutorials, or showcases.

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 is deprecated and superseded by /paper-poster-html. It was designed to generate academic posters using legacy LaTeX pipelines. Users must immediately switch to the updated HTML/CSS pipeline for current functionality and to avoid errors. Do not use this skill for new posters.

This skill helps enhance the robustness of data-dependent user interfaces (UIs) by implementing the four critical feedback states: loading, empty, error, and success. It ensures that applications provide clear, graceful, and actionable feedback regardless of data fetching status, making the product reliable and user-friendly.

This skill is designed to comprehensively edit and improve existing articles. It first analyzes the content, dividing it into logical sections based on headings and considering the dependencies between information points. Subsequently, it rewrites each section to enhance clarity, coherence, and flow, ensuring the prose is tighter and more professional. Use this when you need to revise a draft, academic paper, or long-form content.

This comprehensive guide provides core principles and implementation patterns for adopting the Flat Design aesthetic. It details how to build interfaces across web (CSS), mobile (SwiftUI, Flutter), and cross-platform frameworks, emphasizing zero depth, sharp geometries, and high-contrast solid colors while strictly avoiding shadows, gradients, and bevels. Use this when aiming for a modern, minimalist, and clean UI/UX experience.

A comprehensive guide for implementing Flat Design 2.0 (Semi-Flat). This style maintains the clean, solid aesthetic of flat design while introducing subtle, diffuse shadows and micro-gradients to enhance perceived depth and communicate element interactability (e.g., buttons, cards). It provides detailed, cross-platform code examples for Web (CSS), iOS (SwiftUI), Flutter, and React Native.

This guide details the principles and implementation techniques for Skeuomorphism—the design style that makes digital interfaces resemble real-world physical objects. It covers core principles like realistic textures (wood, leather), physical lighting, depth, and real-world metaphors. Provides detailed code examples for Web (CSS), iOS (SwiftUI), and Android (Flutter) to achieve highly realistic, tactile UI elements.