Shortcut UI Skills

Trust Score 85/100

Opinionated design constraints and tokens for building Shortcut-inspired light-mode interfaces (Inter font, 4px grid) to keep UIs consistent and accessible.

triggers:shortcut uiinter font4px griddesign tokenslight mode

GitHub SKILL.md

What it does

Provides a compact, opinionated design system for agents tasked with generating or refining UI code and design tokens. The skill codifies colors, semantic tokens, typography rules, spacing and border scales, accessibility requirements, and component interaction rules so agents can produce consistent Shortcut-style interfaces.

When to use it

Use when generating frontend components, producing CSS/Tailwind tokens, or when an agent must enforce a strict design language (light-mode, Inter font, 4px grid). Also useful during design-to-code flows where consistent spacing, focus states, and typography matter.

What's included

Scripts: none bundled (has_scripts=false)
References: includes metadata.json alongside the SKILL.md (has_references=false as reported)
Instructions: detailed tokens and rules: required color tokens, typography sizes/weights, spacing scale, border radii, accessibility focus/hover/disabled behaviors, and guidance on animation and performance. The document lists recommended CSS values and component patterns.

Compatible agents

Best for agents that produce UI code or design assets (Cursor, Claude Code, Copilot/Codex-style code models, or any agent that can output Tailwind/CSS).

Audit Summary

Pure design token reference skill for Shortcut-style light-mode UIs. No scripts or executable content — just SKILL.md with color tokens, typography specs, spacing/border scales, and interaction guidelines. Well-structured with clear MUST/SHOULD/NEVER language and useful tables. Narrow audience: developers building Shortcut-inspired interfaces. Some redundancy in text-secondary entries with inconsistent color values.

Watch Out

Multiple text-secondary entries with different colors (19px/#919191 vs 18px/#949494) — may confuse agents
Input field height set to 0px which seems like a parsing artifact rather than intentional

Notes

No security concerns — skill is a static design reference with no scripts, network calls, or executable content. The inconsistent text-secondary color values suggest the token data was auto-extracted from a real UI without full deduplication.

Information

Repository: design-skills
Stars: 25
Installs: 0

Trust Score

Overall85

Security100

Code Quality72

Architecture65

Usefulness45

Related Skills

Scientific Schematics & Diagrams

Generate publication-quality scientific diagrams via AI with iterative quality review and smart regeneration for journal, conference, poster, and presentation o

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

Colorize (Strategic UI Color)

Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.

OpenTestAI

Automated, high-confidence AI testing: bug detection, persona feedback, and prioritized test-case generation using many specialized tester profiles.

Reppo — AgentMind Publisher

Publish creative content to Moltbook and mint posts as on-chain pods on Reppo.ai (Base) to earn $REPPO through human voting.

Cognitive Accessibility Specialist

Audits content, forms and authentication flows for cognitive accessibility (WCAG 2.2 / COGA) and gives prioritized remediation and plain-language guidance.

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Back to Skills