skills.rest
cgRGM
cgRGMCOMMUNITY
Explore all skills by this author →
Website𝕏@c_g_stewartGitHub

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
One-click install
npx skills add https://github.com/cgRGM/rivercitymd --skill resend-design-system-cgrgm
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
1natsu1721natsu172
1

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind v5 and react-native-css via Metro/PostCSS.

Community
Intermediate
Bbeierle12Bbeierle12
8

component-library

Generate production-ready React components for a shadcn/ui component library.

Community
Advanced
mintuzmintuz
21

tailwind

Standardize Tailwind design systems with semantic tokens, CVA variants, and dark-mode theming.

Community
Intermediate
DrLuggelsDrLuggels
3

web-component-design

Guide reusable web component design with React, Vue, and Svelte patterns.

Community
Intermediate