skills.rest
svkaenel
svkaenelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

project-xy-design-guide

Standardize UI design and brand usage for ASP.NET Razor Pages projects.

Updated Feb 20, 2026
Search Tags:#typography#tailwind#responsive-design#design-patterns#ui-components#brand-guidelines#razor-pages
One-click install
npx skills add https://github.com/svkaenel/dotnet-with-claude-code --skill project-xy-design-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: project-xy-design-guide
Source: https://github.com/svkaenel/dotnet-with-claude-code/tree/main/skills/project-xy-design-guide
Command: npx skills add https://github.com/svkaenel/dotnet-with-claude-code --skill project-xy-design-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams and AI agents struggle to maintain consistent UI across ASP.NET Razor Pages sites; this skill provides a centralized guide to enforce brand aesthetics, patterns, and responsive layouts.

Core Features & Use Cases

  • Establish brand colors, typography, spacing, and component patterns for common UI elements such as buttons, cards, forms, and hero sections.
  • Provide reusable patterns, templates, and validation guidance for responsive layouts, gradient overlays, and animations.
  • Use Case: When creating new Razor pages or partials, apply the guide to ensure consistent visuals and interactions across the site.

Quick Start

Apply the Project XY Design Guide conventions to new Razor pages, using the primary color, typography, and the mandatory !rounded-button rule on all UI components.

Frequently Asked Questions about project-xy-design-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain consistent UI design across ASP.NET Razor Pages?▼

To maintain consistent UI design across ASP.NET Razor Pages, apply a centralized design guide defining brand colors, typography, and component patterns for buttons, cards, forms, and navigation.

What are the brand guidelines for Project XY typography and colors?▼

Project XY brand guidelines specify a primary color (#282824), a secondary color (#BC002D), and typography using Open Sans for body text and Noto Sans JP for headings.

How do I apply the !rounded-button rule when creating new Razor pages?▼

To apply the !rounded-button rule in Razor pages, enforce rounded corners on all UI components and buttons by following the standardized patterns and examples documented in the design guide.

Does this design guide support responsive layouts and Tailwind CSS?▼

Yes, the design guide supports responsive layouts and Tailwind CSS by providing reusable patterns, templates, and validation guidance for responsive behavior, gradient overlays, and animations.

Can I use this UI component guide for partials and hero sections?▼

Yes, you can use this UI component guide for partials and hero sections, as it provides standardized patterns and templates for common UI elements to ensure consistent site visuals.

What's the best way to standardize forms and cards in ASP.NET Razor Pages?▼

The best way to standardize forms and cards in ASP.NET Razor Pages is to apply centralized design conventions for spacing, typography, and brand colors, ensuring consistent visuals across the site.

Related Skills

Explore More Design & Creative Skills→
nirukk52nirukk52
1

e2e-testing

Automate ScreenGraph end-to-end UI validation with Playwright and .env configuration.

Community
Intermediate
CornjebusCornjebus
1

UX Designer

Provide UI/UX design guidance with WCAG 2.1 AA accessibility and responsive layouts.

Community
Basic
systempromptiosystempromptio
2

component-patterns

Provide reusable CSS and HTML component patterns for consistent UI layouts.

Official
Advanced
sanky369sanky369
29

creative-strategist

Define brand visual direction and generate mood boards and style guides.

Community
Advanced