converting-html-css-to-wpf-xamllisted

Converts HTML/CSS to WPF CustomControl XAML with correct patterns and common pitfall solutions. Use when transforming web designs to WPF, converting CSS animations to Storyboards, implementing CSS border-radius clipping, CSS pseudo-elements (::before/::after), or CSS transforms in XAML.
christian289/dotnet-with-claudecode · ★ 41 · Web & Frontend · score 76

Install: claude install-skill christian289/dotnet-with-claudecode

# HTML/CSS → WPF XAML 변환 가이드 ## CSS → WPF 핵심 매핑 테이블 | CSS | WPF 구현 방법 | 참조 | | ------------------------------------ | -------------------------------------------------------------- | --------------------------------------- | | `overflow: hidden` + `border-radius` | `Border.Clip` + `RectangleGeometry` (RadiusX/Y + MultiBinding) | [clipping.md](references/clipping.md) | | `position: absolute` (회전 요소) | `Canvas` + `Canvas.Left/Top` | [layout.md](references/layout.md) | | `animation-duration: 3s` | `Duration="0:0:3"` 인라인 | [animation.md](references/animation.md) | | `height: 130%` (회전 요소) | Converter로 동적 계산 (배율 2.0) | [transform.md](references/transform.md) | | `::before`, `::after` | Canvas 내 요소, 선언 순서로 z-order | [layout.md](references/layout.md) | | `z-index` | 선언 순서 또는 `Panel.ZIndex` | [layout.md](references/layout.md) | | 중앙 정렬 콘텐츠 | Canvas 밖 Grid에서 Alignment 적용 | [layout.md](references/layout.md) | | `spacing` | Maring 속성으로 대체 | - | ## 핵심 규칙 요약 ### 1. D