ticktick-ui-skills

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

73|9|Updated Jan 25, 2026

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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building Ticktick-style interfaces, ensuring consistency in light mode, font usage, and grid systems.

Core Features & Use Cases

UI Design System: Enforces Ticktick's light mode aesthetic, Inter font, and 4px grid.
Accessibility: Mandates a minimum text contrast ratio of 4.5:1.
Use Case: When designing a new feature for a productivity app that should feel familiar to Ticktick users, apply these guidelines for colors, typography, spacing, and borders.

Quick Start

Apply the ticktick-ui-skills to ensure the new interface uses a light background and the Inter font.

Frequently Asked Questions about ticktick-ui-skills

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

FAQPage Schema

How do I build a productivity app interface with TickTick's light mode aesthetic?▼

To build a TickTick-inspired light mode interface, apply predefined design tokens enforcing a light background aesthetic, Inter font family, and a 4px grid system for consistent branding and spacing.

What design constraints are needed for a TickTick-style UI design system?▼

A TickTick-style UI design system requires constraints including light mode colors, Inter font usage, a 4px grid layout system, and a minimum text contrast ratio of 4.5:1 for accessibility compliance.

How do I apply a 4px grid system to front-end development without breaking accessibility?▼

Apply a 4px grid system for layout spacing while mandating a minimum text contrast ratio of 4.5:1, ensuring UI components remain visually consistent and accessible in light mode designs.

Can I use these UI design tokens for a dark mode productivity app?▼

These UI design tokens specifically enforce a light mode aesthetic and do not support dark mode, focusing entirely on light backgrounds, Inter font typography, and strict 4px grid layouts.

When should I use a predefined design system over custom UI styling for productivity apps?▼

Use a predefined design system when building new features that need to feel familiar to TickTick users, ensuring efficient UI development through consistent branding, accessibility, and layout rules.