resend-design-system

Guide UI implementation using Resend design tokens and component patterns.

1|Updated Oct 10, 2025

Search Tags:#accessibility #react #tailwind #design-system #design-tokens #component-patterns #ui-primitives

Ready to run

npx skills add https://github.com/cgRGM/rivercitymd --skill resend-design-system-cgrgm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: resend-design-system
Source: https://github.com/cgRGM/rivercitymd/tree/main/.agents/skills/resend-design-skills/design-system
Command: npx skills add https://github.com/cgRGM/rivercitymd --skill resend-design-system-cgrgm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents inconsistent UI work by centralizing the Resend design system rules, component APIs, and implementation patterns in one place.

Core Features & Use Cases

Primitives and variants: Select the correct buttons, inputs, dialogs, menus, and typography components with their supported appearances, sizes, and states.
Design tokens and styling: Apply the shared color, spacing, radius, shadow, and animation tokens instead of inventing one-off styles.
Composition guidance: Follow compound component, slot, and asChild patterns for forms, overlays, and navigation.
Use case: A designer-to-engineer handoff for a new settings modal can be translated into a consistent implementation without guessing component APIs or breaking visual rules.

Quick Start

Use the resend-design-system skill to implement a settings page section with the correct primitives, variant choices, and client-server component split.

Frequently Asked Questions about resend-design-system

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

FAQPage Schema

How do I build consistent React UI components using design tokens?▼

To build consistent React UI, apply shared color, spacing, radius, shadow, and animation design tokens instead of inventing one-off styles. This ensures visual consistency across your product interfaces and prevents fragmented styling.

What's the best way to compose forms and dialogs in a React design system?▼

The best way to compose forms and dialogs is using compound component, slot, and asChild patterns. These composition methods allow you to build complex overlays and navigation states while maintaining strict API consistency.

How do I choose the right UI primitives for buttons and navigation states?▼

Choosing the right UI primitives involves selecting correct buttons, inputs, dialogs, and menus based on their supported appearances, sizes, and states. The Skill guides you through variant APIs to ensure proper component selection.

When do I need to split server and client components in a React design system?▼

You need to split server and client components when building or modifying product interfaces to ensure proper rendering. Adhering to server-versus-client component rules prevents hydration issues and maintains design system compliance.

Does this design system guidance support accessibility and Tailwind styling?▼

Yes, the design system guidance supports accessibility and Tailwind styling by enforcing shared design tokens. It centralizes component rules and APIs to ensure accessible UI primitives are implemented consistently across your React application.