foundry-nextgen-frontend
Build elegant frontend UIs following Microsoft Foundry's NextGen Design System using Vite + React + pnpm + Framer Motion. Use when creating dashboards, agent builders, data grids, entity management interfaces, or any application matching Foundry's refined dark-themed aesthetic.
Install with Tessl CLI
npx tessl i github:microsoft/agent-skills --skill foundry-nextgen-frontendOverall
score
84%
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-crafted skill description that excels across all dimensions. It clearly specifies the tech stack and design system, provides explicit trigger guidance with a 'Use when...' clause, and includes natural keywords users would employ. The Foundry-specific focus makes it highly distinctive from generic frontend skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Build elegant frontend UIs', specifies tech stack 'Vite + React + pnpm + Framer Motion', and names specific UI types 'dashboards, agent builders, data grids, entity management interfaces'. | 3 / 3 |
Completeness | Clearly answers both what ('Build elegant frontend UIs following Microsoft Foundry's NextGen Design System using Vite + React + pnpm + Framer Motion') and when ('Use when creating dashboards, agent builders, data grids, entity management interfaces, or any application matching Foundry's refined dark-themed aesthetic'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'frontend', 'UI', 'dashboards', 'agent builders', 'data grids', 'React', 'Vite', 'dark-themed', 'Foundry', 'NextGen Design System'. Good coverage of both technical and domain terms. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with specific niche: Microsoft Foundry's NextGen Design System, dark-themed aesthetic, and specific tech stack. Unlikely to conflict with generic React or UI skills due to the Foundry-specific focus. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, highly actionable skill for building Foundry-style UIs with excellent code examples and clear design tokens. The main weaknesses are some verbosity in explanations and lack of explicit workflow guidance for assembling components into complete interfaces. The skill would benefit from trimming redundant warnings and adding a brief workflow section.
Suggestions
Consolidate the three 'CRITICAL' sections into a single 'Key Rules' section to reduce redundancy and improve scannability
Add a brief workflow section showing the sequence for building a complete page (e.g., 1. Set up layout → 2. Add page header → 3. Build card grid → 4. Verify spacing/colors)
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly efficient with good use of code examples and tables, but includes some redundancy (e.g., repeating 'CRITICAL' warnings, explaining CSS variables Claude already understands) and could be tightened by consolidating similar sections. | 2 / 3 |
Actionability | Excellent actionability with fully executable code examples, specific CSS values, complete component implementations, and copy-paste ready patterns. The setup commands, design tokens, and component code are all immediately usable. | 3 / 3 |
Workflow Clarity | While individual components are clear, there's no explicit workflow for building a complete interface. Missing validation steps (e.g., how to verify correct color usage, spacing compliance) and no clear sequence for assembling components into a full application. | 2 / 3 |
Progressive Disclosure | Good structure with clear sections progressing from setup to tokens to components to patterns. References to external files (design-tokens.md, components.md, patterns.md) are well-signaled at the end, keeping the main skill focused on essentials. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
75%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 12 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (556 lines); consider splitting into references/ and linking | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 12 / 16 Passed | |
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.