·fluent2-design-system
*

fluent2-design-system

✓
dodatech/approved-skillsGitHub: dodatech/approved-skillsFuente: dodatech/approved-skills

Cree interfaces utilizando el sistema de diseño Fluent 2 de Microsoft a través de @fluentui/react-components (v9). Úselo cuando el usuario solicite una interfaz de usuario creada con Fluent UI, Fluent 2, lenguaje de diseño de Microsoft, interfaz de usuario estilo Teams o interfaces estilo Office. Cubre: uso de componentes React, temas con FluentProvider, estilo con makeStyles/tokens/Griffel, aplicación de tokens de diseño, patrones de diseño, tipografía, sistema de color, accesibilidad, temas oscuros/claros/alto contraste y marca personalizada. También activadores para: "hacer que parezca Teams/Outlook/Office", "usar Fluent", "sistema de diseño de Microsoft", "@fluentui" o cualquier solicitud para crear una interfaz de usuario que siga el lenguaje de diseño de Microsoft. NO lo use para Fluent UI v8 (@fluentui/react) a menos que migre a v9.

dodatech·fluent2·design·system
7Instalaciones·0Tendencia·@dodatech

Instalación

GitHub: dodatech/approved-skills
$npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system

Cómo instalar fluent2-design-system

Instala rápidamente el skill de IA fluent2-design-system en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
  3. Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

Fuente: dodatech/approved-skills.

SKILL.md

Ver original

Build production-grade interfaces using Microsoft's Fluent 2 design system with @fluentui/react-components (v9).

Every Fluent 2 React app requires a FluentProvider wrapping the component tree with a theme:

Use makeStyles (from @fluentui/react-components) — never inline styles or external CSS for token-aware styling.

Cree interfaces utilizando el sistema de diseño Fluent 2 de Microsoft a través de @fluentui/react-components (v9). Úselo cuando el usuario solicite una interfaz de usuario creada con Fluent UI, Fluent 2, lenguaje de diseño de Microsoft, interfaz de usuario estilo Teams o interfaces estilo Office. Cubre: uso de componentes React, temas con FluentProvider, estilo con makeStyles/tokens/Griffel, aplicación de tokens de diseño, patrones de diseño, tipografía, sistema de color, accesibilidad, temas oscuros/claros/alto contraste y marca personalizada. También activadores para: "hacer que parezca Teams/Outlook/Office", "usar Fluent", "sistema de diseño de Microsoft", "@fluentui" o cualquier solicitud para crear una interfaz de usuario que siga el lenguaje de diseño de Microsoft. NO lo use para Fluent UI v8 (@fluentui/react) a menos que migre a v9. Fuente: dodatech/approved-skills.

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
Fuente
dodatech/approved-skills
Categoría
*Creatividad
Verificado
✓
Primera vez visto
2026-02-25
Actualizado
2026-03-10
URL
https://www.learn-skills.dev/es/skills/dodatech/approved-skills/fluent2-design-system

Browse more skills from dodatech/approved-skills

Respuestas rápidas

¿Qué es fluent2-design-system?

Cree interfaces utilizando el sistema de diseño Fluent 2 de Microsoft a través de @fluentui/react-components (v9). Úselo cuando el usuario solicite una interfaz de usuario creada con Fluent UI, Fluent 2, lenguaje de diseño de Microsoft, interfaz de usuario estilo Teams o interfaces estilo Office. Cubre: uso de componentes React, temas con FluentProvider, estilo con makeStyles/tokens/Griffel, aplicación de tokens de diseño, patrones de diseño, tipografía, sistema de color, accesibilidad, temas oscuros/claros/alto contraste y marca personalizada. También activadores para: "hacer que parezca Teams/Outlook/Office", "usar Fluent", "sistema de diseño de Microsoft", "@fluentui" o cualquier solicitud para crear una interfaz de usuario que siga el lenguaje de diseño de Microsoft. NO lo use para Fluent UI v8 (@fluentui/react) a menos que migre a v9. Fuente: dodatech/approved-skills.

¿Cómo instalo fluent2-design-system?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/dodatech/approved-skills

Detalles

Categoría
*Creatividad
Fuente
skills.sh
Primera vez visto
2026-02-25

Skills Relacionados

playwright-local
27 Instalaciones
tremor-design-system
15 Instalaciones
design-consistency-auditor
5 Instalaciones
copy-editing
4 Instalaciones
deep-debug
4 Instalaciones
information-architecture
4 Instalaciones