resend/marketing-pages
marketing-pages/SKILL.md
Use when creating, updating, editing, or deleting marketing/public pages in the Resend codebase. Covers page structure, component reuse rules, and the distinction between public and product design systems.
$ install --global
skillsauthnpx skillsauth add resend/design-skills marketing-pagesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 3:02 PM21.0s2 files scanned
SKILL.md
- name:
- marketing-pages
- description:
- Use when creating, updating, editing, or deleting marketing/public pages in the Resend codebase. Covers page structure, component reuse rules, and the distinction between public and product design systems.
Scope
Marketing pages live in src/app/(website)/. Product pages live in src/app/(dashboard)/. This skill covers the (website) route group only.
Critical Rule: Always Reuse, Never Create
Before writing any component, search for an existing one. The codebase has two separate component systems — never mix them.
| System | Path | Use for |
|--------|------|---------|
| Product UI | src/ui/ | Dashboard/authenticated pages only |
| Public primitives | src/website/ | Marketing pages typography, buttons |
| Public compositions | src/components/website/ | Marketing feature sections |
| Page structure | src/components/public-page.tsx | Every marketing page layout |
Page Structure (required pattern)
Every marketing page must follow this composition:
import * as PublicPage from '@/components/public-page';
export default function MyPage() {
return (
<>
<script type="application/ld+json" ... /> {/* SEO JSON-LD */}
<PublicPage.Root>
<PublicPage.Header />
<MyPageHero /> {/* or PublicPage.Hero */}
<PublicPage.Container>
{/* feature sections */}
<CallToAction />
</PublicPage.Container>
<PublicPage.Footer />
</PublicPage.Root>
</>
);
}
Public Primitives (src/website/)
Use these instead of src/ui/ equivalents on marketing pages:
PublicHeading— sizes 1–6, colors:white|gradientPublicText— sizes 1–5, colors:white|gray|gradient, weights:normal|medium|semibold|boldPublicButton— appearances:white(default) |black|black-fade|fade|red; sizes:2|3|4; supportsasChild,iconLeft,iconRightPublicPage.accordion— accordion sectionsPublicPage.avatar— avatar components
See references/components.md for full APIs and src/components/website/ inventory.
Metadata & SEO (required for new pages)
export const metadata: Metadata = {
alternates: { canonical: '/your-path' },
title: 'Page Title · Resend',
description: '...',
openGraph: { images: [{ url: '/static/cover-image.jpg' }] },
};
Always add JSON-LD structured data using getCompanyJsonLd() from @/utils/json-ld and getBaseUrl() from @/utils/base-url.
Adding a New Marketing Page
- Create
src/app/(website)/your-page/page.tsx - Use
PublicPage.Root/Header/Container/Footerstructure - Create page-specific sections in
src/components/product-pages/your-page/or reuse fromsrc/components/website/ - Add
metadataexport and JSON-LD script - Update footer links in
src/components/public-page.tsxif needed
Deleting a Marketing Page
- Remove
src/app/(website)/your-page/directory - Remove related components in
src/components/product-pages/your-page/if page-specific - Remove footer/nav links referencing the page
- Add redirect in
next.config.tsif the URL was public
Styling Notes
- Marketing pages use
src/styles/website.css(loaded via(website)/layout.tsx) - Theme is forced dark — do not use light-mode-only classes
- Use Tailwind v4 utilities; avoid inline styles
src/ui/classes may conflict — always prefersrc/website/primitives
References
references/components.md— Full component inventory with props and import paths
Related Skills
resend/design-audit
testing
VerifiedTrustedCommunity
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.
25SKILL.mdUpdated Apr 23, 2026
resend/resend-design-system
development
VerifiedTrustedCommunity
Use when building or modifying UI in the Resend codebase. Provides component APIs, variant options, design tokens, and composition patterns for all src/ui/ primitives.
25SKILL.mdUpdated Apr 22, 2026
resend/resend-design-skills
documentation
VerifiedTrustedCommunity
Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns.
23SKILL.mdUpdated Apr 22, 2026
resend/resend-brand
documentation
VerifiedTrustedCommunity
Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
19SKILL.mdUpdated Apr 22, 2026