HTML/CSS to WPF XAML Converter

소개

This skill provides Claude Code with a specialized knowledge base for translating modern web design patterns into professional WPF (Windows Presentation Foundation) XAML. It addresses complex mapping challenges such as converting CSS border-radius clipping to RectangleGeometry, translating web animations into Storyboards, and replicating CSS pseudo-elements like ::before and ::after using Canvas and Z-ordering techniques. By bridging the gap between web and desktop styling, it ensures high-fidelity UI porting while avoiding common XAML pitfalls like static resource binding for durations and improper clipping behaviors.

주요 기능

• Maps CSS layout properties like absolute positioning and z-index to WPF Canvas and Grid systems
• Implements complex CSS clipping and border-radius effects using MultiBinding and RectangleGeometry
• Provides ready-to-use ValueConverter patterns for dynamic scaling and complex coordinate transformations
• Replicates web-specific styling like pseudo-elements (::before/::after) using XAML layering and Z-order
• Converts CSS keyframe animations into WPF Storyboards with optimized inline duration patterns
• 6 GitHub stars

사용 사례

• Porting a web-based design system or dashboard to a native Windows WPF desktop application
• Converting complex web animations and transitions into hardware-accelerated WPF Storyboards
• Implementing modern CSS-style rounded clipping and overflow behaviors in WPF CustomControls