semi-wpfui-layouts
Provides custom layout controls for WPF demo pages. Standardizes spacing and grouping in XAML.
Install
mkdir -p .claude/skills/semi-wpfui-layouts && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18281" && unzip -o skill.zip -d .claude/skills/semi-wpfui-layouts && rm skill.zipInstalls to .claude/skills/semi-wpfui-layouts
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use Semi.WpfUi custom layout controls when building or migrating WPF demo pages and control examples in this repository. Apply when editing XAML under demo/Semi.WpfUi.Demo or composing layouts for Semi.WpfUi controls, especially where WPF Margin is being used only to create spacing between siblings.Key capabilities
- →Use `semi:StackPanel` for linear layouts
- →Set `Spacing` for sibling gaps in `semi:StackPanel`
- →Use `semi:Grid` for row and column layouts
- →Set `RowSpacing` and `ColumnSpacing` in `semi:Grid`
- →Use `semi:Panel` for children sharing available bounds
- →Apply container `Padding` for internal insets
How it works
The skill guides the use of `Semi.WpfUi` custom layout controls like `semi:StackPanel` and `semi:Grid` to manage spacing and layout in WPF demo XAML, replacing traditional `Margin` usage.
Inputs & outputs
When to use semi-wpfui-layouts
- →Building demo pages in WPF
- →Migrating UI layouts to Semi.WpfUi
- →Standardizing control spacing
About this skill
Semi.WpfUi layout controls
Use the controls from Semi.WpfUi.Controls in demo XAML:
xmlns:semi="clr-namespace:Semi.WpfUi.Controls;assembly=Semi.WpfUi"
Choose the layout
- Use
semi:StackPanelfor a linear layout. SetSpacingfor sibling gaps instead of per-childMargin. - Use
semi:Gridwhen rows or columns are required. SetRowSpacingandColumnSpacinginstead of spacer rows, columns, or sibling margins. Continue using normal WPF row and column definitions and attached placement properties. - Use
semi:Panelfor children that should share the same available bounds and do not need row, column, or sequential layout.
Demo-page rules
- Prefer a page-level
semi:StackPanel Spacing="..."to separate headings and sections. - Prefer nested
semi:StackPanel Spacing="..."for fields, labels, and examples within a section. - Use container
Paddingfor a component's internal inset, such asGroupBox Padding="16". - Retain
Marginonly when it expresses an external layout requirement that the custom layouts cannot represent, such as page placement or an intentional one-off offset. Do not use it solely as a sibling gap. - Keep the examples focused on the control being demonstrated; do not add unsupported Avalonia-only properties or class names when migrating an Avalonia demo.
Example
<GroupBox Padding="16" Header="States">
<semi:StackPanel Spacing="12">
<semi:TextBox PlaceholderText="Default" />
<semi:TextBox IsEnabled="False" PlaceholderText="Disabled" />
</semi:StackPanel>
</GroupBox>
When not to use it
- →When the layout requires WPF `Margin` for external layout requirements
- →When building layouts outside of WPF demo pages or control examples in this repository
- →When the user wants to use standard WPF layout controls without `Semi.WpfUi`
Limitations
- →Applies only to XAML under `demo/Semi.WpfUi.Demo`
- →Focuses on replacing `Margin` used solely for sibling gaps
- →Does not add unsupported Avalonia-only properties
How it compares
This workflow standardizes spacing and layout using `Semi.WpfUi` controls, offering a more consistent and maintainable approach than manual `Margin` adjustments in WPF.
Compared to similar skills
semi-wpfui-layouts side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| semi-wpfui-layouts (this skill) | 0 | 16d | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 4mo | Review | Intermediate |
| svg-precision | 527 | 3mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".