메뉴
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