resend-design-skills
resend/design-skills
Route to Resend's brand guidelines, design system, marketing page patterns, and design audit tools.
What is resend-design-skills?
A collection of four specialized design skills for Claude Code: resend-brand for marketing visuals, resend-design-system for product UI and tokens, marketing-pages for website content, and design-audit for dashboard alignment checks. Use this to discover and install the specific design skill you need.
- Routes to brand guidelines, visual identity, and typography for external-facing content
- Provides UI component APIs, design tokens, and composition patterns for product development
- Enables creation and editing of marketing pages with structure rules and public primitives
- Audits dashboard design for system alignment, deprecated usage, and pattern candidates
How to install resend-design-skills
npx skills add https://github.com/resend/design-skills --skill resend-design-skillsHow to use resend-design-skills
- 1.Install the skill: npx skills add https://github.com/resend/design-skills --skill resend-design-skills
- 2.Identify which sub-skill you need: resend-brand, resend-design-system, marketing-pages, or design-audit
- 3.Install the specific sub-skill from the available skills table
- 4.Reference the SKILL.md file in that sub-skill's folder for detailed guidelines and patterns
Use cases
- Finding the right design skill when working on Resend marketing materials or product UI
- Applying brand colors and typography to social graphics or presentations
- Building product UI components using Resend's design system and tokens
- Creating or updating marketing pages in src/app/(website)/
- Running scheduled design alignment audits on the Resend dashboard
- Product designers working on Resend UI
- Frontend engineers building with Resend's design system
- Marketing teams creating external-facing content
- Design systems maintainers auditing dashboard alignment
resend-design-skills FAQ
resend-brand is for external-facing marketing content (social graphics, presentations, documents), while resend-design-system is for product UI, components, and design tokens inside the Resend codebase.
Use design-audit when you need to check dashboard design for system alignment, find missing documentation, spot component substitution issues, or identify deprecated usage patterns.
No, marketing-pages is specifically for creating and editing pages in src/app/(website)/, the public marketing site. Use resend-design-system for internal product UI.
No, install only the sub-skill that matches your task. This parent skill is a router to help you find the right one.
Full instructions (SKILL.md)
Source of truth, from resend/design-skills.
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.0"
Design Skills
A collection of design-related skills for Claude Code.
Available Skills
| Skill | Description | Path |
|---|---|---|
resend-brand | Applies Resend's brand colors, typography, and visual identity to marketing materials and artifacts | brand-guidelines/SKILL.md |
resend-design-system | UI component APIs, design tokens, and composition patterns for building product UI in the Resend codebase | design-system/SKILL.md |
marketing-pages | Page structure, component reuse rules, and public primitives for creating/editing marketing pages in src/app/(website)/ | marketing-pages/SKILL.md |
design-audit | Audits the Resend dashboard for design system alignment — missing docs, component substitution, token misuse, deprecated usage, and pattern candidates | design-audit/SKILL.md |
When to use which skill
resend-brand— Marketing pages, social graphics, presentations, documents, and any external-facing visual contentresend-design-system— Product UI,src/ui/components, design tokens, code patterns, and the Resend heuristics for UX decisions (dialog vs stepper, disable vs hide, error surfaces, etc.) inside the Resend codebasemarketing-pages— Creating, updating, or deleting marketing pages insrc/app/(website)/, including page structure, public primitives, and SEO metadatadesign-audit— "Audit design", "design alignment", "dashboard design audit", or the scheduled Monday routine
Structure
Each skill lives in its own folder with a SKILL.md file that defines:
- Frontmatter with
nameanddescription - Guidelines, rules, and reference material
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
│ ├── patterns.md
│ ├── patterns/
│ │ └── README.md # Documented UI composition patterns
│ ├── 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
│ ├── report-format.md
│ └── linear-delivery.md
├── marketing-pages/
│ ├── SKILL.md # Marketing pages skill
│ └── references/
│ └── components.md
└── tests/
└── TESTS.md # Combined test suite
Related skills
More from resend/design-skills and the wider catalog.

agent-email-inbox
Secure email inbox for AI agents with sender validation and sandboxed processing.

email-best-practices
Comprehensive guidance for building deliverable, compliant, and accessible emails.

react-email
Build and send HTML emails using React components with a modern, component-based approach.

resend
Send, receive, and manage transactional emails via the Resend API with built-in webhook verification and template support.

resend-cli
Operate Resend email platform from the terminal — send, manage domains, contacts, templates, and more via CLI.

fiction-workshop
Multi-stage editorial workflow for collaborative novel and fiction manuscript development.