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

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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.