skills.rest
erymuzuan
erymuzuanCOMMUNITY
Explore all skills by this author →
GitHub

blazor-development

Implement localized Blazor components with loading skeletons and CSS isolation.

Updated Jan 7, 2026
Search Tags:#components#localization#loading#blazor#css-isolation#razor#loading-skeleton
One-click install
npx skills add https://github.com/erymuzuan/motorent --skill blazor-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blazor-development
Source: https://github.com/erymuzuan/motorent/tree/main/.copilot/skills/blazor-development
Command: npx skills add https://github.com/erymuzuan/motorent --skill blazor-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Blazor development projects often struggle with consistent component architecture, localization integration, and reliable loading states. This Skill provides standardized patterns and examples to align teams on best practices.

Core Features & Use Cases

  • Component and localization conventions: Inherit from LocalizedComponentBase<T>, use Resources for .resx localization, and apply MotoRent UI components.
  • Loading pattern: Implement a robust loading pattern with a Loading boolean and try/finally, plus LoadingSkeleton modes for tables, cards, and text.
  • CSS isolation and theming: Uses .razor.css files, Tabler theme variables, and safe theme-aware styling with CSS isolation.
  • Use Case: Build modular Blazor features (e.g., motorbike lists, detail pages) with consistent structure and theming.

Quick Start

Create a Blazor page using LocalizedComponentBase and a Loading state, then wrap data rendering with a LoadingSkeleton as described.

Frequently Asked Questions about blazor-development

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

FAQPage Schema
How do I implement consistent loading states in Blazor components?▼

Loading states in Blazor components use a boolean Loading flag within a try/finally block, rendering LoadingSkeleton modes for tables, cards, and text to provide consistent loading UX.

What is the best way to add localization to Blazor server-side applications?▼

Blazor server-side localization is handled by inheriting components from LocalizedComponentBase<T> and using .resx resource files to ensure consistent localized UI rendering.

How does CSS isolation work with theme-aware styling in Blazor?▼

CSS isolation in Blazor uses .razor.css files combined with Tabler theme variables to apply safe theme-aware styling, preventing style leakage across modular UI components.

Do I need specific frontmatter structure for Blazor razor pages?▼

Blazor razor pages require strict structural conventions for frontmatter and optional resources to align with component-based architecture and theme-aware styling standards.

Can I use LoadingSkeleton for different UI layouts like cards and tables?▼

LoadingSkeleton supports multiple UI layouts including tables, cards, and text modes to provide flexible loading UX patterns during asynchronous Blazor data operations.

Related Skills

Explore More Software Engineering Skills→
AGIBuildAGIBuild
10

dotnet-blazor-testing

Test Blazor components with bUnit for in-memory rendering and assertion.

Community
Intermediate
afonsoftafonsoft
1

abp-blazor

Provide reusable base classes and UI patterns for ABP Blazor components.

Community
Intermediate
Markson22Markson22

reversa-design-system

Extract design tokens and documentation from CSS, theme files, and screenshots.

Community
Intermediate
vallafedericovallafederico

solidstart-client-only

Render SolidJS components client-side with lazy loading and fallback UI.

Community
Intermediate