foundry-nextgen-frontend

name

foundry-nextgen-frontend

description

Build elegant frontend UIs following Microsoft Foundry's NextGen Design System using Vite + React + pnpm. Use when creating dashboards, agent builders, data grids, entity management interfaces, or any application matching Foundry's refined dark-themed aesthetic. Triggers on requests for Foundry-style UI, NextGen design system, Microsoft Foundry interfaces, or enterprise admin dashboards with data tables, detail panels, and charts.

Microsoft Foundry NextGen Frontend Skill

Build elegant, production-ready interfaces following Microsoft Foundry's NextGen Design System - a refined neutral dark-themed design language with minimal purple accents for primary actions only.

⚠️ CRITICAL: Color Usage Rules

Purple (#8251EE / #A37EF5) is ONLY for:

• Primary action buttons (filled background)
• Active tab indicators (2px underline)
• Row selection indicators (left border bar)
• Active sidebar navigation icons
• Links and interactive text
• Progress indicators and sliders (track fill)
• Focus rings on inputs

Everything else uses NEUTRAL DARK GREYS:

• Backgrounds: Near-black and dark greys (#0A0A0A, #141414, #1C1C1C)
• Cards/Surfaces: Dark grey (NOT purple-tinted)
• Text: White (#FFFFFF), grey (#A1A1A1), muted (#6B6B6B)
• Secondary buttons: Grey outline with white text (NOT purple)
• Borders: Subtle dark grey (#2A2A2A, #333333)
• Inactive tabs: Grey text (#6B6B6B)

Preferred Stack

Vite + React + pnpm - Fast, modern, elegant.

pnpm create vite@latest my-foundry-app --template react-ts
cd my-foundry-app
pnpm install
pnpm add lucide-react recharts

Core Design Tokens