Design Ui Window
Helps with design, UI components as part of agent workflows workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add design-ui-window npx -- -y @trustedskills/design-ui-window
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"design-ui-window": {
"command": "npx",
"args": [
"-y",
"@trustedskills/design-ui-window"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill enables AI agents to design Avalonia UI/UX components for XerahS, focusing on visual consistency, usability, and adherence to established design principles. It specializes in refactoring existing UI elements while preserving core functionality and avoiding unintended changes to bindings or the public API of view models. The skill prioritizes following specific guidelines regarding window types (PageView, SurfaceWindow, dialogs, overlays) and utilizes shared theme resources for consistent styling.
When to use it
- When needing to ensure visual consistency across an XerahS application's UI.
- To refactor existing Avalonia UI components while maintaining their functionality.
- For designing new UI elements that adhere to XerahS’s established design playbook and theme resources.
- When troubleshooting black areas in the UI, indicating unpainted layout containers.
Key capabilities
- Avalonia UI/UX design expertise for XerahS applications.
- Refactoring of existing UI components without breaking functionality.
- Adherence to specific guidelines for window types and visual elements (e.g., overlays, root surfaces).
- Utilization of shared theme resources for consistent styling (e.g.,
SolidBackgroundFillColorSecondaryBrush). - Guidance on button styling, discouraging the default "accent" class unless explicitly needed.
Example prompts
- “Refactor this dialog window to ensure uniform spacing and alignment according to XerahS UI guidelines.”
- “Design a new page view for [specific feature] following the progressive disclosure of complexity principle.”
- “Identify why there are black areas in this window and suggest solutions based on the XerahS design playbook.”
Tips & gotchas
- The skill strictly follows instructions and avoids adding business logic or breaking existing bindings.
- Be mindful of overlay windows; avoid applying painted surfaces to them if transparency is intentional.
- Prioritize using shared theme resources instead of hardcoding colors for consistent styling across the application.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.