How does this skill improve frontend performance?

It enforces strict rules such as avoiding useEffect for render logic, animating only compositor properties like transform and opacity, and respecting prefers-reduced-motion.

What is the Shortcut UI Skill for Claude?

It is a specialized set of design constraints that allows Claude Code to generate frontend interfaces following Shortcut's specific aesthetic, including its color palette, typography, and grid system.

What font family is required for this design system?

The skill mandates the use of the Inter font family to ensure consistency across all primary headings, body text, and UI components.

Does this skill support dark mode?

No, this skill is specifically optimized for Shortcut's signature light mode surfaces, utilizing a white base background and specific accent colors.

Can I use this for mobile development?

While it targets a 1920px base viewport for desktop-first SaaS applications, its spacing and typography rules provide a solid foundation for responsive web development.

Shortcut UI Design System

Name: Shortcut UI Design System
Author: ihlamury

byihlamury

•

设计工具

Implements pixel-accurate interfaces following Shortcut's design language with standardized colors, typography, and spacing.

This skill provides Claude with opinionated design constraints to replicate the clean, modern aesthetic of the Shortcut platform. It enforces a strict 4px grid, the Inter font family, and a specific semantic color palette centered around high-contrast light mode surfaces. By applying these rules, AI agents can generate consistent frontend code that adheres to professional UI standards, including specific accessibility requirements, optimized animation paths, and standardized layout patterns for high-resolution viewports. It is ideal for developers looking to build clean, data-heavy SaaS interfaces with minimal design debt.

主要功能

01Pre-configured interactive states for hover, focus, and disabled elements

02Strict 4px spacing grid and standardized border-radius scale

03Shortcut-specific semantic color tokens and WCAG-compliant contrast ratios

04Optimized typography using Inter with predefined heading and body styles

0516 GitHub stars

06Standardized layout patterns for high-resolution desktop viewports

07Performance-first animation and rendering guidelines avoiding unnecessary re-renders

使用场景

01Refactoring existing frontend code to follow a structured, opinionated design system

02Building SaaS dashboards and project management interfaces with a clean light-mode aesthetic

03Rapidly prototyping React or HTML components that match Shortcut's professional UI

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ihlamury/design-skills shortcut

For use in Claude.ai and ChatGPT

Download Skill