🎯

converting-html-css-to-wpf-xaml

🎯Skill

from christian289/dotnet-with-claudecode

What it does

converting-html-css-to-wpf-xaml skill from christian289/dotnet-with-claudecode

converting-html-css-to-wpf-xaml

Installation

Install skill:

npx skills add https://github.com/christian289/dotnet-with-claudecode --skill converting-html-css-to-wpf-xaml

AddedJan 27, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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. Duration은 항상 인라인

```xml

```

2. 둥근 모서리 클리핑은 Border.Clip + RectangleGeometry

```xml

```

3. 회전 요소는 Canvas 내 배치

```xml

```

4. ContentPresenter는 Canvas 밖 Grid에 배치

```xml

```

참조 문서

| 파일 | 내용 |

| ---------------------------------------------------------- | ------------------------------------------------------- |

| [references/index.md](references/index.md) | 전체 케이스 목록 (빠른 검색용) |

| [references/clipping.md](references/clipping.md) | 클리핑 관련 실수 (Grid.Clip, OpacityMask, ClipToBounds) |

| [references/animation.md](references/animation.md) | 애니메이션/Duration 관련 |

| [references/layout.md](references/layout.md) | Canvas/Grid/정렬, pseudo-element 관련 |

| [references/transform.md](references/transform.md) | 회전/높이 계산 관련 |

| [references/converters.md](references/converters.md) | 필수 Converter 패턴 |

| [references/case-template.md](references/case-template.md) | 새 케이스 추가용 템플릿 |

More from this repository7

🏪

christian289-dotnet-with-claudecode🏪Marketplace

.NET development plugins for Claude Code - WPF, AvaloniaUI, and more

🔌

wpf-dev-pack🔌Plugin

Enhances WPF development by providing a comprehensive Claude Code extension with 57 skills, 11 specialized agents, and 5 commands for MVVM patterns, custom control design, and performance optimizat...

🎯

configuring-avalonia-dependency-injection🎯Skill

Configures dependency injection and GenericHost setup for AvaloniaUI applications, enabling service registration and IoC patterns.

🎯

structuring-avalonia-projects🎯Skill

Structures AvaloniaUI solutions with clear project naming conventions, layer separation, and dependency management for scalable .NET applications.

🎯

fixing-avaloniaui-radialgradientbrush🎯Skill

Resolves AvaloniaUI RadialGradientBrush compatibility by ensuring GradientOrigin and Center values are identical during WPF to AvaloniaUI conversion.

🎯

using-avalonia-collectionview🎯Skill

Enables advanced collection management in AvaloniaUI by providing filtering, sorting, and grouping capabilities using DataGridCollectionView and ReactiveUI.

🎯

designing-avalonia-customcontrol-architecture🎯Skill

Guides developers in designing robust, modular, and reusable custom control architectures for AvaloniaUI applications with best practices and architectural patterns.