Claude-skill-registry frontend-dev

Build Blazor components, pages, and layouts following the MudBlazor design system

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/frontend-dev" ~/.claude/skills/majiayu000-claude-skill-registry-frontend-dev-b02624 && rm -rf "$T"

manifest: skills/data/frontend-dev/SKILL.md

Frontend Development Skill

Overview

This skill guides frontend development for the PLG Lead Qualification Tool, ensuring all Blazor components, pages, and layouts adhere to the established MudBlazor design system and project conventions.

When to Use

Invoke this skill when:

Creating new Blazor components
Building pages or layouts
Implementing UI features
Working with MudBlazor components
Adding loading states, empty states, or error handling UI

Core References

CRITICAL: Before writing any frontend code, read:

Document	Purpose
`docs/design-system.md`	MudTheme colors, component patterns, accessibility requirements
`docs/screens.md`	UI wireframes and component composition

Workflow

Step 1: Understand the Context

Read
```
docs/design-system.md
```
for theme and patterns
Read
```
docs/screens.md
```
for the specific screen wireframe
Check existing components in
```
Components/
```
for similar patterns

Step 2: Plan the Component

Before writing code, confirm:

Component location (Components/, Pages/, Shared/)
Parameter design
Which MudBlazor components to use
Loading, empty, and error states needed
Color usage for qualification status

Step 3: Implementation Checklist

Apply these rules from the design system:

Colors (MudBlazor)

Use MudBlazor semantic colors:

Color.Primary

Color.Success

Color.Warning

Color.Error

NEVER hardcode hex colors in components
Status colors per qualification:
- STRONG:
```
Color.Success
```
  (green)
- MODERATE:
```
Color.Warning
```
  (amber)
- WEAK/DISQUALIFIED:
```
Color.Error
```
  (red)
- Processing:
```
Color.Info
```
  (blue)

Typography

Use
```
Typo.*
```
enum for consistent text styling
Primary text:
```
Typo.body1
```
Secondary text:
```
Typo.body2
```
with
```
Color.Secondary
```
Headers:
```
Typo.h4
```
through
```
Typo.h6
```
Captions/labels:
```
Typo.caption
```

Spacing (MudBlazor Classes)

Use MudBlazor spacing classes:
```
pa-4
```
,
```
ma-2
```
,
```
mb-4
```
, etc.
Page padding:
```
pa-6
```
Card padding:
```
pa-4
```
Component spacing:
```
Class="mb-4"
```

MudBlazor Components

Cards:

<MudPaper Elevation="0" Class="border rounded-lg">

Tables:
```
<MudDataGrid>
```
with
```
Dense="true"
```
and
```
Hover="true"
```

Buttons:

<MudButton Variant="Variant.Filled" Color="Color.Primary">

Chips:

<MudChip Color="@color" Size="Size.Small" Variant="Variant.Filled">

Icons:

<MudIcon Icon="@Icons.Material.Filled.Name">

Loading:

<MudProgressLinear Indeterminate="true">

States

Loading:
```
MudProgressLinear
```
with
```
Indeterminate="true"
```
Empty: Centered
```
MudIcon
```
+
```
MudText
```
+ optional
```
MudButton
```
Error:
```
MudAlert
```
with
```
Severity.Error
```

Icons

Use Material Icons via

@Icons.Material.Filled.*

@Icons.Material.Outlined.*

Common icons:

Dashboard:
```
Icons.Material.Filled.Dashboard
```
People:
```
Icons.Material.Filled.People
```
Sync:
```
Icons.Material.Filled.Sync
```
Check:
```
Icons.Material.Filled.CheckCircle
```
Warning:
```
Icons.Material.Filled.Warning
```

Step 4: File Structure

Components/           # Reusable components
├── StatCard.razor
├── QualificationChip.razor
├── HotLeadsTable.razor
└── ScoreCard.razor

Pages/                # Page components
├── Index.razor       # Dashboard
├── Leads.razor       # Leads list
├── LeadDetail.razor  # Lead detail
└── SyncStatus.razor  # Sync monitoring

Shared/               # Layout components
└── MainLayout.razor

