converting-html-css-to-wpf-xaml

Solid

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.

Web & Frontend 40 stars 6 forks Updated 6 days ago MIT

Install

Quality Score: 81/100

Stars 20%

54

Recency 20%

100

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

80

License 10%

100

Description 5%

100

Skill Content

# 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...

Details

Author: christian289
Repository: christian289/dotnet-with-claudecode
Created: 7 months ago
Last Updated: 6 days ago
Language: C#
License: MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

creating-wpf-animations

Creates WPF animations using Storyboard, Timeline, and EasingFunction patterns. Use when implementing UI transitions, state change visualizations, or interactive feedback effects.

40 Updated 6 days ago

Web & Frontend Solid

frontend-design

Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).

138 Updated today

Data & Documents Featured

wpf

Build and modernize WPF applications on .NET with correct XAML, data binding, commands, threading, styling, and Windows desktop migration decisions. USE FOR: working on WPF UI, MVVM, binding, commands, or desktop modernization; migrating WPF from .NET Framework to .NET; integrating newer Windows capabilities into a WPF app. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.

463 Updated 2 days ago