PluginBench
Skill
Official
Review
Audit score 70

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-skills
Claude Code
Cursor
Windsurf
Cline

How to use resend-design-skills

  1. 1.Install the skill: npx skills add https://github.com/resend/design-skills --skill resend-design-skills
  2. 2.Identify which sub-skill you need: resend-brand, resend-design-system, marketing-pages, or design-audit
  3. 3.Install the specific sub-skill from the available skills table
  4. 4.Reference the SKILL.md file in that sub-skill's folder for detailed guidelines and patterns

Use cases

Good for
  • 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
Who it's for
  • 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

What's the difference between resend-brand and resend-design-system?

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.

When should I use the design-audit skill?

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.

Can I use marketing-pages for internal dashboards?

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.

Do I need to install all four sub-skills?

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

SkillDescriptionPath
resend-brandApplies Resend's brand colors, typography, and visual identity to marketing materials and artifactsbrand-guidelines/SKILL.md
resend-design-systemUI component APIs, design tokens, and composition patterns for building product UI in the Resend codebasedesign-system/SKILL.md
marketing-pagesPage structure, component reuse rules, and public primitives for creating/editing marketing pages in src/app/(website)/marketing-pages/SKILL.md
design-auditAudits the Resend dashboard for design system alignment — missing docs, component substitution, token misuse, deprecated usage, and pattern candidatesdesign-audit/SKILL.md

When to use which skill

  • resend-brand — Marketing pages, social graphics, presentations, documents, and any external-facing visual content
  • resend-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 codebase
  • marketing-pages — Creating, updating, or deleting marketing pages in src/app/(website)/, including page structure, public primitives, and SEO metadata
  • design-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 name and description
  • 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