skills.rest
MartiXDev
MartiXDevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dotnet-frontend-ui

Builds React UI components with Fluent UI v9 primitives and Griffel token-based styling.

Updated Feb 8, 2026
Search Tags:#accessibility#frontend#react#component design#css-in-js#fluent ui#griffel
One-click install
npx skills add https://github.com/MartiXDev/ai-dev-strategy --skill dotnet-frontend-ui-martixdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dotnet-frontend-ui
Source: https://github.com/MartiXDev/ai-dev-strategy/tree/main/plugins/dotnet-frontend-ui/skills/dotnet-frontend-ui
Command: npx skills add https://github.com/MartiXDev/ai-dev-strategy --skill dotnet-frontend-ui-martixdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React frontends in .NET projects often drift into inconsistent styling, hardcoded values, and accessibility gaps when multiple developers contribute. This Skill enforces a single, predictable approach to building UI with Fluent UI v9 and Griffel so components stay consistent, accessible, and maintainable. ## Core Features & Use Cases - Fluent UI v9 First: Prioritizes built-in primitives like Button, Dialog, Card, and DataGrid over custom wrappers, using design tokens instead of hardcoded colors or spacing. - Griffel Styling Discipline: Enforces makeStyles() with semantic slot names and mergeClasses() composition, avoiding inline styles, CSS modules, and global CSS. - Accessibility Standards: Covers keyboard navigation, focus management, ARIA labeling, and contrast requirements for dialogs, menus, and forms. - Use Case: When refactoring a legacy React page with mixed styling approaches, apply this Skill to convert it to Fluent UI v9 components with Griffel styles, complete loading/empty/error states, and verified keyboard behavior. ## Quick Start Ask the AI to build a new React form component using Fluent UI v9 primitives with Griffel styling and full keyboard accessibility.

Frequently Asked Questions about dotnet-frontend-ui

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

FAQPage Schema
How do I style React components with Griffel and Fluent UI v9?▼

Use makeStyles() to define styles with semantic slot names like root, header, and content, then compose them with mergeClasses(). Always reference Fluent UI design tokens for color, spacing, and typography instead of hardcoded values.

What is the difference between Fluent UI v9 primitives and custom components?▼

Fluent UI v9 primitives like Button, Dialog, and DataGrid come with built-in accessibility, theming, and token support. Custom wrappers should only be created when there is a clear product requirement that primitives cannot satisfy.

Can I use CSS modules or inline styles with Fluent UI v9?▼

No, component-scoped styling should use Griffel makeStyles() exclusively. Inline styles, CSS modules, and global CSS break token consistency and make class composition unpredictable.

How do I make Fluent UI dialogs and menus keyboard accessible?▼

Verify tab order, escape and enter key behavior, and ensure focus is restored after dismissing overlays. Use semantic HTML, provide aria-label or aria-labelledby where needed, and keep focus visible at all times.

What component states should every React UI component implement?▼

Every component should implement and test loading, empty, success, and error states. Form validation messages must be clear, specific, and screen-reader friendly, and state should never be conveyed by color alone.

Related Skills

Explore More Software Engineering Skills→
ohmyhotelcoohmyhotelco
1

fe-plan

Generates a React implementation plan from a functional specification or interactive requirements gathering.

Official
Advanced
JuanDiego30JuanDiego30

nextjs-jest

Configure Jest with next/jest and test Next.js components and API routes.

Community
Intermediate
cockroachdbcockroachdb
6.0k

code-review

Review Pebble code, PRs, and diffs for correctness issues.

Official
Basic
carrilloappscarrilloapps

tailwind-design-system

Creates Tailwind CSS v4 design systems with semantic @theme tokens and CVA components.

Community
Advanced