skills.rest
mamu7211
mamu7211COMMUNITY
Explore all skills by this author →
GitHub

implement-ui

Implement Blazor WebAssembly UI pages using a shared component library.

1|Updated Mar 20, 2026
Search Tags:#ui#accessibility#frontend#components#bootstrap#blazor
One-click install
npx skills add https://github.com/mamu7211/feirb-mailclient --skill implement-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-ui
Source: https://github.com/mamu7211/feirb-mailclient/tree/main/.claude/skills/implement-ui
Command: npx skills add https://github.com/mamu7211/feirb-mailclient --skill implement-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses UI inconsistency and technical debt by enforcing the use of a centralized component library, ensuring that all new features adhere to the project's design system and accessibility standards.

Core Features & Use Cases

  • Component Enforcement: Automatically guides the implementation of UI using registered primitives like Buttons, Cards, and Icons instead of raw Bootstrap classes.
  • Accessibility & Responsiveness: Ensures all UI work meets WCAG AA standards and follows responsive design patterns using Bootstrap breakpoints.
  • Showcase Integration: Mandates the creation of interactive showcase pages for every new component, providing a canonical reference for both developers and AI agents.

Quick Start

Use the implement-ui skill to scaffold a new detail page for the user settings entity following the established anatomy and component registry.

Frequently Asked Questions about implement-ui

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

FAQPage Schema
How do I enforce consistent UI styling across a Blazor WebAssembly project?▼

To enforce consistent UI styling in Blazor WebAssembly, you can standardize development by routing all page creation through a shared component library. This approach replaces raw classes with registered primitives to ensure uniform design.

What is the best way to manage a shared component library for frontend development?▼

The best way to manage a shared component library is to mandate interactive showcase pages for every new UI primitive. This provides a canonical reference for developers and AI agents, ensuring consistent component usage.

Does this UI standardization approach support Bootstrap breakpoints for responsive layouts?▼

Yes, this UI standardization approach supports Bootstrap breakpoints for responsive layouts. It enforces responsive design patterns through the shared component registry while ensuring all interfaces meet WCAG AA accessibility standards.

How do I scaffold a new Blazor page using registered UI components instead of raw Bootstrap classes?▼

To scaffold a new Blazor page using registered UI components, you apply the UI standardization skill to guide implementation. It automatically enforces the use of shared primitives like Buttons and Cards instead of raw Bootstrap classes.

Can I use custom HTML elements instead of the shared component registry when building web interfaces?▼

Using custom HTML elements instead of the shared component registry is discouraged. The standardization process enforces adherence to registered UI primitives to prevent technical debt and maintain accessibility compliance across the web application.

Related Skills

Explore More Software Engineering Skills→
akokenakoken
3

testing-playwright-blazor

Automate end-to-end UI testing for Blazor applications with Playwright.

Community
Advanced
WiseWolfPTWiseWolfPT

Landing Page Steal

Copy a landing page design from a URL or image into a codebase page using Playwright MCP.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
afonsoftafonsoft
1

abp-blazor

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

Community
Intermediate