skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

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
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill ticktick-ui-skills
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate
ihlamuryihlamury
73

superhuman-ui-skills

Enforce Superhuman's UI design system with Inter font and a 4px grid.

Community
Intermediate
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate