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

resend-ui-skills

Enforce dark mode, Inter font, and 4px grid UI constraints.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Resend's distinct dark-mode aesthetic, utilizing their specific typography and spacing principles.

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and appropriate text contrast for accessibility.
  • Consistent Typography: Ensures the use of the 'Inter' font family with defined sizes and weights for headings and body text.
  • 4px Grid System: Adheres to a strict 4px spacing and grid system for layout and element positioning.
  • Use Case: When designing a new feature for a developer tool that needs to match the look and feel of Resend's existing platform, this Skill will guide the AI to apply the correct color palette, font styles, and spacing.

Quick Start

Apply the resend-ui-skills to design a new settings page with a dark theme, using the Inter font and a 4px grid.

Frequently Asked Questions about resend-ui-skills

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

FAQPage Schema
How do I build a UI with a dark mode aesthetic similar to Resend?▼

To build a Resend-inspired dark mode UI, use specific design constraints including dark backgrounds with high text contrast, the Inter font family, and a strict 4px grid system for layout and spacing.

What typography and spacing rules ensure consistent UI design in a design system?▼

Consistent UI design requires enforcing a specific typography scale using the Inter font family, alongside adhering to a strict 4px grid system for element positioning and spacing rules.

Can I apply these design system constraints to create interactive states for UI elements?▼

Yes, these design system constraints include specific guidelines for building interactive states, covering focus, hover, and disabled elements, as well as animation and performance best practices.

Does this UI design approach work for developing developer tool interfaces?▼

This approach is ideal for developer tools, providing opinionated color palettes, typography styles, and spacing rules that ensure new features match a distinct dark-mode platform aesthetic.

What is the best way to maintain consistent border-radius and color palettes across a dark theme?▼

The best way to maintain consistency is by enforcing specific color palettes and border-radius scales, ensuring accessible text contrast and uniform styling across all interface elements.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

descript-ui-skills

Enforce Descript UI design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
djankiesdjankies

handling-animations

Define custom CSS animations in Tailwind CSS using @theme and @keyframes.

Community
Advanced
ihlamuryihlamury
73

arc-ui-skills

Enforce Arc's UI design system for light-mode interfaces with Inter font and a 4px grid.

Community
Intermediate
ihlamuryihlamury
73

todoist-ui-skills

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

Community
Intermediate