[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DRZRRM4HF7KZ0YR5JBKMGM":3,"skill-same:01M6DRZRRM4HF7KZ0YR5JBKMGM":106},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":28,"linkOnly":29,"markdownContent":30,"markdownBody":31,"frontMatter":32,"refName":33,"commitSha":34,"skillDirectory":35,"forksCount":36,"repositoryHtmlUrl":37,"repositoryHomepageUrl":6,"ownerHtmlUrl":38,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":39,"install":40,"resources":53},"01M6DRZRRM4HF7KZ0YR5JBKMGM","email-template-builder",null,"Email Template Builder","zhangzhang-111-i\u002Fclaude-skills111","zhangzhang-111-i","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F251344927?v=4","01M6DRBP4NCM1ZCHTT0FW0SQHD","lixiying","01M6DRBPAMFDJSGQ69XPK9KM9J",3,"MIT","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fengineering-team\u002Femail-template-builder\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通","SCENARIO","使用场景",[24,25,26,27],"email","template","email template builder","builder","2026-11-10 10:12:30",false,"---\nname: \"email-template-builder\"\ndescription: \"Email Template Builder\"\n---\n\n# Email Template Builder\n\n**Tier:** POWERFUL  \n**Category:** Engineering Team  \n**Domain:** Transactional Email \u002F Communications Infrastructure\n\n---\n\n## Overview\n\nBuild complete transactional email systems: React Email templates, provider integration, preview server, i18n support, dark mode, spam optimization, and analytics tracking. Output production-ready code for Resend, Postmark, SendGrid, or AWS SES.\n\n---\n\n## Core Capabilities\n\n- React Email templates (welcome, verification, password reset, invoice, notification, digest)\n- MJML templates for maximum email client compatibility\n- Multi-provider support with unified sending interface\n- Local preview server with hot reload\n- i18n\u002Flocalization with typed translation keys\n- Dark mode support using media queries\n- Spam score optimization checklist\n- Open\u002Fclick tracking with UTM parameters\n\n---\n\n## When to Use\n\n- Setting up transactional email for a new product\n- Migrating from a legacy email system\n- Adding new email types (invoice, digest, notification)\n- Debugging email deliverability issues\n- Implementing i18n for email templates\n\n---\n\n## Project Structure\n\n```\nemails\u002F\n├── components\u002F\n│   ├── layout\u002F\n│   │   ├── email-layout.tsx       # Base layout with brand header\u002Ffooter\n│   │   └── email-button.tsx       # CTA button component\n│   ├── partials\u002F\n│   │   ├── header.tsx\n│   │   └── footer.tsx\n├── templates\u002F\n│   ├── welcome.tsx\n│   ├── verify-email.tsx\n│   ├── password-reset.tsx\n│   ├── invoice.tsx\n│   ├── notification.tsx\n│   └── weekly-digest.tsx\n├── lib\u002F\n│   ├── send.ts                    # Unified send function\n│   ├── providers\u002F\n│   │   ├── resend.ts\n│   │   ├── postmark.ts\n│   │   └── ses.ts\n│   └── tracking.ts                # UTM + analytics\n├── i18n\u002F\n│   ├── en.ts\n│   └── de.ts\n└── preview\u002F                       # Dev preview server\n    └── server.ts\n```\n\n---\n\n## Base Email Layout\n\n```tsx\n\u002F\u002F emails\u002Fcomponents\u002Flayout\u002Femail-layout.tsx\nimport {\n  Body, Container, Head, Html, Img, Preview, Section, Text, Hr, Font\n} from \"@react-email\u002Fcomponents\"\n\ninterface EmailLayoutProps {\n  preview: string\n  children: React.ReactNode\n}\n\nexport function EmailLayout({ preview, children }: EmailLayoutProps) {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        \u003CFont\n          fontFamily=\"Inter\"\n          fallbackFontFamily=\"Arial\"\n          webFont={{ url: \"https:\u002F\u002Ffonts.gstatic.com\u002Fs\u002Finter\u002Fv13\u002FUcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2\", format: \"woff2\" }}\n          fontWeight={400}\n          fontStyle=\"normal\"\n        \u002F>\n        {\u002F* Dark mode styles *\u002F}\n        \u003Cstyle>{`\n          @media (prefers-color-scheme: dark) {\n            .email-body { background-color: #0f0f0f !important; }\n            .email-container { background-color: #1a1a1a !important; }\n            .email-text { color: #e5e5e5 !important; }\n            .email-heading { color: #ffffff !important; }\n            .email-divider { border-color: #333333 !important; }\n          }\n        `}\u003C\u002Fstyle>\n      \u003C\u002FHead>\n      \u003CPreview>{preview}\u003C\u002FPreview>\n      \u003CBody className=\"email-body\" style={styles.body}>\n        \u003CContainer className=\"email-container\" style={styles.container}>\n          {\u002F* Header *\u002F}\n          \u003CSection style={styles.header}>\n            \u003CImg src=\"https:\u002F\u002Fyourapp.com\u002Flogo.png\" width={120} height={40} alt=\"MyApp\" \u002F>\n          \u003C\u002FSection>\n          \n          {\u002F* Content *\u002F}\n          \u003CSection style={styles.content}>\n            {children}\n          \u003C\u002FSection>\n          \n          {\u002F* Footer *\u002F}\n          \u003CHr style={styles.divider} \u002F>\n          \u003CSection style={styles.footer}>\n            \u003CText style={styles.footerText}>\n              MyApp Inc. · 123 Main St · San Francisco, CA 94105\n            \u003C\u002FText>\n            \u003CText style={styles.footerText}>\n              \u003Ca href=\"{{unsubscribe_url}}\" style={styles.link}>Unsubscribe\u003C\u002Fa>\n              {\" · \"}\n              \u003Ca href=\"https:\u002F\u002Fyourapp.com\u002Fprivacy\" style={styles.link}>Privacy Policy\u003C\u002Fa>\n            \u003C\u002FText>\n          \u003C\u002FSection>\n        \u003C\u002FContainer>\n      \u003C\u002FBody>\n    \u003C\u002FHtml>\n  )\n}\n\nconst styles = {\n  body: { backgroundColor: \"#f5f5f5\", fontFamily: \"Inter, Arial, sans-serif\" },\n  container: { maxWidth: \"600px\", margin: \"0 auto\", backgroundColor: \"#ffffff\", borderRadius: \"8px\", overflow: \"hidden\" },\n  header: { padding: \"24px 32px\", borderBottom: \"1px solid #e5e5e5\" },\n  content: { padding: \"32px\" },\n  divider: { borderColor: \"#e5e5e5\", margin: \"0 32px\" },\n  footer: { padding: \"24px 32px\" },\n  footerText: { fontSize: \"12px\", color: \"#6b7280\", textAlign: \"center\" as const, margin: \"4px 0\" },\n  link: { color: \"#6b7280\", textDecoration: \"underline\" },\n}\n```\n\n---\n\n## Welcome Email\n\n```tsx\n\u002F\u002F emails\u002Ftemplates\u002Fwelcome.tsx\nimport { Button, Heading, Text } from \"@react-email\u002Fcomponents\"\nimport { EmailLayout } from \"..\u002Fcomponents\u002Flayout\u002Femail-layout\"\n\ninterface WelcomeEmailProps {\n  name: \"string\"\n  confirmUrl: string\n  trialDays?: number\n}\n\nexport function WelcomeEmail({ name, confirmUrl, trialDays = 14 }: WelcomeEmailProps) {\n  return (\n    \u003CEmailLayout preview={`Welcome to MyApp, ${name}! Confirm your email to get started.`}>\n      \u003CHeading style={styles.h1}>Welcome to MyApp, {name}!\u003C\u002FHeading>\n      \u003CText style={styles.text}>\n        We're excited to have you on board. You've got {trialDays} days to explore everything MyApp has to offer — no credit card required.\n      \u003C\u002FText>\n      \u003CText style={styles.text}>\n        First, confirm your email address to activate your account:\n      \u003C\u002FText>\n      \u003CButton href={confirmUrl} style={styles.button}>\n        Confirm Email Address\n      \u003C\u002FButton>\n      \u003CText style={styles.hint}>\n        Button not working? Copy and paste this link into your browser:\n        \u003Cbr \u002F>\n        \u003Ca href={confirmUrl} style={styles.link}>{confirmUrl}\u003C\u002Fa>\n      \u003C\u002FText>\n      \u003CText style={styles.text}>\n        Once confirmed, you can:\n      \u003C\u002FText>\n      \u003Cul style={styles.list}>\n        \u003Cli>Connect your first project in 2 minutes\u003C\u002Fli>\n        \u003Cli>Invite your team (free for up to 3 members)\u003C\u002Fli>\n        \u003Cli>Set up Slack notifications\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002FEmailLayout>\n  )\n}\n\nexport default WelcomeEmail\n\nconst styles = {\n  h1: { fontSize: \"28px\", fontWeight: \"700\", color: \"#111827\", margin: \"0 0 16px\" },\n  text: { fontSize: \"16px\", lineHeight: \"1.6\", color: \"#374151\", margin: \"0 0 16px\" },\n  button: { backgroundColor: \"#4f46e5\", color: \"#ffffff\", borderRadius: \"6px\", fontSize: \"16px\", fontWeight: \"600\", padding: \"12px 24px\", textDecoration: \"none\", display: \"inline-block\", margin: \"8px 0 24px\" },\n  hint: { fontSize: \"13px\", color: \"#6b7280\" },\n  link: { color: \"#4f46e5\" },\n  list: { fontSize: \"16px\", lineHeight: \"1.8\", color: \"#374151\", paddingLeft: \"20px\" },\n}\n```\n\n---\n\n## Invoice Email\n\n```tsx\n\u002F\u002F emails\u002Ftemplates\u002Finvoice.tsx\nimport { Row, Column, Section, Heading, Text, Hr, Button } from \"@react-email\u002Fcomponents\"\nimport { EmailLayout } from \"..\u002Fcomponents\u002Flayout\u002Femail-layout\"\n\ninterface InvoiceItem { description: string; amount: number }\n\ninterface InvoiceEmailProps {\n  name: \"string\"\n  invoiceNumber: string\n  invoiceDate: string\n  dueDate: string\n  items: InvoiceItem[]\n  total: number\n  currency: string\n  downloadUrl: string\n}\n\nexport function InvoiceEmail({ name, invoiceNumber, invoiceDate, dueDate, items, total, currency = \"USD\", downloadUrl }: InvoiceEmailProps) {\n  const formatter = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency })\n\n  return (\n    \u003CEmailLayout preview={`Invoice ${invoiceNumber} - ${formatter.format(total \u002F 100)}`}>\n      \u003CHeading style={styles.h1}>Invoice #{invoiceNumber}\u003C\u002FHeading>\n      \u003CText style={styles.text}>Hi {name},\u003C\u002FText>\n      \u003CText style={styles.text}>Here's your invoice from MyApp. Thank you for your continued support.\u003C\u002FText>\n\n      {\u002F* Invoice Meta *\u002F}\n      \u003CSection style={styles.metaBox}>\n        \u003CRow>\n          \u003CColumn>\u003CText style={styles.metaLabel}>Invoice Date\u003C\u002FText>\u003CText style={styles.metaValue}>{invoiceDate}\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={styles.metaLabel}>Due Date\u003C\u002FText>\u003CText style={styles.metaValue}>{dueDate}\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={styles.metaLabel}>Amount Due\u003C\u002FText>\u003CText style={styles.metaValueLarge}>{formatter.format(total \u002F 100)}\u003C\u002FText>\u003C\u002FColumn>\n        \u003C\u002FRow>\n      \u003C\u002FSection>\n\n      {\u002F* Line Items *\u002F}\n      \u003CSection style={styles.table}>\n        \u003CRow style={styles.tableHeader}>\n          \u003CColumn>\u003CText style={styles.tableHeaderText}>Description\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={{ ...styles.tableHeaderText, textAlign: \"right\" }}>Amount\u003C\u002FText>\u003C\u002FColumn>\n        \u003C\u002FRow>\n        {items.map((item, i) => (\n          \u003CRow key={i} style={i % 2 === 0 ? styles.tableRowEven : styles.tableRowOdd}>\n            \u003CColumn>\u003CText style={styles.tableCell}>{item.description}\u003C\u002FText>\u003C\u002FColumn>\n            \u003CColumn>\u003CText style={{ ...styles.tableCell, textAlign: \"right\" }}>{formatter.format(item.amount \u002F 100)}\u003C\u002FText>\u003C\u002FColumn>\n          \u003C\u002FRow>\n        ))}\n        \u003CHr style={styles.divider} \u002F>\n        \u003CRow>\n          \u003CColumn>\u003CText style={styles.totalLabel}>Total\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={styles.totalValue}>{formatter.format(total \u002F 100)}\u003C\u002FText>\u003C\u002FColumn>\n        \u003C\u002FRow>\n      \u003C\u002FSection>\n\n      \u003CButton href={downloadUrl} style={styles.button}>Download PDF Invoice\u003C\u002FButton>\n    \u003C\u002FEmailLayout>\n  )\n}\n\nexport default InvoiceEmail\n\nconst styles = {\n  h1: { fontSize: \"24px\", fontWeight: \"700\", color: \"#111827\", margin: \"0 0 16px\" },\n  text: { fontSize: \"15px\", lineHeight: \"1.6\", color: \"#374151\", margin: \"0 0 12px\" },\n  metaBox: { backgroundColor: \"#f9fafb\", borderRadius: \"8px\", padding: \"16px\", margin: \"16px 0\" },\n  metaLabel: { fontSize: \"12px\", color: \"#6b7280\", fontWeight: \"600\", textTransform: \"uppercase\" as const, margin: \"0 0 4px\" },\n  metaValue: { fontSize: \"14px\", color: \"#111827\", margin: 0 },\n  metaValueLarge: { fontSize: \"20px\", fontWeight: \"700\", color: \"#4f46e5\", margin: 0 },\n  table: { width: \"100%\", margin: \"16px 0\" },\n  tableHeader: { backgroundColor: \"#f3f4f6\", borderRadius: \"4px\" },\n  tableHeaderText: { fontSize: \"12px\", fontWeight: \"600\", color: \"#374151\", padding: \"8px 12px\", textTransform: \"uppercase\" as const },\n  tableRowEven: { backgroundColor: \"#ffffff\" },\n  tableRowOdd: { backgroundColor: \"#f9fafb\" },\n  tableCell: { fontSize: \"14px\", color: \"#374151\", padding: \"10px 12px\" },\n  divider: { borderColor: \"#e5e5e5\", margin: \"8px 0\" },\n  totalLabel: { fontSize: \"16px\", fontWeight: \"700\", color: \"#111827\", padding: \"8px 12px\" },\n  totalValue: { fontSize: \"16px\", fontWeight: \"700\", color: \"#111827\", textAlign: \"right\" as const, padding: \"8px 12px\" },\n  button: { backgroundColor: \"#4f46e5\", color: \"#fff\", borderRadius: \"6px\", padding: \"12px 24px\", fontSize: \"15px\", fontWeight: \"600\", textDecoration: \"none\" },\n}\n```\n\n---\n\n## Unified Send Function\n\n```typescript\n\u002F\u002F emails\u002Flib\u002Fsend.ts\nimport { Resend } from \"resend\"\nimport { render } from \"@react-email\u002Frender\"\nimport { WelcomeEmail } from \"..\u002Ftemplates\u002Fwelcome\"\nimport { InvoiceEmail } from \"..\u002Ftemplates\u002Finvoice\"\nimport { addTrackingParams } from \".\u002Ftracking\"\n\nconst resend = new Resend(process.env.RESEND_API_KEY)\n\ntype EmailPayload =\n  | { type: \"welcome\"; props: Parameters\u003Ctypeof WelcomeEmail>[0] }\n  | { type: \"invoice\"; props: Parameters\u003Ctypeof InvoiceEmail>[0] }\n\nexport async function sendEmail(to: string, payload: EmailPayload) {\n  const templates = {\n    welcome: { component: WelcomeEmail, subject: \"Welcome to MyApp — confirm your email\" },\n    invoice: { component: InvoiceEmail, subject: `Invoice from MyApp` },\n  }\n\n  const template = templates[payload.type]\n  const html = render(template.component(payload.props as any))\n  const trackedHtml = addTrackingParams(html, { campaign: payload.type })\n\n  const result = await resend.emails.send({\n    from: \"MyApp \u003Chello@yourapp.com>\",\n    to,\n    subject: template.subject,\n    html: trackedHtml,\n    tags: [{ name: \"email-type\", value: payload.type }],\n  })\n\n  return result\n}\n```\n\n---\n\n## Preview Server Setup\n\n```typescript\n\u002F\u002F package.json scripts\n{\n  \"scripts\": {\n    \"email:dev\": \"email dev --dir emails\u002Ftemplates --port 3001\",\n    \"email:build\": \"email export --dir emails\u002Ftemplates --outDir emails\u002Fout\"\n  }\n}\n\n\u002F\u002F Run: npm run email:dev\n\u002F\u002F Opens: http:\u002F\u002Flocalhost:3001\n\u002F\u002F Shows all templates with live preview and hot reload\n```\n\n---\n\n## i18n Support\n\n```typescript\n\u002F\u002F emails\u002Fi18n\u002Fen.ts\nexport const en = {\n  welcome: {\n    preview: (name: \"string-welcome-to-myapp-name\"\n    heading: (name: \"string-welcome-to-myapp-name\"\n    body: (days: number) => `You've got ${days} days to explore everything.`,\n    cta: \"Confirm Email Address\",\n  },\n}\n\n\u002F\u002F emails\u002Fi18n\u002Fde.ts\nexport const de = {\n  welcome: {\n    preview: (name: \"string-willkommen-bei-myapp-name\"\n    heading: (name: \"string-willkommen-bei-myapp-name\"\n    body: (days: number) => `Du hast ${days} Tage Zeit, alles zu erkunden.`,\n    cta: \"E-Mail-Adresse bestätigen\",\n  },\n}\n\n\u002F\u002F Usage in template\nimport { en, de } from \"..\u002Fi18n\"\nconst t = locale === \"de\" ? de : en\n```\n\n---\n\n## Spam Score Optimization Checklist\n\n- [ ] Sender domain has SPF, DKIM, and DMARC records configured\n- [ ] From address uses your own domain (not gmail.com\u002Fhotmail.com)\n- [ ] Subject line under 50 characters, no ALL CAPS, no \"FREE!!!\"\n- [ ] Text-to-image ratio: at least 60% text\n- [ ] Plain text version included alongside HTML\n- [ ] Unsubscribe link in every marketing email (CAN-SPAM, GDPR)\n- [ ] No URL shorteners — use full branded links\n- [ ] No red-flag words: \"guarantee\", \"no risk\", \"limited time offer\" in subject\n- [ ] Single CTA per email — no 5 different buttons\n- [ ] Image alt text on every image\n- [ ] HTML validates — no broken tags\n- [ ] Test with Mail-Tester.com before first send (target: 9+\u002F10)\n\n---\n\n## Analytics Tracking\n\n```typescript\n\u002F\u002F emails\u002Flib\u002Ftracking.ts\ninterface TrackingParams {\n  campaign: string\n  medium?: string\n  source?: string\n}\n\nexport function addTrackingParams(html: string, params: TrackingParams): string {\n  const utmString = new URLSearchParams({\n    utm_source: params.source ?? \"email\",\n    utm_medium: params.medium ?? \"transactional\",\n    utm_campaign: params.campaign,\n  }).toString()\n\n  \u002F\u002F Add UTM params to all links in the email\n  return html.replace(\u002Fhref=\"(https?:\\\u002F\\\u002F[^\"]+)\"\u002Fg, (match, url) => {\n    const separator = url.includes(\"?\") ? \"&\" : \"?\"\n    return `href=\"${url}${separator}${utmString}\"`\n  })\n}\n```\n\n---\n\n## Common Pitfalls\n\n- **Inline styles required** — most email clients strip `\u003Chead>` styles; React Email handles this\n- **Max width 600px** — anything wider breaks on Gmail mobile\n- **No flexbox\u002Fgrid** — use `\u003CRow>` and `\u003CColumn>` from react-email, not CSS grid\n- **Dark mode media queries** — must use `!important` to override inline styles\n- **Missing plain text** — all major providers have a plain text field; always populate it\n- **Transactional vs marketing** — use separate sending domains\u002FIPs to protect deliverability\n","# Email Template Builder\n\n**Tier:** POWERFUL  \n**Category:** Engineering Team  \n**Domain:** Transactional Email \u002F Communications Infrastructure\n\n---\n\n## Overview\n\nBuild complete transactional email systems: React Email templates, provider integration, preview server, i18n support, dark mode, spam optimization, and analytics tracking. Output production-ready code for Resend, Postmark, SendGrid, or AWS SES.\n\n---\n\n## Core Capabilities\n\n- React Email templates (welcome, verification, password reset, invoice, notification, digest)\n- MJML templates for maximum email client compatibility\n- Multi-provider support with unified sending interface\n- Local preview server with hot reload\n- i18n\u002Flocalization with typed translation keys\n- Dark mode support using media queries\n- Spam score optimization checklist\n- Open\u002Fclick tracking with UTM parameters\n\n---\n\n## When to Use\n\n- Setting up transactional email for a new product\n- Migrating from a legacy email system\n- Adding new email types (invoice, digest, notification)\n- Debugging email deliverability issues\n- Implementing i18n for email templates\n\n---\n\n## Project Structure\n\n```\nemails\u002F\n├── components\u002F\n│   ├── layout\u002F\n│   │   ├── email-layout.tsx       # Base layout with brand header\u002Ffooter\n│   │   └── email-button.tsx       # CTA button component\n│   ├── partials\u002F\n│   │   ├── header.tsx\n│   │   └── footer.tsx\n├── templates\u002F\n│   ├── welcome.tsx\n│   ├── verify-email.tsx\n│   ├── password-reset.tsx\n│   ├── invoice.tsx\n│   ├── notification.tsx\n│   └── weekly-digest.tsx\n├── lib\u002F\n│   ├── send.ts                    # Unified send function\n│   ├── providers\u002F\n│   │   ├── resend.ts\n│   │   ├── postmark.ts\n│   │   └── ses.ts\n│   └── tracking.ts                # UTM + analytics\n├── i18n\u002F\n│   ├── en.ts\n│   └── de.ts\n└── preview\u002F                       # Dev preview server\n    └── server.ts\n```\n\n---\n\n## Base Email Layout\n\n```tsx\n\u002F\u002F emails\u002Fcomponents\u002Flayout\u002Femail-layout.tsx\nimport {\n  Body, Container, Head, Html, Img, Preview, Section, Text, Hr, Font\n} from \"@react-email\u002Fcomponents\"\n\ninterface EmailLayoutProps {\n  preview: string\n  children: React.ReactNode\n}\n\nexport function EmailLayout({ preview, children }: EmailLayoutProps) {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        \u003CFont\n          fontFamily=\"Inter\"\n          fallbackFontFamily=\"Arial\"\n          webFont={{ url: \"https:\u002F\u002Ffonts.gstatic.com\u002Fs\u002Finter\u002Fv13\u002FUcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2\", format: \"woff2\" }}\n          fontWeight={400}\n          fontStyle=\"normal\"\n        \u002F>\n        {\u002F* Dark mode styles *\u002F}\n        \u003Cstyle>{`\n          @media (prefers-color-scheme: dark) {\n            .email-body { background-color: #0f0f0f !important; }\n            .email-container { background-color: #1a1a1a !important; }\n            .email-text { color: #e5e5e5 !important; }\n            .email-heading { color: #ffffff !important; }\n            .email-divider { border-color: #333333 !important; }\n          }\n        `}\u003C\u002Fstyle>\n      \u003C\u002FHead>\n      \u003CPreview>{preview}\u003C\u002FPreview>\n      \u003CBody className=\"email-body\" style={styles.body}>\n        \u003CContainer className=\"email-container\" style={styles.container}>\n          {\u002F* Header *\u002F}\n          \u003CSection style={styles.header}>\n            \u003CImg src=\"https:\u002F\u002Fyourapp.com\u002Flogo.png\" width={120} height={40} alt=\"MyApp\" \u002F>\n          \u003C\u002FSection>\n          \n          {\u002F* Content *\u002F}\n          \u003CSection style={styles.content}>\n            {children}\n          \u003C\u002FSection>\n          \n          {\u002F* Footer *\u002F}\n          \u003CHr style={styles.divider} \u002F>\n          \u003CSection style={styles.footer}>\n            \u003CText style={styles.footerText}>\n              MyApp Inc. · 123 Main St · San Francisco, CA 94105\n            \u003C\u002FText>\n            \u003CText style={styles.footerText}>\n              \u003Ca href=\"{{unsubscribe_url}}\" style={styles.link}>Unsubscribe\u003C\u002Fa>\n              {\" · \"}\n              \u003Ca href=\"https:\u002F\u002Fyourapp.com\u002Fprivacy\" style={styles.link}>Privacy Policy\u003C\u002Fa>\n            \u003C\u002FText>\n          \u003C\u002FSection>\n        \u003C\u002FContainer>\n      \u003C\u002FBody>\n    \u003C\u002FHtml>\n  )\n}\n\nconst styles = {\n  body: { backgroundColor: \"#f5f5f5\", fontFamily: \"Inter, Arial, sans-serif\" },\n  container: { maxWidth: \"600px\", margin: \"0 auto\", backgroundColor: \"#ffffff\", borderRadius: \"8px\", overflow: \"hidden\" },\n  header: { padding: \"24px 32px\", borderBottom: \"1px solid #e5e5e5\" },\n  content: { padding: \"32px\" },\n  divider: { borderColor: \"#e5e5e5\", margin: \"0 32px\" },\n  footer: { padding: \"24px 32px\" },\n  footerText: { fontSize: \"12px\", color: \"#6b7280\", textAlign: \"center\" as const, margin: \"4px 0\" },\n  link: { color: \"#6b7280\", textDecoration: \"underline\" },\n}\n```\n\n---\n\n## Welcome Email\n\n```tsx\n\u002F\u002F emails\u002Ftemplates\u002Fwelcome.tsx\nimport { Button, Heading, Text } from \"@react-email\u002Fcomponents\"\nimport { EmailLayout } from \"..\u002Fcomponents\u002Flayout\u002Femail-layout\"\n\ninterface WelcomeEmailProps {\n  name: \"string\"\n  confirmUrl: string\n  trialDays?: number\n}\n\nexport function WelcomeEmail({ name, confirmUrl, trialDays = 14 }: WelcomeEmailProps) {\n  return (\n    \u003CEmailLayout preview={`Welcome to MyApp, ${name}! Confirm your email to get started.`}>\n      \u003CHeading style={styles.h1}>Welcome to MyApp, {name}!\u003C\u002FHeading>\n      \u003CText style={styles.text}>\n        We're excited to have you on board. You've got {trialDays} days to explore everything MyApp has to offer — no credit card required.\n      \u003C\u002FText>\n      \u003CText style={styles.text}>\n        First, confirm your email address to activate your account:\n      \u003C\u002FText>\n      \u003CButton href={confirmUrl} style={styles.button}>\n        Confirm Email Address\n      \u003C\u002FButton>\n      \u003CText style={styles.hint}>\n        Button not working? Copy and paste this link into your browser:\n        \u003Cbr \u002F>\n        \u003Ca href={confirmUrl} style={styles.link}>{confirmUrl}\u003C\u002Fa>\n      \u003C\u002FText>\n      \u003CText style={styles.text}>\n        Once confirmed, you can:\n      \u003C\u002FText>\n      \u003Cul style={styles.list}>\n        \u003Cli>Connect your first project in 2 minutes\u003C\u002Fli>\n        \u003Cli>Invite your team (free for up to 3 members)\u003C\u002Fli>\n        \u003Cli>Set up Slack notifications\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002FEmailLayout>\n  )\n}\n\nexport default WelcomeEmail\n\nconst styles = {\n  h1: { fontSize: \"28px\", fontWeight: \"700\", color: \"#111827\", margin: \"0 0 16px\" },\n  text: { fontSize: \"16px\", lineHeight: \"1.6\", color: \"#374151\", margin: \"0 0 16px\" },\n  button: { backgroundColor: \"#4f46e5\", color: \"#ffffff\", borderRadius: \"6px\", fontSize: \"16px\", fontWeight: \"600\", padding: \"12px 24px\", textDecoration: \"none\", display: \"inline-block\", margin: \"8px 0 24px\" },\n  hint: { fontSize: \"13px\", color: \"#6b7280\" },\n  link: { color: \"#4f46e5\" },\n  list: { fontSize: \"16px\", lineHeight: \"1.8\", color: \"#374151\", paddingLeft: \"20px\" },\n}\n```\n\n---\n\n## Invoice Email\n\n```tsx\n\u002F\u002F emails\u002Ftemplates\u002Finvoice.tsx\nimport { Row, Column, Section, Heading, Text, Hr, Button } from \"@react-email\u002Fcomponents\"\nimport { EmailLayout } from \"..\u002Fcomponents\u002Flayout\u002Femail-layout\"\n\ninterface InvoiceItem { description: string; amount: number }\n\ninterface InvoiceEmailProps {\n  name: \"string\"\n  invoiceNumber: string\n  invoiceDate: string\n  dueDate: string\n  items: InvoiceItem[]\n  total: number\n  currency: string\n  downloadUrl: string\n}\n\nexport function InvoiceEmail({ name, invoiceNumber, invoiceDate, dueDate, items, total, currency = \"USD\", downloadUrl }: InvoiceEmailProps) {\n  const formatter = new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency })\n\n  return (\n    \u003CEmailLayout preview={`Invoice ${invoiceNumber} - ${formatter.format(total \u002F 100)}`}>\n      \u003CHeading style={styles.h1}>Invoice #{invoiceNumber}\u003C\u002FHeading>\n      \u003CText style={styles.text}>Hi {name},\u003C\u002FText>\n      \u003CText style={styles.text}>Here's your invoice from MyApp. Thank you for your continued support.\u003C\u002FText>\n\n      {\u002F* Invoice Meta *\u002F}\n      \u003CSection style={styles.metaBox}>\n        \u003CRow>\n          \u003CColumn>\u003CText style={styles.metaLabel}>Invoice Date\u003C\u002FText>\u003CText style={styles.metaValue}>{invoiceDate}\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={styles.metaLabel}>Due Date\u003C\u002FText>\u003CText style={styles.metaValue}>{dueDate}\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={styles.metaLabel}>Amount Due\u003C\u002FText>\u003CText style={styles.metaValueLarge}>{formatter.format(total \u002F 100)}\u003C\u002FText>\u003C\u002FColumn>\n        \u003C\u002FRow>\n      \u003C\u002FSection>\n\n      {\u002F* Line Items *\u002F}\n      \u003CSection style={styles.table}>\n        \u003CRow style={styles.tableHeader}>\n          \u003CColumn>\u003CText style={styles.tableHeaderText}>Description\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={{ ...styles.tableHeaderText, textAlign: \"right\" }}>Amount\u003C\u002FText>\u003C\u002FColumn>\n        \u003C\u002FRow>\n        {items.map((item, i) => (\n          \u003CRow key={i} style={i % 2 === 0 ? styles.tableRowEven : styles.tableRowOdd}>\n            \u003CColumn>\u003CText style={styles.tableCell}>{item.description}\u003C\u002FText>\u003C\u002FColumn>\n            \u003CColumn>\u003CText style={{ ...styles.tableCell, textAlign: \"right\" }}>{formatter.format(item.amount \u002F 100)}\u003C\u002FText>\u003C\u002FColumn>\n          \u003C\u002FRow>\n        ))}\n        \u003CHr style={styles.divider} \u002F>\n        \u003CRow>\n          \u003CColumn>\u003CText style={styles.totalLabel}>Total\u003C\u002FText>\u003C\u002FColumn>\n          \u003CColumn>\u003CText style={styles.totalValue}>{formatter.format(total \u002F 100)}\u003C\u002FText>\u003C\u002FColumn>\n        \u003C\u002FRow>\n      \u003C\u002FSection>\n\n      \u003CButton href={downloadUrl} style={styles.button}>Download PDF Invoice\u003C\u002FButton>\n    \u003C\u002FEmailLayout>\n  )\n}\n\nexport default InvoiceEmail\n\nconst styles = {\n  h1: { fontSize: \"24px\", fontWeight: \"700\", color: \"#111827\", margin: \"0 0 16px\" },\n  text: { fontSize: \"15px\", lineHeight: \"1.6\", color: \"#374151\", margin: \"0 0 12px\" },\n  metaBox: { backgroundColor: \"#f9fafb\", borderRadius: \"8px\", padding: \"16px\", margin: \"16px 0\" },\n  metaLabel: { fontSize: \"12px\", color: \"#6b7280\", fontWeight: \"600\", textTransform: \"uppercase\" as const, margin: \"0 0 4px\" },\n  metaValue: { fontSize: \"14px\", color: \"#111827\", margin: 0 },\n  metaValueLarge: { fontSize: \"20px\", fontWeight: \"700\", color: \"#4f46e5\", margin: 0 },\n  table: { width: \"100%\", margin: \"16px 0\" },\n  tableHeader: { backgroundColor: \"#f3f4f6\", borderRadius: \"4px\" },\n  tableHeaderText: { fontSize: \"12px\", fontWeight: \"600\", color: \"#374151\", padding: \"8px 12px\", textTransform: \"uppercase\" as const },\n  tableRowEven: { backgroundColor: \"#ffffff\" },\n  tableRowOdd: { backgroundColor: \"#f9fafb\" },\n  tableCell: { fontSize: \"14px\", color: \"#374151\", padding: \"10px 12px\" },\n  divider: { borderColor: \"#e5e5e5\", margin: \"8px 0\" },\n  totalLabel: { fontSize: \"16px\", fontWeight: \"700\", color: \"#111827\", padding: \"8px 12px\" },\n  totalValue: { fontSize: \"16px\", fontWeight: \"700\", color: \"#111827\", textAlign: \"right\" as const, padding: \"8px 12px\" },\n  button: { backgroundColor: \"#4f46e5\", color: \"#fff\", borderRadius: \"6px\", padding: \"12px 24px\", fontSize: \"15px\", fontWeight: \"600\", textDecoration: \"none\" },\n}\n```\n\n---\n\n## Unified Send Function\n\n```typescript\n\u002F\u002F emails\u002Flib\u002Fsend.ts\nimport { Resend } from \"resend\"\nimport { render } from \"@react-email\u002Frender\"\nimport { WelcomeEmail } from \"..\u002Ftemplates\u002Fwelcome\"\nimport { InvoiceEmail } from \"..\u002Ftemplates\u002Finvoice\"\nimport { addTrackingParams } from \".\u002Ftracking\"\n\nconst resend = new Resend(process.env.RESEND_API_KEY)\n\ntype EmailPayload =\n  | { type: \"welcome\"; props: Parameters\u003Ctypeof WelcomeEmail>[0] }\n  | { type: \"invoice\"; props: Parameters\u003Ctypeof InvoiceEmail>[0] }\n\nexport async function sendEmail(to: string, payload: EmailPayload) {\n  const templates = {\n    welcome: { component: WelcomeEmail, subject: \"Welcome to MyApp — confirm your email\" },\n    invoice: { component: InvoiceEmail, subject: `Invoice from MyApp` },\n  }\n\n  const template = templates[payload.type]\n  const html = render(template.component(payload.props as any))\n  const trackedHtml = addTrackingParams(html, { campaign: payload.type })\n\n  const result = await resend.emails.send({\n    from: \"MyApp \u003Chello@yourapp.com>\",\n    to,\n    subject: template.subject,\n    html: trackedHtml,\n    tags: [{ name: \"email-type\", value: payload.type }],\n  })\n\n  return result\n}\n```\n\n---\n\n## Preview Server Setup\n\n```typescript\n\u002F\u002F package.json scripts\n{\n  \"scripts\": {\n    \"email:dev\": \"email dev --dir emails\u002Ftemplates --port 3001\",\n    \"email:build\": \"email export --dir emails\u002Ftemplates --outDir emails\u002Fout\"\n  }\n}\n\n\u002F\u002F Run: npm run email:dev\n\u002F\u002F Opens: http:\u002F\u002Flocalhost:3001\n\u002F\u002F Shows all templates with live preview and hot reload\n```\n\n---\n\n## i18n Support\n\n```typescript\n\u002F\u002F emails\u002Fi18n\u002Fen.ts\nexport const en = {\n  welcome: {\n    preview: (name: \"string-welcome-to-myapp-name\"\n    heading: (name: \"string-welcome-to-myapp-name\"\n    body: (days: number) => `You've got ${days} days to explore everything.`,\n    cta: \"Confirm Email Address\",\n  },\n}\n\n\u002F\u002F emails\u002Fi18n\u002Fde.ts\nexport const de = {\n  welcome: {\n    preview: (name: \"string-willkommen-bei-myapp-name\"\n    heading: (name: \"string-willkommen-bei-myapp-name\"\n    body: (days: number) => `Du hast ${days} Tage Zeit, alles zu erkunden.`,\n    cta: \"E-Mail-Adresse bestätigen\",\n  },\n}\n\n\u002F\u002F Usage in template\nimport { en, de } from \"..\u002Fi18n\"\nconst t = locale === \"de\" ? de : en\n```\n\n---\n\n## Spam Score Optimization Checklist\n\n- [ ] Sender domain has SPF, DKIM, and DMARC records configured\n- [ ] From address uses your own domain (not gmail.com\u002Fhotmail.com)\n- [ ] Subject line under 50 characters, no ALL CAPS, no \"FREE!!!\"\n- [ ] Text-to-image ratio: at least 60% text\n- [ ] Plain text version included alongside HTML\n- [ ] Unsubscribe link in every marketing email (CAN-SPAM, GDPR)\n- [ ] No URL shorteners — use full branded links\n- [ ] No red-flag words: \"guarantee\", \"no risk\", \"limited time offer\" in subject\n- [ ] Single CTA per email — no 5 different buttons\n- [ ] Image alt text on every image\n- [ ] HTML validates — no broken tags\n- [ ] Test with Mail-Tester.com before first send (target: 9+\u002F10)\n\n---\n\n## Analytics Tracking\n\n```typescript\n\u002F\u002F emails\u002Flib\u002Ftracking.ts\ninterface TrackingParams {\n  campaign: string\n  medium?: string\n  source?: string\n}\n\nexport function addTrackingParams(html: string, params: TrackingParams): string {\n  const utmString = new URLSearchParams({\n    utm_source: params.source ?? \"email\",\n    utm_medium: params.medium ?? \"transactional\",\n    utm_campaign: params.campaign,\n  }).toString()\n\n  \u002F\u002F Add UTM params to all links in the email\n  return html.replace(\u002Fhref=\"(https?:\\\u002F\\\u002F[^\"]+)\"\u002Fg, (match, url) => {\n    const separator = url.includes(\"?\") ? \"&\" : \"?\"\n    return `href=\"${url}${separator}${utmString}\"`\n  })\n}\n```\n\n---\n\n## Common Pitfalls\n\n- **Inline styles required** — most email clients strip `\u003Chead>` styles; React Email handles this\n- **Max width 600px** — anything wider breaks on Gmail mobile\n- **No flexbox\u002Fgrid** — use `\u003CRow>` and `\u003CColumn>` from react-email, not CSS grid\n- **Dark mode media queries** — must use `!important` to override inline styles\n- **Missing plain text** — all major providers have a plain text field; always populate it\n- **Transactional vs marketing** — use separate sending domains\u002FIPs to protect deliverability\n",{"name":5,"description":7},"main","c0a12fc98d85642fa8893e31fc5cf5dfad879de6","engineering-team\u002Femail-template-builder",0,"https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i","2026-03-13 21:49:18",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add zhangzhang-111-i\u002Fclaude-skills111 --skill email-template-builder",{"tool":46,"command":47},"bunx","bunx skills add zhangzhang-111-i\u002Fclaude-skills111 --skill email-template-builder",{"tool":49,"command":50},"pnpm","pnpm dlx skills add zhangzhang-111-i\u002Fclaude-skills111 --skill email-template-builder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fengineering-team\u002Femail-template-builder\u002FSKILL.md",true,[54,60,66,70,74,78,82,86,90,94,98,102],{"path":55,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":58,"sourceHtmlUrl":59},"assets\u002Fcreative-review-template.html","ASSET","资产文件",24459,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Fassets\u002Fcreative-review-template.html",{"path":61,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":64,"sourceHtmlUrl":65},"evals\u002Fevals.json","REFERENCE","参考文档",23976,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Fevals\u002Fevals.json",{"path":67,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":68,"sourceHtmlUrl":69},"references\u002Fcreative-review-page.md",9103,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fcreative-review-page.md",{"path":71,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Fcreative-roadmap.md",9010,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fcreative-roadmap.md",{"path":75,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fgenerative-tools.md",24104,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fgenerative-tools.md",{"path":79,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fhook-system.md",8339,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fhook-system.md",{"path":83,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fimessage-video-ads.md",20359,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fimessage-video-ads.md",{"path":87,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fmeta-creative-formats.md",10686,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fmeta-creative-formats.md",{"path":91,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fmotion-video-ads.md",11801,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fmotion-video-ads.md",{"path":95,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fplatform-specs.md",6525,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fplatform-specs.md",{"path":99,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fshort-form-video-specs.md",19375,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fshort-form-video-specs.md",{"path":103,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Fstatic-ad-templates.md",23537,"https:\u002F\u002Fgithub.com\u002Fpatinaproject\u002Fskills\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fad-creative\u002Freferences\u002Fstatic-ad-templates.md",[107,134,160,189,209,232],{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":28},"01M6DSNYM8PZKEXGYMRX53PVPH","risk-management-specialist","Medical device risk management specialist implementing ISO 14971 throughout product lifecycle. Provides risk analysis, risk evaluation, risk control, and post-production information analysis. Use when user mentions risk management, ISO 14971, risk analysis, FMEA, fault tree analysis, hazard identification, risk control, risk matrix, benefit-risk analysis, residual risk, risk acceptability, or post-market risk.","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fra-qm-team\u002Frisk-management-specialist\u002FSKILL.md",[],[114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133],"risk","risk management specialist","management","risk management","risk analysis","risk evaluation","product","Evaluation","Production","lifecycle","analysis","user","use","risk matrix","Market","device","control","iso","medical","iso 14971",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":140,"publishedAt":28},"01M6DSNSRBGVZWS23TK0ZQ52QC","regulatory-affairs-head","Senior Regulatory Affairs Manager for HealthTech and MedTech companies. Prepares FDA 510(k), De Novo, and PMA submission packages; analyzes regulatory pathways for new medical devices; drafts responses to FDA deficiency letters and Notified Body queries; develops CE marking technical documentation under EU MDR 2017\u002F745; coordinates multi-market approval strategies across FDA, EU, Health Canada, PMDA, and NMPA; and maintains regulatory intelligence on evolving standards. Use when users need to plan or execute FDA submissions, navigate 510(k) or PMA approval processes, achieve CE marking, prepare pre-submission meeting materials, write regulatory strategy documents, respond to agency queries, or manage compliance documentation for medical device market access.","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fra-qm-team\u002Fregulatory-affairs-head\u002FSKILL.md",[],[141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,132,159],"regulatory affairs head","regulatory","head","documentation","documents","packages","planning","devices","plan","access","write","strategy","evidence","standards","manage","intelligence","across","strategies","clinical",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":174,"publishedAt":28},"01M6DSNN7GNR2HZE66S4D31EP8","quality-manager-qms-iso13485","ISO 13485 Quality Management System implementation and maintenance for medical device organizations. Provides QMS design, documentation control, internal auditing, CAPA management, and certification support. Use when working with medical device quality systems, preparing for ISO 13485 audits, managing regulatory compliance documentation, setting up corrective actions, or building audit preparation programs. Useful for quality management, audit preparation, regulatory compliance, medical device documentation, and corrective action workflows.","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fra-qm-team\u002Fquality-manager-qms-iso13485\u002FSKILL.md",[166,169],{"categoryNo":167,"categoryName":168,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":170,"categoryName":171,"taxonomyType":172,"taxonomyTypeDesc":173},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[175,176,177,178,179,180,144,181,182,183,184,185,126,142,186,187,188,130,131,132],"quality manager qms iso13485","quality","design","review","support","workflows","audit","actions","compliance","system","process","up","maintenance","document",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":198,"publishedAt":28},"01M6DSNE5PQM106PM4EDGPBWGZ","quality-manager-qmr","Senior Quality Manager Responsible Person (QMR) for HealthTech and MedTech companies. Provides quality system governance, management review leadership, regulatory compliance oversight, and quality performance monitoring per ISO 13485 Clause 5.5.2.","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fra-qm-team\u002Fquality-manager-qmr\u002FSKILL.md",[195],{"categoryNo":196,"categoryName":197,"taxonomyType":172,"taxonomyTypeDesc":173},"01JBSEEDCAT000000000000037","律师与法务",[199,176,178,200,201,202,203,183,204,184,116,205,142,206,207,208,131],"quality manager qmr","policy","performance","governance","monitoring","regulatory compliance","oversight","cost","culture","leadership",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":213,"categories":214,"keywords":219,"publishedAt":28},"01M6DSN7MYXB6X42TB1GH2TNSB","quality-documentation-manager","Document control system management for medical device QMS. Covers document numbering, version control, change management, and 21 CFR Part 11 compliance. Use for document control procedures, change control workflow, document numbering, version management, electronic signature compliance, or regulatory documentation review.","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fra-qm-team\u002Fquality-documentation-manager\u002FSKILL.md",[215,218],{"categoryNo":216,"categoryName":217,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",{"categoryNo":196,"categoryName":197,"taxonomyType":172,"taxonomyTypeDesc":173},[144,220,176,178,221,222,181,123,223,184,224,225,126,226,227,228,132,229,230,231],"quality documentation manager","workflow","change","document lifecycle","change management","list","master","system management","documentation review","cfr","21 cfr part 11","change control",{"skillNo":233,"name":234,"nameZh":6,"description":235,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":236,"categories":237,"keywords":238,"publishedAt":28},"01M6DSN3R749H3R20K15QE8X8W","qms-audit-expert","ISO 13485 internal audit expertise for medical device QMS. Covers audit planning, execution, nonconformity classification, and CAPA verification. Use for internal audit planning, audit execution, finding classification, external audit preparation, or audit program management.","https:\u002F\u002Fgithub.com\u002Fzhangzhang-111-i\u002Fclaude-skills111\u002Fblob\u002Fmain\u002Fra-qm-team\u002Fqms-audit-expert\u002FSKILL.md",[],[181,239,240,147,241,242,243,244,116,126,245,129,131,132],"qms audit expert","expert","verification","execution","classification","schedule","checklist"]