About microsoft-skills
microsoft-skills packages two official Microsoft frontend skills: one for reviewing and creating distinctive interfaces, and one for dark React and TypeScript UIs using Tailwind and animations. It is for agents working on frontend design and implementation.
Key features
- 01Frontend design review
- 02Distinctive interface creation
- 03Dark-themed React and TypeScript UI
- 04Tailwind styling and animations
Use cases
- 01Review a frontend design
- 02Create a distinctive interface
- 03Build a dark-themed React UI
- 04Implement a TypeScript interface with Tailwind and animations
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill microsoft-skillsAfter installing, type/microsoft-skillsin Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEmicrosoft-skills
Catalogue stub — full package: microsoft/skills
Decision tree
-
Is a Microsoft skill already installed? Check:
~/.design-agent-skills/skills/frontend-design-review/SKILL.mdexists.- Yes → invoke the specific skill by name and proceed
- No → go to step 2
-
Do you have shell access?
- Yes → run the install command below, then invoke the skill
- No → show the install command; in Claude Code, send it as a chat message starting with
!— add-gfor global install or omit for project-only
Install command
# Review and create distinctive interfaces
npx skills add microsoft/frontend-design-review
# Dark-themed React with Tailwind and animations
npx skills add microsoft/frontend-ui-dark-ts
Invoke after install
frontend-design-review— "frontend design review", "distinctive interface"frontend-ui-dark-ts— "dark theme UI", "dark React", "dark Tailwind"
What it does
Microsoft's two official frontend skills: one for reviewing and producing distinctive, non-generic interfaces; one for building dark-themed React/TypeScript UIs with Tailwind and animations. Both enforce strong visual identity over default aesthetics.