Component file pattern:

@* StatCard.razor *@

<MudPaper Elevation="0" Class="pa-4 border rounded-lg">
    <MudStack Spacing="1">
        <MudText Typo="Typo.caption" Class="text-secondary">@Title</MudText>
        <MudText Typo="Typo.h4" Class="font-weight-bold" Color="@TextColor">@Value</MudText>
    </MudStack>
</MudPaper>

@code {
    [Parameter]
    public string Title { get; set; } = "";

    [Parameter]
    public string Value { get; set; } = "";

    [Parameter]
    public Color TextColor { get; set; } = Color.Default;
}

Step 5: Verification

Before marking complete:

Uses MudBlazor semantic colors (no hardcoded hex)
Loading states implemented for async operations
Empty states for lists/collections
Error states handle failures gracefully
Qualification colors correct (green/amber/red)
Mobile responsive (MudBlazor handles most of this)

Quick Reference: Common Patterns

Stat Card

<MudPaper Elevation="0" Class="pa-4 border rounded-lg">
    <MudStack Spacing="1">
        <MudText Typo="Typo.caption" Class="text-secondary">@Title</MudText>
        <MudText Typo="Typo.h4" Class="font-weight-bold">@Value</MudText>
    </MudStack>
</MudPaper>

Qualification Chip

<MudChip Color="@GetQualificationColor(qualification)"
         Size="Size.Small"
         Variant="Variant.Filled">
    @qualification
</MudChip>

@code {
    private Color GetQualificationColor(string qualification) => qualification switch
    {
        "STRONG" => Color.Success,
        "MODERATE" => Color.Warning,
        "WEAK" => Color.Error,
        "DISQUALIFIED" => Color.Error,
        _ => Color.Default
    };
}

Loading State

@if (_loading)
{
    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mb-4" />
}
else if (_error != null)
{
    <MudAlert Severity="Severity.Error" Class="mb-4">@_error</MudAlert>
}
else
{
    @* Content here *@
}

Empty State

<MudPaper Elevation="0" Class="pa-8 text-center border rounded-lg">
    <MudIcon Icon="@Icons.Material.Filled.Inbox"
             Size="Size.Large"
             Color="Color.Secondary"
             Class="mb-4" />
    <MudText Typo="Typo.h6" Class="mb-2">No leads found</MudText>
    <MudText Typo="Typo.body2" Color="Color.Secondary" Class="mb-4">
        Leads will appear here once contacts are synced and evaluated.
    </MudText>
</MudPaper>

Data Grid with Row Click

<MudDataGrid Items="@_leads"
             Dense="true"
             Hover="true"
             RowClick="@OnRowClick"
             T="LeadViewModel">
    <Columns>
        <PropertyColumn Property="x => x.Name" Title="Name" />
        <PropertyColumn Property="x => x.Company" Title="Company" />
        <TemplateColumn Title="Status">
            <CellTemplate>
                <QualificationChip Qualification="@context.Item.Qualification" />
            </CellTemplate>
        </TemplateColumn>
    </Columns>
</MudDataGrid>

@code {
    private void OnRowClick(DataGridRowClickEventArgs<LeadViewModel> args)
    {
        NavigationManager.NavigateTo($"/leads/{args.Item.Id}");
    }
}

Score Card (Lead Detail)

<MudPaper Elevation="0" Class="pa-6 text-center border rounded-lg">
    <MudText Typo="Typo.h2" Color="@GetScoreColor(score)" Class="font-weight-bold">
        @score
    </MudText>
    <MudText Typo="Typo.caption" Color="Color.Secondary">
        AI Qualification Score
    </MudText>
</MudPaper>

@code {
    private Color GetScoreColor(int score) => score switch
    {
        >= 80 => Color.Success,
        >= 50 => Color.Warning,
        _ => Color.Error
    };
}

Do NOT

Hardcode hex colors (use MudBlazor Color enum)
Skip loading/error/empty states
Use custom CSS when MudBlazor provides the same functionality
Forget to inject NavigationManager for routing
Use synchronous data fetching in OnInitialized (use OnInitializedAsync)
Create components without parameters for reusability