メニュー
Use when building React or Blazor applications that need Microsoft Fluent 2 design system components, enterprise UI consistency, or accessibility-first interfaces
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when creating application icons for Windows apps, from initial SVG design through to final ICO file
Use when improving code structure, applying design patterns, ensuring backward compatibility, or making incremental changes without altering behavior
Use when planning work items, managing backlogs, creating epics/features/stories/tasks, or organizing development work in Agile/SCRUM methodology
Use when implementing any feature or bugfix, before writing implementation code
Use when designing application structure, implementing layered architecture, applying DDD patterns, or making architectural decisions about separation of concerns
Use when building, designing, or coding Azure Logic Apps Consumption workflows - covers architecture patterns, Code View JSON conventions, error handling, performance optimization, security, naming conventions, and deployment best practices
| name | using-fluent-ui |
| description | Use when building React or Blazor applications that need Microsoft Fluent 2 design system components, enterprise UI consistency, or accessibility-first interfaces |
Build consistent, accessible, enterprise-grade interfaces using Microsoft's Fluent 2 Design System. This skill covers Fluent UI implementation for both React and Blazor applications.
Core principle: Consistency and accessibility through design tokens, not custom styling.
Fluent UI uses design tokens for theming - CSS variables that control colors, spacing, typography, and more. Never hardcode values; always use tokens.
Both React and Blazor require a provider component at the root that supplies theme context to all child components.
Fluent components include ARIA attributes, keyboard navigation, and focus management by default. Don't override these unless necessary.
For detailed implementation guidance, see:
| Theme | Use Case |
|---|---|
webLightTheme | Standard light mode |
webDarkTheme | Dark mode |
teamsLightTheme | Teams integration (light) |
teamsDarkTheme | Teams integration (dark) |
Create custom themes by extending base themes with your brand tokens:
// React example
import { createLightTheme, BrandVariants } from '@fluentui/react-components';
const myBrand: BrandVariants = {
10: '#020305',
// ... define all 16 brand shades
160: '#F0F4FA',
};
const myTheme = createLightTheme(myBrand);
Menu, MenuItem, MenuTrigger)appearance props (primary, secondary, subtle, transparent)styles prop to className with GriffelDefaultButton → Button)makeStyles (React) or CSS variables (Blazor) for custom styling❌ Mixing design systems - Don't combine Fluent with Bootstrap, Material, or Tailwind for the same components
❌ Custom styling over tokens - Avoid style={{ color: '#0078d4' }}, use tokens instead
❌ Ignoring compound patterns - Fluent components often work together (Menu + MenuTrigger + MenuList)
❌ Skipping the provider - Components won't theme correctly without FluentProvider/providers