resend-design-skills

★ 37

by resend · part of resend/design-skills

Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns.

🔥🔥✓ VerifiedFreeQuick setup

#git #marketing

🔒 Repo-maintenance skill. It exists to help maintain resend/design-skills itself — it's only useful if you contribute code to that project.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

Design Skills

A collection of design-related skills for Claude Code.

Available Skills

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

Structure

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