How are CSS pseudo-elements like ::before and ::after handled?

They are implemented as child elements within a Canvas or Grid, utilizing XAML's declaration order or the Panel.ZIndex property to maintain the correct visual layering and z-index.

Can I convert CSS animations with this skill?

Yes, it provides specific patterns for mapping CSS animation properties to WPF Storyboards, emphasizing inline Duration settings which are required for reliable XAML execution.

How does this skill handle CSS overflow:hidden in WPF?

It uses a combination of Border.Clip and RectangleGeometry with MultiBinding to ensure content is clipped correctly according to the CornerRadius, solving the common WPF 'bleeding' issue.

Does it support CSS absolute positioning?

Yes, absolute positioning is mapped to WPF Canvas layouts using Canvas.Left and Canvas.Top properties, providing the most accurate translation for fixed-coordinate web designs.

HTML/CSS to WPF XAML Converter

Name: HTML/CSS to WPF XAML Converter
Author: christian289

bychristian289

•

Herramientas de Diseño

Transforms web-based HTML and CSS designs into production-ready WPF CustomControl XAML patterns.

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.

Características Principales

01Maps CSS layout properties like absolute positioning and z-index to WPF Canvas and Grid systems

02Implements complex CSS clipping and border-radius effects using MultiBinding and RectangleGeometry

03Provides ready-to-use ValueConverter patterns for dynamic scaling and complex coordinate transformations

04Replicates web-specific styling like pseudo-elements (::before/::after) using XAML layering and Z-order

05Converts CSS keyframe animations into WPF Storyboards with optimized inline duration patterns

066 GitHub stars

Casos de Uso

01Porting a web-based design system or dashboard to a native Windows WPF desktop application

02Converting complex web animations and transitions into hardware-accelerated WPF Storyboards

03Implementing modern CSS-style rounded clipping and overflow behaviors in WPF CustomControls

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add christian289/dotnet-with-claudecode converting-html-css-to-wpf-xaml

For use in Claude.ai and ChatGPT

Download Skill