app-design Skill
Apply Fabric design tokens, spacing, typography, and Segoe UI font conventions when adjusting layout or chrome of the Org App template. Use when the user asks to polish the UI, adjust spacing, change typography, or improve visual hierarchy. Published by microsoft in fabric-org-app-template.
What is app-design Skill?
Apply Fabric design tokens, spacing, typography, and Segoe UI font conventions when adjusting layout or chrome of the Org App template. Use when the user asks to polish the UI, adjust spacing, change typography, or improve visual hierarchy. Published by microsoft in fabric-org-app-template. 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
- Design and media
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use app-design Skill
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/fabric-org-app-template
- Skill file: .agents/skills/app-design/SKILL.md
What it does
Apply Fabric design tokens, spacing, typography, and Segoe UI font conventions when adjusting layout or chrome of the Org App template. Use when the user asks to polish the UI, adjust spacing, change typography, or improve visual hierarchy.
Skill instructions
app-design What this skill covers This template ships with the Fabric design token system from src/global.css. Use these tokens — never raw pixel values or arbitrary hex colors — when adjusting the shell, sidebar, or empty-state UI. Token cheatsheet Spacing (use Tailwind utilities) | Token | Value | Tailwind class | |---|---|---| | --spacing-xs | 2px | gap-xs p-xs m-xs etc. | | --spacing-s | 4px | gap-s | | --spacing-m | 8px | gap-m | | --spacing-l | 16px | gap-l | | --spacing-xl | 24px | gap-xl | | --spacing-xxl | 32px | gap-xxl | Typography | Token | Size / line-height | Tailwind class | |---|---|---| | text-200 leading-200 | 12px / 16px | secondary text, captions | | text-300 leading-300 | 14px / 20px | body text, nav items | | text-400 leading-500 | 16px / 22px | section headings | | text-600 leading-600 | 24px / 32px | page titles | | text-700 leading-700 | 32px / 40px | hero titles (empty state) | Always pair text- with the matching leading- token. Font families - Sans (default):
Explore related resources
Frequently asked questions
What is app-design?
app-design is a open-source AI agent skill with Copy skill directory. Apply Fabric design tokens, spacing, typography, and Segoe UI font conventions when adjusting layout or chrome of the Org App template.
Who is app-design best for?
app-design is best for reusing agent instructions, scripts, and references, design and media workflows.
How do I install app-design?
Install or run app-design using Copy skill directory. Check app-design for the latest setup command.
Is app-design actively maintained?
app-design may need a closer maintenance check before production use.
Auto-fetched from GitHub.
