shortcut-ui-skills

Enforce Shortcut UI design constraints for light mode, Inter font, and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#design system #ui design #shortcut #light mode #inter font #4px grid

Ready to run

npx skills add https://github.com/ihlamury/design-skills --skill shortcut-ui-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shortcut-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/shortcut
Command: npx skills add https://github.com/ihlamury/design-skills --skill shortcut-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides opinionated constraints for building user interfaces that are visually consistent with Shortcut's design system, ensuring a familiar and polished user experience.

Core Features & Use Cases

Light Mode UI: Adheres to light-mode principles with specific color palettes and surface treatments.
Inter Font & 4px Grid: Enforces the use of the Inter font family and a consistent 4px spacing grid for layout and alignment.
Color & Typography Standards: Defines semantic color tokens and specific text styles for headings and body copy.
Use Case: When designing a new feature for a project management tool that needs to feel like a natural extension of Shortcut, use these guidelines to maintain visual harmony.

Quick Start

Apply the shortcut-ui-skills to design a new modal window with a light background and accent color buttons.

Frequently Asked Questions about shortcut-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a UI that matches the Shortcut design system aesthetic?▼

Shortcut UI design uses semantic color tokens for surfaces and text, a typography scale for headings and body copy, and a 4px grid for layout alignment. These constraints guarantee consistent branding and polished user experience in web and application interfaces.

Can I use these UI design constraints for dark mode interfaces?▼

These UI design constraints enforce light mode principles with specific color palettes and surface treatments. They do not support dark mode interfaces, focusing solely on maintaining Shortcut's light aesthetic for front-end development and UI/UX design tasks.

What font family and spacing grid does the Shortcut UI style require?▼

Shortcut UI style mandates the Inter font family and a 4px spacing grid. These constraints apply to all front-end development and UI/UX design tasks, ensuring consistent layout alignment and typography scales across web and application interfaces.

Does this Shortcut UI skill work with any front-end development framework?▼

These Shortcut UI constraints are framework-agnostic, providing design tokens and styling rules for front-end development and UI/UX design tasks. They deliver consistent branding and user experience across web and application interfaces using any development framework.

When should I use Shortcut-style UI design constraints for my project?▼

Apply Shortcut UI design constraints when designing new features for project management tools requiring Shortcut's aesthetic. They enforce light mode, Inter font, and 4px grid spacing to maintain consistent branding and polished user experience in web interfaces.

What are the limitations of using opinionated UI design constraints for Shortcut-style interfaces?▼

The limitations include strict adherence to light mode, Inter font, and 4px grid spacing, restricting design flexibility. These constraints enforce Shortcut's specific visual style and do not accommodate alternative design systems or dark mode requirements for web and application interfaces.