Menu
Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | resend-design-skills |
| description | Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns. |
| metadata | {"author":"resend","version":"1.0.2"} |
A collection of design-related skills for Claude Code.
| Skill | Use for | Path |
|---|---|---|
resend-brand | Brand colors, typography, logos, and visual identity — marketing materials, social graphics, presentations, and any external-facing content | brand-guidelines/SKILL.md |
resend-design-system | Product UI in the Resend codebase — src/ui/ component APIs, design tokens, code patterns, and UX heuristics (dialog vs stepper, disable vs hide, error surfaces, etc.) | design-system/SKILL.md |
marketing-pages | Creating, updating, or deleting marketing pages in src/app/(website)/ — page structure, public primitives, SEO metadata | marketing-pages/SKILL.md |
design-audit | "Audit design", "design alignment", "dashboard design audit", or the scheduled Monday routine — checks the dashboard for design system violations | design-audit/SKILL.md |
Each skill is a folder with a SKILL.md (frontmatter + guidelines) and optional references/.
design-skills/
├── SKILL.md # This index file
├── brand-guidelines/
│ └── SKILL.md # Resend brand skill
├── design-system/
│ ├── SKILL.md # Resend design system skill
│ └── references/
│ ├── components.md
│ ├── design-tokens.md
│ ├── component-conventions.md # CVA/compound-component code conventions
│ ├── patterns/
│ │ └── README.md # Documented UI composition patterns (concept, not code conventions above)
│ ├── heuristics.md # Index of Resend UX heuristics
│ └── heuristics/ # One file per heuristic (dialog vs stepper, etc.)
├── design-audit/
│ ├── SKILL.md # Design audit skill
│ └── references/
│ ├── rubric.md # Index of rubric/ + merged rule/pattern/heuristic table
│ ├── rubric/ # One file per audit category
│ ├── report-format.md
│ └── linear-delivery.md
├── marketing-pages/
│ ├── SKILL.md # Marketing pages skill
│ └── references/
│ └── components.md
└── tests/
└── TESTS.md # Combined test suite
Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
Audit the Resend dashboard for design system alignment. Routes here when a user says "audit design", "design alignment", "dashboard design audit", asks about undocumented components or design violations, or when triggered by the scheduled weekly routine.
Use when building or modifying UI in the Resend codebase. Provides component APIs, variant options, design tokens, composition patterns for all src/ui/ primitives, and the Resend heuristics for UX decisions like dialog-vs-stepper or disable-vs-hide.
Use when creating, updating, editing, or deleting marketing/public pages in the Resend codebase. Covers page structure, component reuse rules, and the distinction between public and product design systems.