foundry-nextgen-frontend Skill
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 Published by microsoft in copilot-sdk-samples.
What is foundry-nextgen-frontend Skill?
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 Published by microsoft in copilot-sdk-samples. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Data analysis
- Design and media
- Data analysis use cases
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use foundry-nextgen-frontend Skill
- Use it for data analysis.
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/copilot-sdk-samples
- Skill file: .github/skills/foundry-nextgen-frontend/SKILL.md
What it does
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
Skill instructions
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. bash pnpm creat
Explore related resources
Frequently asked questions
What is foundry-nextgen-frontend?
foundry-nextgen-frontend is a open-source AI agent skill with Copy skill directory. Build elegant frontend UIs following Microsoft Foundry's NextGen Design System using Vite + React + pnpm.
Who is foundry-nextgen-frontend best for?
foundry-nextgen-frontend is best for reusing agent instructions, scripts, and references, data analysis workflows, design and media workflows.
How do I install foundry-nextgen-frontend?
Install or run foundry-nextgen-frontend using Copy skill directory. Check foundry-nextgen-frontend for the latest setup command.
Is foundry-nextgen-frontend actively maintained?
foundry-nextgen-frontend may need a closer maintenance check before production use.
Auto-fetched from GitHub.
