Design Skills

A collection of design-related skills for Claude Code.

Available Skills

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