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

todoist-ui-skills

Enforce Todoist-inspired UI design constraints with light mode, Inter font, and a 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#todoist#ui design#spacing#light mode
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill todoist-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: todoist-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/todoist
Command: npx skills add https://github.com/ihlamury/design-skills --skill todoist-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Light Mode Design: Adheres to Todoist's light aesthetic, using specific background and text colors.
  • Typography Guidelines: Enforces the use of the 'Inter' font family with defined sizes and weights for headings and body text.
  • Spacing and Grid: Implements a strict 4px grid system for consistent layout and element spacing.
  • Component Styling: Provides specific rules for buttons and input fields, including focus and hover states.
  • Use Case: When designing a new task management feature that needs to feel like a natural extension of the existing Todoist application, use these guidelines to maintain visual harmony.

Quick Start

Apply the todoist-ui-skills to create a light mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about todoist-ui-skills

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

FAQPage Schema
How do I build a task management interface that looks like Todoist?▼

To build a task management interface inspired by Todoist, apply opinionated UI design constraints focusing on light mode, the Inter font family, and a 4px grid system to ensure visual consistency and an intuitive user experience.

What design constraints are enforced for Todoist-inspired UI design?▼

Todoist-inspired UI design enforces specific color palettes, typography scales, spacing rules, border-radius values, and interactive states for buttons and inputs to maintain visual harmony and accessibility.

Can I use this UI design system for dark mode interfaces?▼

No, this UI design system specifically adheres to Todoist's light mode aesthetic, using defined background and text colors, and does not provide constraints for dark mode interfaces.

Do I need the Inter font family to apply these typography guidelines?▼

Yes, the typography guidelines enforce the use of the Inter font family with defined sizes and weights for headings and body text to achieve the familiar Todoist visual aesthetic.

What's the best way to ensure consistent spacing in a Todoist-inspired design?▼

The best way to ensure consistent spacing is to implement a strict 4px grid system, which provides specific rules for layout and element spacing across the interface.

How do I style buttons and inputs for a Todoist visual extension?▼

To style buttons and inputs for a Todoist visual extension, follow the provided specific component styling rules, including defined focus and hover states for interactive elements.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

craft-ui-skills

Enforce Craft's UI design constraints for light mode interfaces using Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

shortcut-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

ticktick-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

ramp-ui-skills

Enforce Ramp UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate