Frontend Development Skill

Guide Blazor frontend development with MudBlazor design system patterns.

Updated Jan 23, 2026
One-click install
npx skills add https://github.com/wkallhof/pgl-qualifier --skill frontend-development-skill
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Frontend Development Skill
Source: https://github.com/wkallhof/pgl-qualifier/tree/main/.claude/skills/frontend-dev
Command: npx skills add https://github.com/wkallhof/pgl-qualifier --skill frontend-development-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill streamlines the creation of user interfaces for the PLG Lead Qualification Tool by enforcing adherence to the MudBlazor design system and project conventions, ensuring consistency and quality in frontend development.

Core Features & Use Cases

  • Component Development: Guides the creation of Blazor components, pages, and layouts.
  • Design System Adherence: Ensures all UI elements follow the MudBlazor design system for colors, typography, and spacing.
  • State Management UI: Provides patterns for implementing loading, empty, and error states.
  • Use Case: When building a new dashboard page, this skill will help you create reusable components like stat cards and data grids, ensuring they match the project's visual style and handle data loading gracefully.

Quick Start

Use the frontend development skill to create a new Blazor component for displaying lead qualification scores, following the MudBlazor design system guidelines.

Frequently Asked Questions about Frontend Development Skill

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

FAQPage Schema
How do I build Blazor components that follow the MudBlazor design system?

To build Blazor components with the MudBlazor design system, use semantic colors, consistent typography, and MudBlazor spacing classes. This skill guides component creation by enforcing project conventions and providing reusable patterns for stat cards, chips, and data grids.

What is the best way to handle loading and empty states in a MudBlazor data grid?

The best way to handle loading and empty states in a MudBlazor data grid is to apply the provided UI state patterns. This skill supplies specific design system patterns for loading, empty, and error conditions to ensure data displays gracefully.

How do I apply consistent typography and spacing across Blazor pages?

You apply consistent typography and spacing across Blazor pages by enforcing MudBlazor design system conventions. This skill guides you to use specific MudBlazor spacing classes and semantic colors to ensure visual consistency throughout your application.

Can I use this skill to create a dashboard with stat cards and data grids in Blazor?

Yes, you can use this skill to create a dashboard with stat cards and data grids in Blazor. It provides specific component examples and guides the creation of layouts that match MudBlazor visual styles and handle data loading gracefully.

Does MudBlazor support semantic colors for UI component design?

Yes, MudBlazor supports semantic colors for UI component design. This skill enforces the usage of semantic colors alongside consistent typography and spacing classes to ensure all components adhere to the design system conventions.