Resend Design Skills
Route the agent to the right Resend skill—brand, design system, marketing pages, or dashboard design audit—instead of guessing tokens and folder structure.
Overview
Resend-design-skills is an agent skill most often used in Build (also Launch distribution, Ship review) that routes Claude to Resend brand, design-system, marketing-page, and design-audit skills.
Install
npx skills add https://github.com/resend/design-skills --skill resend-design-skillsWhat is this skill?
- Meta-router with four documented child skills: resend-brand, resend-design-system, marketing-pages, design-audit
- Explicit when-to-use matrix: external brand vs product UI vs website routes vs dashboard alignment audit
- Deep links to brand-guidelines, design-system, marketing-pages, and design-audit SKILL.md paths
- Targets Resend codebase conventions: src/app/(website)/, src/ui/, and dashboard design-system compliance
- Versioned package metadata (author resend, v1.0.0) for traceable design guidance
- 4 child skills documented in the routing table
- Package version 1.0.0 in skill metadata
Adoption & trust: 890 installs on skills.sh; 25 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are editing Resend UI or marketing surfaces but the agent applies the wrong guidance—brand decks rules on dashboard components or vice versa.
Who is it for?
Contributors or fork teams working in the Resend repo who need consistent routing between brand, product UI, and website pages.
Skip if: Greenfield products with no Resend codebase unless you only want abstract design inspiration without Resend-specific paths.
When should I use this skill?
Use when needing Resend design resources—brand guidelines, visual identity, UI components, design tokens, or marketing page patterns.
What do I get? / Deliverables
The agent selects the correct nested Resend skill path and follows documented tokens, components, or audit checks for that surface.
- Correct child skill invoked
- Edits aligned to brand, design-system, or marketing-page rules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build frontend because most Resend design-system and UI composition work happens in product code under src/ui and tokens. Frontend subphase covers component APIs, tokens, and marketing page primitives tied to the Resend app and website tree.
Where it fits
Implement a new settings panel using resend-design-system tokens and src/ui composition rules.
Add a pricing page under src/app/(website)/ with marketing-pages structure and resend-brand typography.
Run design-audit before merge to catch deprecated components and token misuse in the dashboard.
Produce external-facing slides that follow resend-brand colors instead of ad-hoc CSS variables.
How it compares
A meta router over four Resend-specific child skills—not a generic Tailwind or Figma MCP integration.
Common Questions / FAQ
Who is resend-design-skills for?
Developers and designers using Claude in the Resend monorepo or closely aligned forks who need the right design playbook per surface.
When should I use resend-design-skills?
At Build when changing src/ui or tokens; at Launch when creating marketing-pages under src/app/(website)/; before Ship review when running design-audit on the dashboard.
Is resend-design-skills safe to install?
Check Prism’s Security Audits panel and read each linked child SKILL.md; meta skills only orchestrate—permissions follow the skill you invoke.
SKILL.md
READMESKILL.md - Resend Design Skills
# 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](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](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](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](design-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, and code patterns 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 ├── 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 ``` --- name: design-audit description: Audit the Resend dashboard for design system alignment. Routes here when a user says "audit design", "design alignment", "dashboard design audit", or when triggered by the scheduled weekly routine. metadata: author: resend version: "1.0.0" --- # Design Audit Skill Audits `src/app/(dashboard)*` for design system compliance and `src/ui/` for documentation coverage. Reports findings without modifying any source files or opening PRs. ## When to invoke - User says "audit design", "run design audit", "dashboard design alignment" - The scheduled Monday routine fires this skill - User asks about undocumented components or design violations ## How to run the audit **This skill is read-only. Never edit source files, create branches, or open PRs.** ### Step 1 — Load context 1. Read `src/app/(internal)/design/_common/sidebar-data.ts` to extract: - The ignore list (files that should not be documented: `_common`, `layout.tsx`, `shared.ts`, `page.tsx`, `todo`) - The alias map (e.g. `"avatar team"` → `"avatar"`, `"command"` → `"combobox"`) 2. Read `src/app/(internal)/design/_common/documented-components.json` for the list of documented components 3. Read `src/app/(internal)/design/_common/documented-patterns.json` for the list of documented patterns 4. Get the current commit SHA: `git