Created
March 26, 2026 20:15
-
-
Save 23maverick23/7d4f1f40a65748e2daaa2babc4ce53b7 to your computer and use it in GitHub Desktop.
ChatGPT Skills LMS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agent Skills in ChatGPT — Interactive Guide</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| @font-face { | |
| font-family: 'Maple Mono'; | |
| src: url('https://cdn.jsdelivr.net/gh/subframe7536/maple-font@main/woff2/MapleMono-Regular.woff2') format('woff2'); | |
| font-weight: 400; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Maple Mono'; | |
| src: url('https://cdn.jsdelivr.net/gh/subframe7536/maple-font@main/woff2/MapleMono-Bold.woff2') format('woff2'); | |
| font-weight: 700; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Maple Mono'; | |
| src: url('https://cdn.jsdelivr.net/gh/subframe7536/maple-font@main/woff2/MapleMono-Italic.woff2') format('woff2'); | |
| font-weight: 400; | |
| font-style: italic; | |
| font-display: swap; | |
| } | |
| </style> | |
| <style> | |
| :root { | |
| --brand: #1a1a2e; | |
| --brand-mid: #16213e; | |
| --accent: #e94560; | |
| --accent2: #0f3460; | |
| --accent3: #533483; | |
| --teal: #00b4d8; | |
| --gold: #f4a261; | |
| --green: #2ec4b6; | |
| --surface: #ffffff; | |
| --surface2: #f8f8fc; | |
| --surface3: #f0f0f8; | |
| --border: #e2e2ee; | |
| --border-strong: #c8c8de; | |
| --text: #1a1a2e; | |
| --text-muted: #5a5a78; | |
| --text-faint: #9898b0; | |
| --radius: 12px; | |
| --radius-sm: 6px; | |
| --shadow: 0 2px 12px rgba(26,26,46,0.08); | |
| --shadow-lg: 0 8px 32px rgba(26,26,46,0.12); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--surface2); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| /* HEADER */ | |
| .site-header { | |
| background: var(--brand); | |
| padding: 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| border-bottom: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .header-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| height: 60px; | |
| } | |
| .logo { | |
| font-family: 'Inter', sans-serif; | |
| font-weight: 800; | |
| font-size: 16px; | |
| color: #fff; | |
| letter-spacing: -0.3px; | |
| white-space: nowrap; | |
| } | |
| .logo span { color: var(--accent); } | |
| .nav-tabs { | |
| display: flex; | |
| gap: 0; | |
| flex: 1; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .nav-tabs::-webkit-scrollbar { display: none; } | |
| .nav-tab { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 13px; | |
| font-weight: 400; | |
| color: rgba(255,255,255,0.55); | |
| padding: 0 16px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| background: none; | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| user-select: none; | |
| } | |
| .nav-tab:hover { color: rgba(255,255,255,0.85); } | |
| .nav-tab.active { | |
| color: #fff; | |
| border-bottom-color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .nav-num { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| font-size: 11px; | |
| margin-right: 8px; | |
| font-weight: 600; | |
| } | |
| .nav-tab.active .nav-num { | |
| background: var(--accent); | |
| } | |
| /* PROGRESS BAR */ | |
| .progress-bar { | |
| background: rgba(255,255,255,0.08); | |
| height: 2px; | |
| position: relative; | |
| } | |
| .progress-fill { | |
| background: var(--accent); | |
| height: 100%; | |
| transition: width 0.4s ease; | |
| } | |
| /* MAIN LAYOUT */ | |
| .main { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 2.5rem 2rem 4rem; | |
| } | |
| /* PAGE */ | |
| .page { display: none; } | |
| .page.active { display: block; } | |
| /* HERO */ | |
| .hero { | |
| background: var(--brand); | |
| border-radius: 20px; | |
| padding: 3.5rem 3rem; | |
| color: #fff; | |
| margin-bottom: 2.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -60px; right: -60px; | |
| width: 300px; height: 300px; | |
| background: radial-gradient(circle, rgba(233,69,96,0.18) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -40px; left: 40%; | |
| width: 200px; height: 200px; | |
| background: radial-gradient(circle, rgba(0,180,216,0.12) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero-kicker { | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 1rem; | |
| } | |
| .hero h1 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: clamp(28px, 4vw, 44px); | |
| font-weight: 800; | |
| line-height: 1.15; | |
| margin-bottom: 1rem; | |
| letter-spacing: -0.5px; | |
| } | |
| .hero p { | |
| font-size: 16px; | |
| color: rgba(255,255,255,0.7); | |
| max-width: 560px; | |
| line-height: 1.7; | |
| margin-bottom: 2rem; | |
| } | |
| .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #fff; | |
| border: none; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover { background: #d63855; transform: translateY(-1px); } | |
| .btn-secondary { | |
| background: rgba(255,255,255,0.1); | |
| color: #fff; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .btn-secondary:hover { background: rgba(255,255,255,0.15); } | |
| /* STAT CARDS */ | |
| .stat-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.25rem 1.5rem; | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--text-faint); | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| margin-bottom: 6px; | |
| font-weight: 500; | |
| } | |
| .stat-value { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 26px; | |
| font-weight: 700; | |
| color: var(--text); | |
| line-height: 1; | |
| margin-bottom: 4px; | |
| } | |
| .stat-desc { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* SECTION */ | |
| .section-title { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: var(--text); | |
| margin-bottom: 0.4rem; | |
| letter-spacing: -0.3px; | |
| } | |
| .section-sub { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| /* CARDS */ | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .card h3 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 16px; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| } | |
| .card p { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| } | |
| .card-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 18px; | |
| margin-bottom: 1rem; | |
| } | |
| .icon-red { background: #fde8ec; } | |
| .icon-blue { background: #e6f4fc; } | |
| .icon-teal { background: #e0f8f5; } | |
| .icon-purple { background: #eeecfe; } | |
| .icon-gold { background: #fef3e2; } | |
| .icon-green { background: #e4f8f0; } | |
| /* ACCENT CARD */ | |
| .accent-card { | |
| background: var(--brand); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| color: #fff; | |
| margin-bottom: 1rem; | |
| } | |
| .accent-card h3 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 16px; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| } | |
| .accent-card p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; } | |
| /* CODE BLOCK */ | |
| .code-block { | |
| background: #1a1a2e; | |
| border-radius: var(--radius-sm); | |
| padding: 1.25rem 1.5rem; | |
| font-family: 'Maple Mono', 'Courier New', monospace; | |
| font-size: 13px; | |
| line-height: 1.7; | |
| color: #e0e0f0; | |
| margin: 1rem 0; | |
| overflow-x: auto; | |
| position: relative; | |
| } | |
| .code-block .comment { color: #6a6a9a; } | |
| .code-block .keyword { color: #e94560; } | |
| .code-block .string { color: #2ec4b6; } | |
| .code-block .value { color: #f4a261; } | |
| .code-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--text-faint); | |
| margin-bottom: 6px; | |
| } | |
| /* STEPS */ | |
| .steps { margin-bottom: 2rem; } | |
| .step { | |
| display: flex; | |
| gap: 1.25rem; | |
| margin-bottom: 1.25rem; | |
| align-items: flex-start; | |
| } | |
| .step-num { | |
| min-width: 36px; | |
| height: 36px; | |
| background: var(--brand); | |
| color: #fff; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .step-body h4 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 15px; | |
| font-weight: 700; | |
| margin-bottom: 0.3rem; | |
| color: var(--text); | |
| } | |
| .step-body p { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| } | |
| /* TAGS / BADGES */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| .badge-red { background: #fde8ec; color: #b01030; } | |
| .badge-teal { background: #e0f8f5; color: #0a7060; } | |
| .badge-purple { background: #eeecfe; color: #4a35b0; } | |
| .badge-blue { background: #e6f4fc; color: #1050a0; } | |
| .badge-gold { background: #fef3e2; color: #8a5010; } | |
| /* TABLE */ | |
| .use-case-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| margin-bottom: 2rem; | |
| } | |
| .use-case-table th { | |
| text-align: left; | |
| padding: 10px 14px; | |
| background: var(--surface3); | |
| border-bottom: 1px solid var(--border); | |
| font-weight: 600; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-muted); | |
| } | |
| .use-case-table td { | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: top; | |
| line-height: 1.5; | |
| color: var(--text-muted); | |
| } | |
| .use-case-table tr:hover td { background: var(--surface3); } | |
| .use-case-table td:first-child { font-weight: 600; color: var(--text); } | |
| /* CALLOUT */ | |
| .callout { | |
| border-left: 3px solid; | |
| padding: 1rem 1.25rem; | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| margin: 1.25rem 0; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| .callout-tip { border-color: var(--teal); background: #e0f8f5; color: #0a5a50; } | |
| .callout-warn { border-color: var(--gold); background: #fef3e2; color: #704010; } | |
| .callout-info { border-color: #7b8df0; background: #eef0fe; color: #2030a0; } | |
| .callout strong { font-weight: 600; } | |
| /* COMPARISON */ | |
| .compare-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| @media (max-width: 600px) { .compare-grid { grid-template-columns: 1fr; } } | |
| .compare-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.25rem; | |
| } | |
| .compare-card.featured { border-color: var(--accent); border-width: 2px; } | |
| .compare-card h4 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 15px; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .compare-card ul { | |
| list-style: none; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| line-height: 1; | |
| } | |
| .compare-card ul li { | |
| padding: 5px 0; | |
| padding-left: 16px; | |
| position: relative; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .compare-card ul li:last-child { border-bottom: none; } | |
| .compare-card ul li::before { | |
| content: '→'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--text-faint); | |
| font-size: 11px; | |
| } | |
| /* INTERACTIVE QUIZ */ | |
| .quiz-section { margin-bottom: 2rem; } | |
| .quiz-q { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 17px; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| color: var(--text); | |
| } | |
| .quiz-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; } | |
| .quiz-opt { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: all 0.15s; | |
| font-family: 'Inter', sans-serif; | |
| color: var(--text); | |
| } | |
| .quiz-opt:hover { border-color: var(--accent); background: #fff5f7; } | |
| .quiz-opt.correct { border-color: var(--green); background: #e4f8f0; color: #0a5a42; } | |
| .quiz-opt.wrong { border-color: var(--accent); background: #fde8ec; color: #8a0020; } | |
| .quiz-feedback { | |
| font-size: 14px; | |
| padding: 10px 14px; | |
| border-radius: var(--radius-sm); | |
| display: none; | |
| line-height: 1.5; | |
| margin-bottom: 1rem; | |
| } | |
| .quiz-feedback.show { display: block; } | |
| .quiz-feedback.good { background: #e4f8f0; color: #0a5a42; border: 1px solid #c0eadc; } | |
| .quiz-feedback.bad { background: #fde8ec; color: #8a0020; border: 1px solid #f0b0c0; } | |
| /* PROGRESS TRACKER */ | |
| .progress-tracker { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .progress-tracker h4 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .progress-steps { | |
| display: flex; | |
| gap: 0; | |
| align-items: center; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| } | |
| .p-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 90px; | |
| } | |
| .p-step-dot { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: var(--surface3); | |
| border: 2px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-faint); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .p-step-dot.done { background: var(--green); border-color: var(--green); color: #fff; } | |
| .p-step-dot.current { background: var(--brand); border-color: var(--brand); color: #fff; } | |
| .p-step-label { | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| text-align: center; | |
| line-height: 1.3; | |
| max-width: 80px; | |
| } | |
| .p-step-label.done { color: var(--green); } | |
| .p-step-label.current { color: var(--brand); font-weight: 600; } | |
| .p-connector { | |
| flex: 1; | |
| height: 2px; | |
| background: var(--border); | |
| margin-bottom: 26px; | |
| min-width: 20px; | |
| } | |
| .p-connector.done { background: var(--green); } | |
| /* FILE ANATOMY */ | |
| .file-anatomy { | |
| background: #1a1a2e; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| } | |
| .file-tab { | |
| background: rgba(255,255,255,0.06); | |
| padding: 8px 16px; | |
| font-family: 'Maple Mono', 'Courier New', monospace; | |
| font-size: 12px; | |
| color: rgba(255,255,255,0.5); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border-bottom: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .file-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } | |
| .file-content { padding: 1.5rem; } | |
| .file-section { margin-bottom: 1rem; } | |
| .file-section-label { | |
| font-size: 10px; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: rgba(255,255,255,0.3); | |
| margin-bottom: 8px; | |
| display: block; | |
| } | |
| .file-line { | |
| font-family: 'Maple Mono', 'Courier New', monospace; | |
| font-size: 13px; | |
| line-height: 1.8; | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .fl-key { color: #e94560; } | |
| .fl-val { color: #2ec4b6; } | |
| .fl-comment { color: rgba(255,255,255,0.3); font-style: italic; } | |
| .fl-head { color: #f4a261; } | |
| .fl-body { color: rgba(255,255,255,0.75); } | |
| .fl-divider { | |
| border: none; | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| margin: 0.75rem 0; | |
| } | |
| /* SKILL BUILDER TOOL */ | |
| .builder { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| margin-bottom: 2rem; | |
| } | |
| .builder-header { | |
| background: var(--brand); | |
| color: #fff; | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .builder-header h3 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 15px; | |
| font-weight: 700; | |
| } | |
| .builder-header p { font-size: 12px; color: rgba(255,255,255,0.6); } | |
| .builder-body { padding: 1.5rem; } | |
| .form-row { margin-bottom: 1rem; } | |
| .form-label { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text); | |
| margin-bottom: 6px; | |
| } | |
| .form-hint { | |
| font-size: 11px; | |
| color: var(--text-faint); | |
| margin-top: 4px; | |
| } | |
| .form-input, .form-select, .form-textarea { | |
| width: 100%; | |
| padding: 9px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| color: var(--text); | |
| background: var(--surface); | |
| transition: border-color 0.15s; | |
| } | |
| .form-input:focus, .form-select:focus, .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; } | |
| .form-row-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| @media (max-width: 500px) { .form-row-2 { grid-template-columns: 1fr; } } | |
| .builder-output { | |
| background: #1a1a2e; | |
| border-top: 1px solid rgba(255,255,255,0.08); | |
| padding: 1.5rem; | |
| display: none; | |
| } | |
| .builder-output.show { display: block; } | |
| .output-label { | |
| font-size: 11px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: rgba(255,255,255,0.3); | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .copy-btn { | |
| background: rgba(255,255,255,0.1); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| color: #fff; | |
| padding: 4px 12px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| cursor: pointer; | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.15s; | |
| } | |
| .copy-btn:hover { background: rgba(255,255,255,0.2); } | |
| #skill-output { | |
| font-family: 'Maple Mono', 'Courier New', monospace; | |
| font-size: 13px; | |
| line-height: 1.7; | |
| color: #e0e0f0; | |
| white-space: pre-wrap; | |
| } | |
| .so-key { color: #e94560; } | |
| .so-val { color: #2ec4b6; } | |
| .so-head { color: #f4a261; } | |
| .so-body { color: rgba(255,255,255,0.75); } | |
| .so-sep { color: rgba(255,255,255,0.2); } | |
| /* INSTALL WALKTHROUGH */ | |
| .install-step { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| align-items: flex-start; | |
| } | |
| .install-num { | |
| min-width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| font-family: 'Inter', sans-serif; | |
| margin-top: 2px; | |
| } | |
| .install-body h4 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .install-body p { font-size: 13px; color: var(--text-muted); line-height: 1.5; } | |
| .screen-mockup { | |
| background: var(--brand); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| margin-top: 10px; | |
| font-size: 12px; | |
| color: rgba(255,255,255,0.6); | |
| font-family: 'Maple Mono', 'Courier New', monospace; | |
| line-height: 1.6; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .screen-mockup .highlight { color: #fff; font-weight: bold; } | |
| .screen-mockup .pill { | |
| display: inline-block; | |
| background: var(--accent); | |
| color: #fff; | |
| padding: 2px 8px; | |
| border-radius: 20px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.3px; | |
| } | |
| /* TIPS GRID */ | |
| .tips-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .tip-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.25rem; | |
| } | |
| .tip-card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 0.75rem; | |
| } | |
| .tip-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 15px; | |
| } | |
| .tip-card h4 { | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .tip-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; } | |
| /* NAV BUTTONS */ | |
| .page-nav { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 2.5rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .nav-btn { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| color: var(--text); | |
| transition: all 0.15s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .nav-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .nav-btn-next { | |
| background: var(--brand); | |
| border-color: var(--brand); | |
| color: #fff; | |
| } | |
| .nav-btn-next:hover { background: #0d0d20; border-color: #0d0d20; color: #fff; } | |
| /* RESOURCES */ | |
| .resource-list { list-style: none; margin-bottom: 1.5rem; } | |
| .resource-list li { | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 14px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .resource-list li:last-child { border-bottom: none; } | |
| .resource-link { | |
| color: #1050c0; | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .resource-link:hover { text-decoration: underline; } | |
| /* ACCORDION */ | |
| .accordion { margin-bottom: 1.5rem; } | |
| .accordion-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; } | |
| .accordion-header { | |
| width: 100%; | |
| padding: 12px 16px; | |
| background: var(--surface); | |
| border: none; | |
| text-align: left; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text); | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| transition: background 0.15s; | |
| } | |
| .accordion-header:hover { background: var(--surface3); } | |
| .accordion-arrow { | |
| transition: transform 0.2s; | |
| color: var(--text-faint); | |
| font-size: 12px; | |
| } | |
| .accordion-body { | |
| padding: 0 16px; | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease, padding 0.2s; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| background: var(--surface); | |
| } | |
| .accordion-body.open { max-height: 400px; padding: 12px 16px; } | |
| .accordion-arrow.open { transform: rotate(90deg); } | |
| @media (max-width: 768px) { | |
| .main { padding: 1.5rem 1rem 3rem; } | |
| .hero { padding: 2rem 1.5rem; } | |
| .header-inner { padding: 0 1rem; } | |
| .compare-grid { grid-template-columns: 1fr; } | |
| .form-row-2 { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div class="header-inner"> | |
| <div class="logo">Agent <span>Skills</span></div> | |
| <nav class="nav-tabs" id="navTabs"> | |
| <button class="nav-tab active" onclick="goTo(0)"><span class="nav-num">1</span>Overview</button> | |
| <button class="nav-tab" onclick="goTo(1)"><span class="nav-num">2</span>What Are Skills?</button> | |
| <button class="nav-tab" onclick="goTo(2)"><span class="nav-num">3</span>Why Use Them?</button> | |
| <button class="nav-tab" onclick="goTo(3)"><span class="nav-num">4</span>SKILL.md Format</button> | |
| <button class="nav-tab" onclick="goTo(4)"><span class="nav-num">5</span>Build a Skill</button> | |
| <button class="nav-tab" onclick="goTo(5)"><span class="nav-num">6</span>Install & Use</button> | |
| <button class="nav-tab" onclick="goTo(6)"><span class="nav-num">7</span>Best Practices</button> | |
| <button class="nav-tab" onclick="goTo(7)"><span class="nav-num">8</span>Resources</button> | |
| <button class="nav-tab" onclick="goTo(8)"><span class="nav-num">9</span>Sources</button> | |
| </nav> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill" style="width: 12.5%"></div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <!-- PAGE 0: OVERVIEW --> | |
| <div class="page active" id="page-0"> | |
| <div class="hero"> | |
| <div class="hero-kicker">ChatGPT for Work — Training Guide</div> | |
| <h1>Agent Skills in ChatGPT</h1> | |
| <p>A comprehensive guide to understanding, building, and deploying reusable AI workflows that your entire team can use consistently — without starting from scratch every time.</p> | |
| <div class="hero-actions"> | |
| <button class="btn-primary" onclick="goTo(1)">Start Learning →</button> | |
| <button class="btn-secondary" onclick="goTo(4)">Jump to Skill Builder</button> | |
| </div> | |
| </div> | |
| <div class="progress-tracker"> | |
| <h4>Your Progress</h4> | |
| <div class="progress-steps"> | |
| <div class="p-step"> | |
| <div class="p-step-dot current" onclick="goTo(0)">1</div> | |
| <div class="p-step-label current">Overview</div> | |
| </div> | |
| <div class="p-connector" id="conn-0"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-1" onclick="goTo(1)">2</div> | |
| <div class="p-step-label" id="lbl-1">What Are Skills?</div> | |
| </div> | |
| <div class="p-connector" id="conn-1"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-2" onclick="goTo(2)">3</div> | |
| <div class="p-step-label" id="lbl-2">Why Use Them?</div> | |
| </div> | |
| <div class="p-connector" id="conn-2"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-3" onclick="goTo(3)">4</div> | |
| <div class="p-step-label" id="lbl-3">SKILL.md</div> | |
| </div> | |
| <div class="p-connector" id="conn-3"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-4" onclick="goTo(4)">5</div> | |
| <div class="p-step-label" id="lbl-4">Build</div> | |
| </div> | |
| <div class="p-connector" id="conn-4"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-5" onclick="goTo(5)">6</div> | |
| <div class="p-step-label" id="lbl-5">Install & Use</div> | |
| </div> | |
| <div class="p-connector" id="conn-5"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-6" onclick="goTo(6)">7</div> | |
| <div class="p-step-label" id="lbl-6">Best Practices</div> | |
| </div> | |
| <div class="p-connector" id="conn-6"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-7" onclick="goTo(7)">8</div> | |
| <div class="p-step-label" id="lbl-7">Resources</div> | |
| </div> | |
| <div class="p-connector" id="conn-7"></div> | |
| <div class="p-step"> | |
| <div class="p-step-dot" id="dot-8" onclick="goTo(8)">9</div> | |
| <div class="p-step-label" id="lbl-8">Sources</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-row"> | |
| <div class="stat-card"> | |
| <div class="stat-label">Time to first skill</div> | |
| <div class="stat-value">~10 min</div> | |
| <div class="stat-desc">Using ChatGPT's built-in creator</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Sections in this guide</div> | |
| <div class="stat-value">7</div> | |
| <div class="stat-desc">From basics to deployment</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Open standard</div> | |
| <div class="stat-value">SKILL.md</div> | |
| <div class="stat-desc">Works across multiple AI platforms</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Portability</div> | |
| <div class="stat-value">Cross-tool</div> | |
| <div class="stat-desc">Export and import to other agents</div> | |
| </div> | |
| </div> | |
| <div class="section-title">What you'll learn</div> | |
| <div class="section-sub">This guide walks from first principles to practical deployment</div> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div class="card-icon icon-blue">📖</div> | |
| <h3>What are Skills?</h3> | |
| <p>Understand the concept of reusable AI workflows — how they differ from custom GPTs and why they're more reliable for repeatable tasks.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-teal">✅</div> | |
| <h3>Why build them?</h3> | |
| <p>See the business case: consistency, compliance, and eliminating the "explain it again" tax every time someone starts a new chat.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-purple">🗂️</div> | |
| <h3>The SKILL.md format</h3> | |
| <p>Learn the open standard behind skills — a portable Markdown file that works inside ChatGPT and across any compatible AI tool.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-red">🔨</div> | |
| <h3>Build your first skill</h3> | |
| <p>Use the interactive builder in this guide, or follow the step-by-step walkthrough for ChatGPT's built-in "Create skill" tool.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-gold">🚀</div> | |
| <h3>Install and use</h3> | |
| <p>Walk through installation, the @-mention invocation pattern, sharing with your workspace, and combining multiple skills.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-green">⚡</div> | |
| <h3>Best practices</h3> | |
| <p>What separates great skills from generic ones: specificity, progressive disclosure, validation loops, and gotchas sections.</p> | |
| </div> | |
| </div> | |
| <div class="page-nav"> | |
| <div></div> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(1)">Next: What Are Skills? →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 1: WHAT ARE SKILLS --> | |
| <div class="page" id="page-1"> | |
| <div class="section-title">What are Agent Skills?</div> | |
| <div class="section-sub">The core concept — what a skill is and how it differs from just prompting</div> | |
| <div class="accent-card" style="margin-bottom: 1.5rem;"> | |
| <h3>The one-sentence definition</h3> | |
| <p>A <strong style="color:#fff;">skill</strong> is a reusable, shareable workflow that tells ChatGPT how to do a specific task — saving the "how" once so it can be applied reliably whenever that task comes up, without re-explaining from scratch.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>The problem skills solve</h3> | |
| <p style="font-size:14px; margin-bottom: 0.75rem;">Have you ever done any of these?</p> | |
| <ul style="font-size:14px; color: var(--text-muted); padding-left: 1.25rem; line-height: 2;"> | |
| <li>Pasted the same long prompt at the start of every new chat</li> | |
| <li>Told ChatGPT "you know the format we always use" — and it didn't</li> | |
| <li>Got inconsistent outputs because you forgot to include certain instructions</li> | |
| <li>Tried to teach a new colleague "how we use AI" and struggled to document it</li> | |
| </ul> | |
| <p style="font-size:14px; color: var(--text-muted); margin-top: 0.75rem;">Skills solve all of these. They encode your workflow, preferences, and required outputs so ChatGPT follows a consistent process every time — and so your whole team can benefit from the same approach.</p> | |
| </div> | |
| <div class="section-title" style="margin-top: 2rem;">What a skill consists of</div> | |
| <div class="section-sub">A skill is a folder containing, at minimum, a SKILL.md file</div> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div class="card-icon icon-purple">📄</div> | |
| <h3>SKILL.md — the core file</h3> | |
| <p>A plain-text Markdown file with YAML frontmatter. Contains the skill's name, description, and step-by-step instructions. This is what ChatGPT reads when it activates the skill.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-blue">📁</div> | |
| <h3>Optional supporting files</h3> | |
| <p>Skills can include a <code style="font-size:12px; background: var(--surface3); padding: 1px 5px; border-radius:3px;">references/</code> folder for detailed docs, a <code style="font-size:12px; background: var(--surface3); padding: 1px 5px; border-radius:3px;">scripts/</code> folder for executable code, and an <code style="font-size:12px; background: var(--surface3); padding: 1px 5px; border-radius:3px;">assets/</code> folder for templates.</p> | |
| </div> | |
| </div> | |
| <div class="section-title">Three types of skills</div> | |
| <div class="section-sub">Skills typically fall into one of these patterns</div> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div style="margin-bottom: 0.75rem;"><span class="badge badge-red">Type 1</span></div> | |
| <h3>Reusable process</h3> | |
| <p>Multi-step workflows where steps and sequencing matter. Examples: compliance-ready financial reporting, contract review checklists, incident postmortems.</p> | |
| <div style="margin-top: 0.75rem; font-size: 12px; color: var(--text-faint); font-style: italic;">e.g. "Run the monthly close readout playbook"</div> | |
| </div> | |
| <div class="card"> | |
| <div style="margin-bottom: 0.75rem;"><span class="badge badge-teal">Type 2</span></div> | |
| <h3>Tool-based workflow</h3> | |
| <p>Skills that use connected apps — pulling data from NetSuite, CRM systems, or spreadsheets — and then doing something useful with that data.</p> | |
| <div style="margin-top: 0.75rem; font-size: 12px; color: var(--text-faint); font-style: italic;">e.g. "Pull budget vs. actuals and explain variances"</div> | |
| </div> | |
| <div class="card"> | |
| <div style="margin-bottom: 0.75rem;"><span class="badge badge-purple">Type 3</span></div> | |
| <h3>Conventions and standards</h3> | |
| <p>Skills that enforce voice, format, and quality bar even when the content changes each time — brand writing guides, memo templates, email tone standards.</p> | |
| <div style="margin-top: 0.75rem; font-size: 12px; color: var(--text-faint); font-style: italic;">e.g. "Format this as a finance memo using our standard"</div> | |
| </div> | |
| </div> | |
| <div class="section-title">Skills vs. Custom GPTs</div> | |
| <div class="section-sub">They're different tools — here's how to think about each</div> | |
| <div class="compare-grid"> | |
| <div class="compare-card featured"> | |
| <h4><span class="badge badge-red" style="font-size:10px;">Best for this guide</span><br><br>Skills</h4> | |
| <ul> | |
| <li>Reusable workflows for specific tasks</li> | |
| <li>Stay "always on" and auto-activate when relevant</li> | |
| <li>Portable — export/import to other AI tools</li> | |
| <li>Team-shareable in workspace settings</li> | |
| <li>Teach ChatGPT <em>how</em> to do something</li> | |
| <li>Version-controlled in SKILL.md files</li> | |
| </ul> | |
| </div> | |
| <div class="compare-card"> | |
| <h4>Custom GPTs</h4> | |
| <ul> | |
| <li>Goal-oriented custom versions of ChatGPT</li> | |
| <li>Must be explicitly chosen to use</li> | |
| <li>Locked within OpenAI ecosystem</li> | |
| <li>Better for broad domain expertise areas</li> | |
| <li>Extend a persona or team's expertise</li> | |
| <li>Suited for time-based projects</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="callout callout-tip"> | |
| <strong>Quick test:</strong> If you're solving for "I want consistent outputs on a repeatable task," use a skill. If you're solving for "I want a specialized AI assistant for a whole domain," use a Custom GPT. | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(0)">← Overview</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(2)">Next: Why Use Them? →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 2: WHY USE THEM --> | |
| <div class="page" id="page-2"> | |
| <div class="section-title">Why use Skills?</div> | |
| <div class="section-sub">The business case — and the specific scenarios where skills deliver most value</div> | |
| <div class="card-grid" style="margin-bottom: 2rem;"> | |
| <div class="card"> | |
| <div class="card-icon icon-teal">🎯</div> | |
| <h3>Consistency</h3> | |
| <p>Same process, same format, same quality bar — every time. No more missed sections, no more tone drift, no more "it gave me something totally different yesterday."</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-purple">🧠</div> | |
| <h3>Built-in best practices</h3> | |
| <p>Encode your SME-approved approach once. Every team member — regardless of their AI experience — follows the same proven workflow automatically.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-blue">🔁</div> | |
| <h3>Eliminate repetition</h3> | |
| <p>Stop pasting the same instructions at the start of every chat. Skills remember how you work so you don't have to re-explain it constantly.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-gold">📤</div> | |
| <h3>Share the playbook</h3> | |
| <p>Teams can adopt the same standard process in ChatGPT instead of relying on tribal knowledge. One good skill builder improves everyone's output.</p> | |
| </div> | |
| </div> | |
| <div class="section-title">Finance use cases</div> | |
| <div class="section-sub">High-ROI skill ideas for accounting and finance teams</div> | |
| <table class="use-case-table"> | |
| <thead> | |
| <tr> | |
| <th>Skill name</th> | |
| <th>What it does</th> | |
| <th>Type</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>monthly-close-narrative</td> | |
| <td>Drafts monthly close readout summarizing variance drivers, key risks, and decisions needed from raw inputs</td> | |
| <td><span class="badge badge-red">Process</span></td> | |
| </tr> | |
| <tr> | |
| <td>budget-vs-actuals-explainer</td> | |
| <td>Pulls budget and actuals data and explains variances in plain language for exec or board consumption</td> | |
| <td><span class="badge badge-teal">Tool-based</span></td> | |
| </tr> | |
| <tr> | |
| <td>finance-memo-standard</td> | |
| <td>Formats any financial analysis into a consistent memo: assumptions, methodology, results, sensitivities</td> | |
| <td><span class="badge badge-purple">Standards</span></td> | |
| </tr> | |
| <tr> | |
| <td>board-readout-style</td> | |
| <td>Writes board-ready updates with metrics-first framing, crisp structure, and minimal jargon</td> | |
| <td><span class="badge badge-purple">Standards</span></td> | |
| </tr> | |
| <tr> | |
| <td>kpi-commentary-writer</td> | |
| <td>Converts raw KPI data into structured narrative commentary with drivers, risks, and outlook</td> | |
| <td><span class="badge badge-red">Process</span></td> | |
| </tr> | |
| <tr> | |
| <td>contract-review-summary</td> | |
| <td>Produces structured contract review with issues, fallback positions, and redlines needed</td> | |
| <td><span class="badge badge-red">Process</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="section-title">When skills help most</div> | |
| <div class="section-sub">Use this checklist to identify your best skill candidates</div> | |
| <div class="card"> | |
| <p style="font-size: 14px; color: var(--text-muted); margin-bottom: 1rem;">A task is a good skill candidate when it has:</p> | |
| <div id="checklist" style="display: flex; flex-direction: column; gap: 8px;"> | |
| </div> | |
| </div> | |
| <div class="callout callout-info" style="margin-top: 1.5rem;"> | |
| <strong>Design tip:</strong> Skills work best as small building blocks you can mix and match — not one massive end-to-end skill. If a workflow is complex, split it into phases (e.g., "extract data → write narrative → format memo"). | |
| </div> | |
| <!-- QUIZ --> | |
| <div class="quiz-section" style="margin-top: 2rem;"> | |
| <div class="section-title">Quick check</div> | |
| <div class="section-sub">Test your understanding before moving on</div> | |
| <div class="card"> | |
| <div class="quiz-q">Which of the following is the best candidate for a ChatGPT skill?</div> | |
| <div class="quiz-options" id="q1opts"> | |
| <button class="quiz-opt" onclick="answer(0, 0)">A one-off creative brainstorm for a new product launch</button> | |
| <button class="quiz-opt" onclick="answer(0, 1)">A monthly variance report that always follows the same format and requires specific guardrails</button> | |
| <button class="quiz-opt" onclick="answer(0, 2)">A quick question about what a financial ratio means</button> | |
| <button class="quiz-opt" onclick="answer(0, 3)">A broad "research what's happening in commercial real estate" exploration</button> | |
| </div> | |
| <div class="quiz-feedback" id="q1fb"></div> | |
| </div> | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(1)">← What Are Skills?</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(3)">Next: SKILL.md Format →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 3: SKILL.md FORMAT --> | |
| <div class="page" id="page-3"> | |
| <div class="section-title">The SKILL.md format</div> | |
| <div class="section-sub">The open standard that powers skills — portable across ChatGPT, Claude, and other compatible tools</div> | |
| <div class="callout callout-info"> | |
| <strong>Open standard:</strong> The Agent Skills format was originally developed by Anthropic, released as an open standard, and has since been adopted by OpenAI's ChatGPT and other AI platforms. A skill you build in ChatGPT can be exported and used in other Agent Skills-compatible tools. | |
| </div> | |
| <div class="section-title" style="margin-top: 1.5rem;">Anatomy of a SKILL.md file</div> | |
| <div class="section-sub">Every skill has two parts: YAML frontmatter (metadata) and a Markdown body (instructions)</div> | |
| <div class="file-anatomy"> | |
| <div class="file-tab"> | |
| <div class="file-tab-dot"></div> | |
| SKILL.md | |
| </div> | |
| <div class="file-content"> | |
| <div class="file-section"> | |
| <span class="file-section-label">YAML frontmatter — metadata</span> | |
| <div class="file-line"><span class="fl-val">---</span></div> | |
| <div class="file-line"><span class="fl-key">name:</span> <span class="fl-val">monthly-close-narrative</span> <span class="fl-comment"># Required. Lowercase, hyphens only</span></div> | |
| <div class="file-line"><span class="fl-key">description:</span> <span class="fl-val">Drafts a monthly close readout summarizing</span></div> | |
| <div class="file-line"> <span class="fl-val">variance drivers, risks, and decisions needed.</span></div> | |
| <div class="file-line"> <span class="fl-val">Use when preparing monthly close commentary.</span> <span class="fl-comment"># When to activate</span></div> | |
| <div class="file-line"><span class="fl-key">license:</span> <span class="fl-val">Proprietary — internal use only</span> <span class="fl-comment"># Optional</span></div> | |
| <div class="file-line"><span class="fl-key">metadata:</span></div> | |
| <div class="file-line"> <span class="fl-key">author:</span> <span class="fl-val">finance-team</span></div> | |
| <div class="file-line"> <span class="fl-key">version:</span> <span class="fl-val">"1.0"</span></div> | |
| <div class="file-line"><span class="fl-val">---</span></div> | |
| </div> | |
| <hr class="fl-divider"> | |
| <div class="file-section"> | |
| <span class="file-section-label">Markdown body — instructions</span> | |
| <div class="file-line"><span class="fl-head"># Monthly Close Narrative</span></div> | |
| <div class="file-line"></div> | |
| <div class="file-line"><span class="fl-head">## Inputs required</span></div> | |
| <div class="file-line"><span class="fl-body">- Actuals vs. budget comparison (CSV or paste)</span></div> | |
| <div class="file-line"><span class="fl-body">- Prior period narrative for context (optional)</span></div> | |
| <div class="file-line"></div> | |
| <div class="file-line"><span class="fl-head">## Steps</span></div> | |
| <div class="file-line"><span class="fl-body">1. Identify the top 3 favorable and 3 unfavorable</span></div> | |
| <div class="file-line"><span class="fl-body"> variances by dollar amount</span></div> | |
| <div class="file-line"><span class="fl-body">2. For each, state driver, impact, and whether</span></div> | |
| <div class="file-line"><span class="fl-body"> it is timing, volume, or rate-related</span></div> | |
| <div class="file-line"><span class="fl-body">3. Draft executive summary paragraph first, then</span></div> | |
| <div class="file-line"><span class="fl-body"> supporting detail sections</span></div> | |
| <div class="file-line"></div> | |
| <div class="file-line"><span class="fl-head">## Output format</span></div> | |
| <div class="file-line"><span class="fl-body">Use the template in assets/close-memo-template.md</span></div> | |
| <div class="file-line"></div> | |
| <div class="file-line"><span class="fl-head">## Gotchas</span></div> | |
| <div class="file-line"><span class="fl-body">- Never attribute variances to "miscellaneous"</span></div> | |
| <div class="file-line"><span class="fl-body">- Always flag items >5% of budget as "Requires</span></div> | |
| <div class="file-line"><span class="fl-body"> management action" regardless of direction</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-title">Required vs. optional fields</div> | |
| <div class="accordion" id="accordionFields"> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>name</strong> — Required</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| Must be 1–64 characters, lowercase letters, numbers, and hyphens only. No consecutive hyphens. Must not start or end with a hyphen. This must match the folder/directory name exactly.<br><br> | |
| <strong>Valid:</strong> <code>monthly-close-narrative</code>, <code>budget-vs-actuals</code><br> | |
| <strong>Invalid:</strong> <code>Monthly Close</code> (spaces/caps), <code>-narrative</code> (starts with hyphen) | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>description</strong> — Required</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| Up to 1,024 characters. This is how ChatGPT decides whether to activate your skill — it must describe both <em>what the skill does</em> and <em>when to use it</em>. Include specific keywords that match how users will phrase requests.<br><br> | |
| <strong>Good:</strong> "Drafts a monthly close readout summarizing variance drivers, risks, and decisions needed. Use when preparing close commentary, writing variance analysis, or producing CFO/board reporting."<br><br> | |
| <strong>Weak:</strong> "Helps with financial reporting." | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>license</strong> — Optional</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| Specify the license applied to the skill. For internal corporate skills, use something like "Proprietary — internal use only." For open-source skills, use standard identifiers like "Apache-2.0" or "MIT." | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>metadata</strong> — Optional</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| A key-value mapping for any additional metadata you want to store — author, version, department, review date, etc. Useful for governance and tracking skill ownership across large teams. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>compatibility</strong> — Optional</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| Only needed if your skill has specific environment requirements — particular AI products, system packages, or network access. Most skills don't need this field. Example: "Requires NetSuite connector to be active" or "Designed for ChatGPT for Work." | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-title" style="margin-top: 2rem;">Progressive disclosure principle</div> | |
| <div class="section-sub">Structure your skill so it loads context efficiently</div> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;"> | |
| <span class="badge badge-blue">Layer 1</span> | |
| <span style="font-size: 12px; color: var(--text-faint);">~100 tokens</span> | |
| </div> | |
| <h3>Frontmatter metadata</h3> | |
| <p>Name and description are loaded for all skills at startup. This is how ChatGPT identifies which skill to activate. Keep description keyword-rich and specific.</p> | |
| </div> | |
| <div class="card"> | |
| <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;"> | |
| <span class="badge badge-purple">Layer 2</span> | |
| <span style="font-size: 12px; color: var(--text-faint);">< 5,000 tokens</span> | |
| </div> | |
| <h3>SKILL.md body</h3> | |
| <p>Loaded when the skill activates. Keep this under 500 lines — the core instructions the agent needs every run. Move deep reference material to files in <code style="font-size:11px;">references/</code>.</p> | |
| </div> | |
| <div class="card"> | |
| <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;"> | |
| <span class="badge badge-gold">Layer 3</span> | |
| <span style="font-size: 12px; color: var(--text-faint);">On demand</span> | |
| </div> | |
| <h3>Supporting files</h3> | |
| <p>Scripts, templates, and reference docs in subdirectories. Loaded only when the instructions explicitly tell the agent to load them. "Read references/errors.md if the API returns non-200."</p> | |
| </div> | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(2)">← Why Use Them?</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(4)">Next: Build a Skill →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 4: BUILD A SKILL --> | |
| <div class="page" id="page-4"> | |
| <div class="section-title">Building your first skill</div> | |
| <div class="section-sub">Two paths: use ChatGPT's built-in creator, or use the interactive builder below</div> | |
| <div class="card-grid" style="margin-bottom: 2rem;"> | |
| <div class="card"> | |
| <div class="card-icon icon-red">💬</div> | |
| <h3>Path A: ChatGPT "Create skill" tool</h3> | |
| <p>Start a new chat and type: <strong>"Build me a skill for [your task]."</strong> ChatGPT will generate the skill and show a preview modal with an Install button. Best for first-timers.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-purple">🔨</div> | |
| <h3>Path B: Write SKILL.md directly</h3> | |
| <p>Use the interactive builder below to author your SKILL.md file from scratch. Then upload or paste it into ChatGPT to install. Best when you have a clear workflow in mind.</p> | |
| </div> | |
| </div> | |
| <div class="section-title">Path A — Using ChatGPT to create a skill</div> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-num">1</div> | |
| <div class="step-body"> | |
| <h4>Identify a repeatable task</h4> | |
| <p>Before opening ChatGPT, write down: (a) what inputs users will provide, (b) what the output format should look like, and (c) any guardrails — what must always be included, what must never happen.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">2</div> | |
| <div class="step-body"> | |
| <h4>Prompt ChatGPT to build it</h4> | |
| <p>Start a new chat with: <em>"Build me a skill that [task description]. The inputs are [X]. The output should [Y]. Always include [Z]."</em> ChatGPT will generate a SKILL.md draft. Dictating the workflow verbally often speeds up the first draft.</p> | |
| <div class="screen-mockup"> | |
| <span class="highlight">You:</span> Build me a skill that drafts a monthly close variance narrative. The inputs are an actuals-vs-budget CSV. The output should be an exec-ready summary paragraph followed by itemized variance explanations. Always flag items over 5% of budget. Never attribute variance to "miscellaneous."<br><br> | |
| <span class="highlight">ChatGPT:</span> Here's your skill draft: <span class="pill">Preview skill</span> Would you like to refine any sections before installing? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">3</div> | |
| <div class="step-body"> | |
| <h4>Review the draft and install</h4> | |
| <p>A modal will show you the generated SKILL.md. Review the instructions, description, and output format. Refine in the chat if needed. Click <strong>Install</strong> to add it to your workspace.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">4</div> | |
| <div class="step-body"> | |
| <h4>Test with a real task</h4> | |
| <p>Run the skill against an actual work example — not a test scenario. Look at the execution trace, not just the final output. Did it follow all the steps? Flag any misses and refine the skill.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- INTERACTIVE BUILDER --> | |
| <div class="section-title" style="margin-top: 2rem;">Path B — Interactive SKILL.md builder</div> | |
| <div class="section-sub">Fill in the fields below to generate a ready-to-use SKILL.md file</div> | |
| <div class="builder"> | |
| <div class="builder-header"> | |
| <div> | |
| <h3>SKILL.md Generator</h3> | |
| <p>Fill in the fields — your SKILL.md file generates in real time</p> | |
| </div> | |
| </div> | |
| <div class="builder-body"> | |
| <div class="form-row"> | |
| <label class="form-label" for="s-name">Skill name <span style="color: var(--accent);">*</span></label> | |
| <input class="form-input" id="s-name" type="text" placeholder="monthly-close-narrative" oninput="generateSkill()"> | |
| <div class="form-hint">Lowercase, hyphens only (e.g. monthly-close-narrative)</div> | |
| </div> | |
| <div class="form-row"> | |
| <label class="form-label" for="s-desc">Description <span style="color: var(--accent);">*</span></label> | |
| <input class="form-input" id="s-desc" type="text" placeholder="Drafts monthly close commentary from variance data. Use when preparing close narrative or variance analysis." oninput="generateSkill()"> | |
| <div class="form-hint">Include what it does AND when to use it. This is how ChatGPT decides whether to activate it.</div> | |
| </div> | |
| <div class="form-row-2"> | |
| <div> | |
| <label class="form-label" for="s-author">Author / team</label> | |
| <input class="form-input" id="s-author" type="text" placeholder="finance-team" oninput="generateSkill()"> | |
| </div> | |
| <div> | |
| <label class="form-label" for="s-version">Version</label> | |
| <input class="form-input" id="s-version" type="text" placeholder="1.0" oninput="generateSkill()"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <label class="form-label" for="s-inputs">Required inputs</label> | |
| <input class="form-input" id="s-inputs" type="text" placeholder="Actuals vs. budget CSV, prior period narrative (optional)" oninput="generateSkill()"> | |
| </div> | |
| <div class="form-row"> | |
| <label class="form-label" for="s-steps">Workflow steps</label> | |
| <textarea class="form-textarea" id="s-steps" placeholder="1. Identify top 3 favorable and 3 unfavorable variances by dollar amount 2. For each variance, state driver, impact, and type (timing/volume/rate) 3. Draft executive summary paragraph first, then supporting detail" oninput="generateSkill()" style="min-height: 100px;"></textarea> | |
| </div> | |
| <div class="form-row"> | |
| <label class="form-label" for="s-format">Output format / template</label> | |
| <input class="form-input" id="s-format" type="text" placeholder="Executive summary paragraph, then itemized variance table with driver/impact/action columns" oninput="generateSkill()"> | |
| </div> | |
| <div class="form-row"> | |
| <label class="form-label" for="s-gotchas">Gotchas and guardrails</label> | |
| <textarea class="form-textarea" id="s-gotchas" placeholder="Never attribute variance to 'miscellaneous' Flag items >5% of budget as 'Requires management action' Always include a forward-looking risk sentence" oninput="generateSkill()" style="min-height: 80px;"></textarea> | |
| </div> | |
| <button class="btn-primary" onclick="generateSkill(); document.getElementById('builderOutput').classList.add('show')">Generate SKILL.md →</button> | |
| </div> | |
| <div class="builder-output" id="builderOutput"> | |
| <div class="output-label"> | |
| <span>Generated SKILL.md</span> | |
| <button class="copy-btn" onclick="copySkill()">Copy to clipboard</button> | |
| </div> | |
| <div id="skill-output"></div> | |
| </div> | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(3)">← SKILL.md Format</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(5)">Next: Install & Use →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 5: INSTALL & USE --> | |
| <div class="page" id="page-5"> | |
| <div class="section-title">Installing and using skills</div> | |
| <div class="section-sub">How to get your skill running in ChatGPT — and how to invoke it day-to-day</div> | |
| <div class="section-title" style="margin-top: 0.5rem; font-size: 18px;">Installation walkthrough</div> | |
| <div class="install-step"> | |
| <div class="install-num">1</div> | |
| <div class="install-body"> | |
| <h4>Ensure skills are enabled in your workspace</h4> | |
| <p>During beta, skills are off by default. Your workspace owner needs to enable them under <strong>Admin → Workspace Settings → Skills</strong>. If you don't see skills as an option, contact your ChatGPT admin.</p> | |
| </div> | |
| </div> | |
| <div class="install-step"> | |
| <div class="install-num">2</div> | |
| <div class="install-body"> | |
| <h4>Create or receive a skill</h4> | |
| <p>Either generate one from a chat (Path A) or upload a SKILL.md file directly. When ChatGPT generates a skill, you'll see a preview modal — review it, then click <strong>Install</strong>.</p> | |
| <div class="screen-mockup"> | |
| <span class="highlight">Skill preview</span><br> | |
| ─────────────────────────────<br> | |
| <span style="color: rgba(255,255,255,0.9);">monthly-close-narrative</span><br> | |
| <span style="color: rgba(255,255,255,0.5); font-size: 11px;">Drafts monthly close commentary from variance data...</span><br> | |
| ─────────────────────────────<br> | |
| <span class="pill">Install for me</span> <span style="color: rgba(255,255,255,0.4);">or</span> <span class="pill" style="background: rgba(255,255,255,0.15);">Refine first</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="install-step"> | |
| <div class="install-num">3</div> | |
| <div class="install-body"> | |
| <h4>Confirm installation</h4> | |
| <p>The skill appears in your skills library. You can view, edit, or delete it at any time from <strong>ChatGPT Settings → Skills</strong>. Note which workspace it was installed to.</p> | |
| </div> | |
| </div> | |
| <div class="install-step"> | |
| <div class="install-num">4</div> | |
| <div class="install-body"> | |
| <h4>Share with your team (if permitted)</h4> | |
| <p>If your workspace settings allow it, you can share a skill with others in your workspace — or install it on their behalf. Workspace owners control this via <strong>Permissions and Roles → RBAC settings</strong>.</p> | |
| </div> | |
| </div> | |
| <div class="section-title" style="margin-top: 2rem;">Using skills day-to-day</div> | |
| <div class="section-sub">Three ways to invoke a skill in a conversation</div> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div class="card-icon icon-teal">🤖</div> | |
| <h3>Auto-activation</h3> | |
| <p>When a skill's description matches what you're asking, ChatGPT activates it automatically. No action needed — just work naturally and the relevant skill loads in context.</p> | |
| <div style="margin-top: 0.75rem; font-size: 12px; background: var(--surface3); border-radius: 6px; padding: 8px 10px; color: var(--text-muted);"> | |
| "Help me write up the variance analysis for this month's close" → <strong>auto-activates</strong> monthly-close-narrative | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-blue">@</div> | |
| <h3>@-mention</h3> | |
| <p>Explicitly invoke a skill by typing <strong>@skill-name</strong> in your message. This overrides auto-detection and forces the specific skill to activate — useful when you want precision.</p> | |
| <div style="margin-top: 0.75rem; font-size: 12px; background: var(--surface3); border-radius: 6px; padding: 8px 10px; color: var(--text-muted);"> | |
| "@monthly-close-narrative here's the variance CSV from last month" | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon icon-purple">🔗</div> | |
| <h3>Chained skills</h3> | |
| <p>For complex multi-phase work, combine multiple skills in sequence. Run one to extract and structure data, then invoke another to format and deliver it.</p> | |
| <div style="margin-top: 0.75rem; font-size: 12px; background: var(--surface3); border-radius: 6px; padding: 8px 10px; color: var(--text-muted);"> | |
| @data-extractor → @finance-memo-standard → @board-readout-style | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-title" style="margin-top: 1.5rem;">Admin controls and permissions</div> | |
| <div class="card"> | |
| <table style="width: 100%; border-collapse: collapse; font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Setting</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Who controls it</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Notes</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 500;">Enable/disable skills for workspace</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Workspace owner</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Off by default in beta</td></tr> | |
| <tr><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 500;">Create and use skills</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Configurable per user/role</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Managed via RBAC</td></tr> | |
| <tr><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 500;">Share skills in workspace</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Configurable per user/role</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Can be restricted to admins only</td></tr> | |
| <tr><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 500;">Install skills on behalf of others</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Workspace owner</td><td style="padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted);">Useful for org-wide rollouts</td></tr> | |
| <tr><td style="padding: 10px 12px; font-weight: 500;">Credit usage impact</td><td style="padding: 10px 12px; color: var(--text-muted);">N/A</td><td style="padding: 10px 12px; color: var(--text-muted);">Skills themselves don't cost credits; complex skills may trigger thinking models</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="callout callout-warn" style="margin-top: 1rem;"> | |
| <strong>Enterprise note:</strong> Skills don't introduce new data-use categories — they structure work already happening in ChatGPT. External app connections in skills follow your existing connector and OAuth governance policies. | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(4)">← Build a Skill</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(6)">Next: Best Practices →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 6: BEST PRACTICES --> | |
| <div class="page" id="page-6"> | |
| <div class="section-title">Best practices for great skills</div> | |
| <div class="section-sub">What separates high-performing skills from generic ones</div> | |
| <div class="accent-card" style="margin-bottom: 1.5rem;"> | |
| <h3>The #1 mistake to avoid</h3> | |
| <p>Asking ChatGPT to generate a skill without providing real domain context. The result is vague, generic procedures — "handle errors appropriately," "follow best practices" — that any agent already knows. Feed in specific workflows, real examples, your company's naming conventions, and actual edge cases.</p> | |
| </div> | |
| <div class="tips-grid"> | |
| <div class="tip-card"> | |
| <div class="tip-card-header"> | |
| <div class="tip-icon icon-teal">🎯</div> | |
| <h4>Start from real expertise</h4> | |
| </div> | |
| <p>Complete a real task first, then extract the pattern. What steps worked? What corrections did you make? What context did you have to provide? Build those into the skill.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-card-header"> | |
| <div class="tip-icon icon-purple">✂️</div> | |
| <h4>Add what the agent lacks</h4> | |
| </div> | |
| <p>Omit anything the agent already knows — what a PDF is, how HTTP works. Focus on your company-specific conventions, non-obvious edge cases, and required tool/API patterns.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-card-header"> | |
| <div class="tip-icon icon-blue">📐</div> | |
| <h4>Small, composable units</h4> | |
| </div> | |
| <p>Design skills like functions — coherent, focused, composable. "Extract data" + "write narrative" beats one giant skill that does everything poorly.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-card-header"> | |
| <div class="tip-icon icon-red">⚡</div> | |
| <h4>Refine with real execution</h4> | |
| </div> | |
| <p>Run the skill against real examples. Read execution traces, not just outputs. When the agent makes a mistake, add the correction to the gotchas section immediately.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-card-header"> | |
| <div class="tip-icon icon-gold">📋</div> | |
| <h4>Provide defaults, not menus</h4> | |
| </div> | |
| <p>"Use pdfplumber for extraction; fall back to pytesseract for scanned docs" beats "you can use pypdf, pdfplumber, PyMuPDF, or pdf2image." One clear default, one escape hatch.</p> | |
| </div> | |
| <div class="tip-card"> | |
| <div class="tip-card-header"> | |
| <div class="tip-icon icon-green">🔄</div> | |
| <h4>Procedures over declarations</h4> | |
| </div> | |
| <p>Teach the agent how to approach a class of problems, not what to produce for a specific instance. The approach should generalize; the output format can be specific.</p> | |
| </div> | |
| </div> | |
| <div class="section-title" style="margin-top: 1rem;">The four power patterns</div> | |
| <div class="section-sub">These are the highest-value structural elements to add to your skills</div> | |
| <div class="accordion"> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>1. Gotchas section</strong> — Highest value</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| A list of environment-specific facts that defy reasonable assumptions — concrete corrections to mistakes the agent will make without being told. These are your secret weapon.<br><br> | |
| <strong>Example:</strong><br> | |
| "The users table uses soft deletes — queries must include WHERE deleted_at IS NULL or results will include deactivated accounts."<br><br> | |
| "The /health endpoint returns 200 even if the database is down — use /ready to check full service health."<br><br> | |
| When the agent makes a mistake you have to correct, add it to gotchas immediately. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>2. Output templates</strong> — Reliability boost</span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| When you need a specific format, provide a template — don't describe it in prose. Agents pattern-match against concrete structures far more reliably than written format descriptions.<br><br> | |
| Short templates can live inline in SKILL.md. Longer templates should go in <code>assets/memo-template.md</code> and be referenced conditionally. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>3. Checklists for multi-step workflows</strong></span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| An explicit checklist with checkboxes helps the agent track progress and avoid skipping steps — especially when steps have dependencies or validation gates.<br><br> | |
| <code>- [ ] Step 1: Analyze the form</code><br> | |
| <code>- [ ] Step 2: Create field mapping</code><br> | |
| <code>- [ ] Step 3: Validate mapping</code><br> | |
| <code>- [ ] Step 4: Fill and verify output</code> | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <button class="accordion-header" onclick="toggleAccordion(this)"> | |
| <span><strong>4. Validation loops</strong></span> | |
| <span class="accordion-arrow">›</span> | |
| </button> | |
| <div class="accordion-body"> | |
| For high-stakes or compliance-sensitive work, instruct the agent to validate its own output before finalizing: do the work → run a validator (script or checklist) → fix issues → repeat until passing.<br><br> | |
| This is especially powerful for audit-ready deliverables — pair a validation checklist in <code>references/quality-checks.md</code> with an explicit instruction: "Check your draft against quality-checks.md before delivering." | |
| </div> | |
| </div> | |
| </div> | |
| <div class="callout callout-tip" style="margin-top: 1rem;"> | |
| <strong>Quick self-test for every skill section:</strong> "Would the agent get this wrong without this instruction?" If no — cut it. If the agent already handles the task well without the skill, the skill may not be adding value. | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(5)">← Install & Use</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(7)">Next: Resources →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 7: RESOURCES --> | |
| <div class="page" id="page-7"> | |
| <div class="section-title">Resources and next steps</div> | |
| <div class="section-sub">Official documentation, community, and tools to go deeper</div> | |
| <div class="card-grid" style="margin-bottom: 2rem;"> | |
| <div class="accent-card"> | |
| <h3>You're ready to build</h3> | |
| <p>You have everything you need to create your first skill. Start with one repeatable task you do weekly — a report format, a memo template, or a recurring analysis. Build it, run it on a real example, and refine once. That first iteration will teach you more than any guide.</p> | |
| </div> | |
| </div> | |
| <div class="section-title">Official documentation</div> | |
| <ul class="resource-list"> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">OpenAI Academy — Skills in ChatGPT</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Official guide covering skills basics, use cases, and admin FAQs</div> | |
| </div> | |
| <a href="https://academy.openai.com/public/clubs/work-users-ynjqu/resources/skills" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">Agent Skills — Official Specification</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Complete format spec for SKILL.md files — fields, structure, and validation</div> | |
| </div> | |
| <a href="https://agentskills.io/specification" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">Agent Skills — Best Practices Guide</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">In-depth guide on writing well-scoped, calibrated skills</div> | |
| </div> | |
| <a href="https://agentskills.io/skill-creation/best-practices" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">Agent Skills — Skill Creation Quickstart</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Step-by-step guide for creating your first skill</div> | |
| </div> | |
| <a href="https://agentskills.io/skill-creation/quickstart" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">GitHub — Example Skills Repository</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Browse real skill examples from the Agent Skills open-source community</div> | |
| </div> | |
| <a href="https://github.com/agentskills/agentskills" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">OpenAI Help Center — Skills in ChatGPT</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Support documentation for installation and troubleshooting</div> | |
| </div> | |
| <a href="https://help.openai.com/en/articles/20001066-skills-in-chatgpt" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| </ul> | |
| <div class="section-title">Skill ideas to build this week</div> | |
| <div class="section-sub">Finance and operations use cases with high repeatability</div> | |
| <table class="use-case-table" style="margin-bottom: 2rem;"> | |
| <thead> | |
| <tr> | |
| <th>Skill name</th> | |
| <th>Inputs</th> | |
| <th>Output</th> | |
| <th>Difficulty</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>monthly-close-narrative</td> | |
| <td>Variance CSV</td> | |
| <td>Executive narrative + variance table</td> | |
| <td><span class="badge badge-teal">Starter</span></td> | |
| </tr> | |
| <tr> | |
| <td>finance-memo-standard</td> | |
| <td>Raw analysis text</td> | |
| <td>Formatted memo: assumptions → method → results → sensitivities</td> | |
| <td><span class="badge badge-teal">Starter</span></td> | |
| </tr> | |
| <tr> | |
| <td>kpi-commentary-writer</td> | |
| <td>KPI data (CSV or paste)</td> | |
| <td>Structured narrative: drivers, risks, outlook</td> | |
| <td><span class="badge badge-blue">Moderate</span></td> | |
| </tr> | |
| <tr> | |
| <td>board-readout-style</td> | |
| <td>Any financial analysis</td> | |
| <td>Board-ready update: metrics-first, crisp, minimal jargon</td> | |
| <td><span class="badge badge-blue">Moderate</span></td> | |
| </tr> | |
| <tr> | |
| <td>budget-vs-actuals-explainer</td> | |
| <td>Budget + actuals data</td> | |
| <td>Plain-language variance explanations by category</td> | |
| <td><span class="badge badge-blue">Moderate</span></td> | |
| </tr> | |
| <tr> | |
| <td>audit-ready-memo</td> | |
| <td>Transaction or process description</td> | |
| <td>Memo with methodology, evidence citations, conclusion, reviewer checklist</td> | |
| <td><span class="badge badge-red">Advanced</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="section-title">Community</div> | |
| <ul class="resource-list"> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">Agent Skills Discord Server</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Official community for Agent Skills contributors and users</div> | |
| </div> | |
| <a href="https://discord.gg/MKPE9g8aUy" class="resource-link" target="_blank">Join ↗</a> | |
| </li> | |
| <li> | |
| <div> | |
| <div style="font-weight: 500; font-size: 14px;">Agent Skills GitHub Discussions</div> | |
| <div style="font-size: 12px; color: var(--text-faint); margin-top: 2px;">Contribute to the open standard, share skill patterns, track spec updates</div> | |
| </div> | |
| <a href="https://github.com/agentskills/agentskills/discussions" class="resource-link" target="_blank">Visit ↗</a> | |
| </li> | |
| </ul> | |
| <div class="callout callout-tip"> | |
| <strong>Next step:</strong> Identify the one task your team repeats most often in ChatGPT. Open a new chat and type: <em>"Build me a skill for [your task]. The inputs are [X], the required output format is [Y], and these guardrails always apply: [Z]."</em> Install it, test it on a real example, and share it with one other person on your team. | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(6)">← Best Practices</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(8)">Next: Sources →</button> | |
| </div> | |
| </div> | |
| <!-- PAGE 8: SOURCES --> | |
| <div class="page" id="page-8"> | |
| <div class="section-title">Source material</div> | |
| <div class="section-sub">All primary sources used to build this guide — for audit, review, and attribution</div> | |
| <div class="callout callout-info" style="margin-bottom: 2rem;"> | |
| <strong>Note on access:</strong> Some links (OpenAI Help Center, OpenAI Academy) require a ChatGPT for Work account or workspace membership to view. The Agent Skills specification and GitHub repositories are fully public. | |
| </div> | |
| <div class="section-title" style="font-size: 18px;">OpenAI / ChatGPT</div> | |
| <div class="card" style="margin-bottom: 1.5rem;"> | |
| <table style="width:100%; border-collapse: collapse; font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 35%;">Source</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 40%;">URL</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Access</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">OpenAI Academy — Skills in ChatGPT</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://academy.openai.com/public/clubs/work-users-ynjqu/resources/skills" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">academy.openai.com/public/clubs/work-users-ynjqu/resources/skills</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-blue">Work account</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">OpenAI Help Center — Skills in ChatGPT</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://help.openai.com/en/articles/20001066-skills-in-chatgpt" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">help.openai.com/en/articles/20001066-skills-in-chatgpt</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-gold">Login required</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; font-weight: 500; vertical-align: top;">OpenAI Academy — Work Users Club</td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><a href="https://academy.openai.com/public/clubs/work-users-ynjqu/overview" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">academy.openai.com/public/clubs/work-users-ynjqu/overview</a></td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><span class="badge badge-blue">Work account</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="section-title" style="font-size: 18px;">Agent Skills — Open Standard</div> | |
| <div class="card" style="margin-bottom: 1.5rem;"> | |
| <table style="width:100%; border-collapse: collapse; font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 35%;">Source</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 40%;">URL</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Access</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Overview</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/home" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/home</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Full Specification</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/specification" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/specification</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — What Are Skills?</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/what-are-skills" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/what-are-skills</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Skill Creation Quickstart</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/skill-creation/quickstart" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/skill-creation/quickstart</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Best Practices</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/skill-creation/best-practices" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/skill-creation/best-practices</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Optimizing Descriptions</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/skill-creation/optimizing-descriptions" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/skill-creation/optimizing-descriptions</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Evaluating Skills</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://agentskills.io/skill-creation/evaluating-skills" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/skill-creation/evaluating-skills</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; font-weight: 500; vertical-align: top;">Agent Skills — Client Implementation</td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><a href="https://agentskills.io/client-implementation/adding-skills-support" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">agentskills.io/client-implementation/adding-skills-support</a></td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="section-title" style="font-size: 18px;">GitHub repositories</div> | |
| <div class="card" style="margin-bottom: 1.5rem;"> | |
| <table style="width:100%; border-collapse: collapse; font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 35%;">Source</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 40%;">URL</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Access</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">agentskills/agentskills — Main repo</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://github.com/agentskills/agentskills" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">github.com/agentskills/agentskills</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">agentskills — GitHub Discussions</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://github.com/agentskills/agentskills/discussions" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">github.com/agentskills/agentskills/discussions</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">anthropics/skills — Anthropic example skills</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://github.com/anthropics/skills" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">github.com/anthropics/skills</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; font-weight: 500; vertical-align: top;">skills-ref — Validation tool</td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><a href="https://github.com/agentskills/agentskills/tree/main/skills-ref" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">github.com/agentskills/agentskills/tree/main/skills-ref</a></td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="section-title" style="font-size: 18px;">Anthropic / Claude</div> | |
| <div class="card" style="margin-bottom: 1.5rem;"> | |
| <table style="width:100%; border-collapse: collapse; font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 35%;">Source</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 40%;">URL</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Access</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Anthropic — Complete Guide to Building Skills for Claude (PDF)</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; font-weight: 500; vertical-align: top;">anthropics/skills — GitHub examples</td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><a href="https://github.com/anthropics/skills" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">github.com/anthropics/skills</a></td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="section-title" style="font-size: 18px;">Community</div> | |
| <div class="card" style="margin-bottom: 2rem;"> | |
| <table style="width:100%; border-collapse: collapse; font-size: 13px;"> | |
| <thead> | |
| <tr> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 35%;">Source</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; width: 40%;">URL</th> | |
| <th style="text-align:left; padding: 8px 12px; background: var(--surface3); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;">Access</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); font-weight: 500; vertical-align: top;">Agent Skills — Discord Server</td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><a href="https://discord.gg/MKPE9g8aUy" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">discord.gg/MKPE9g8aUy</a></td> | |
| <td style="padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 11px 12px; font-weight: 500; vertical-align: top;">Discord announcement post</td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><a href="https://github.com/agentskills/agentskills/discussions/273" class="resource-link" target="_blank" style="word-break: break-all; font-size: 12px;">github.com/agentskills/agentskills/discussions/273</a></td> | |
| <td style="padding: 11px 12px; vertical-align: top;"><span class="badge badge-teal">Public</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="callout callout-warn"> | |
| <strong>Access note:</strong> The OpenAI Help Center link (articles/20001066) returned a 403 during research — it requires active workspace authentication. The OpenAI Academy link requires a ChatGPT for Work account. All Agent Skills specification URLs and GitHub links were verified accessible at time of authoring. | |
| </div> | |
| <div class="page-nav"> | |
| <button class="nav-btn" onclick="goTo(7)">← Resources</button> | |
| <button class="nav-btn nav-btn-next" onclick="goTo(0)">↺ Back to Start</button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| let currentPage = 0; | |
| const totalPages = 9; | |
| const visited = new Set([0]); | |
| const checklistItems = [ | |
| "You do it more than once a month", | |
| "The output has a defined format or template", | |
| "There are multiple steps that must happen in order", | |
| "Consistency across team members matters", | |
| "There are guardrails (things that must always or never happen)", | |
| "You've had to correct or re-explain the approach to ChatGPT before" | |
| ]; | |
| function initChecklist() { | |
| const el = document.getElementById('checklist'); | |
| if (!el) return; | |
| el.innerHTML = checklistItems.map((item, i) => ` | |
| <label style="display:flex; align-items:center; gap: 10px; cursor: pointer; padding: 8px 0; border-bottom: 1px solid var(--border);"> | |
| <input type="checkbox" id="check-${i}" style="width:16px; height:16px; cursor:pointer;"> | |
| <span style="font-size: 14px; color: var(--text-muted);">${item}</span> | |
| </label> | |
| `).join(''); | |
| } | |
| function goTo(n) { | |
| document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); | |
| document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active')); | |
| document.getElementById('page-' + n).classList.add('active'); | |
| document.querySelectorAll('.nav-tab')[n].classList.add('active'); | |
| currentPage = n; | |
| visited.add(n); | |
| document.getElementById('progressFill').style.width = ((n + 1) / totalPages * 100) + '%'; | |
| updateProgressDots(); | |
| if (n === 2) initChecklist(); | |
| window.scrollTo(0, 0); | |
| } | |
| function updateProgressDots() { | |
| for (let i = 1; i < totalPages; i++) { | |
| const dot = document.getElementById('dot-' + i); | |
| const lbl = document.getElementById('lbl-' + i); | |
| const conn = document.getElementById('conn-' + (i-1)); | |
| if (!dot) continue; | |
| dot.className = 'p-step-dot'; | |
| lbl.className = 'p-step-label'; | |
| if (i === currentPage) { | |
| dot.className = 'p-step-dot current'; | |
| lbl.className = 'p-step-label current'; | |
| } else if (visited.has(i)) { | |
| dot.className = 'p-step-dot done'; | |
| dot.textContent = '✓'; | |
| lbl.className = 'p-step-label done'; | |
| } | |
| if (conn && visited.has(i)) conn.className = 'p-connector done'; | |
| } | |
| } | |
| function toggleAccordion(btn) { | |
| const body = btn.nextElementSibling; | |
| const arrow = btn.querySelector('.accordion-arrow'); | |
| body.classList.toggle('open'); | |
| arrow.classList.toggle('open'); | |
| } | |
| const quizAnswers = [1]; | |
| const quizFeedback = [ | |
| [ | |
| "Not quite — one-off creative tasks don't benefit from skills since you'd never repeat the exact same workflow.", | |
| "Correct! A monthly variance report with a consistent format and guardrails is exactly what skills are built for — repeatable, structured, compliance-relevant work.", | |
| "Not quite — a quick factual question is fine with a plain chat; there's no repeatable workflow to codify.", | |
| "Not quite — open-ended research exploration varies too much each time to benefit from a fixed workflow skill." | |
| ] | |
| ]; | |
| function answer(q, choice) { | |
| const opts = document.getElementById('q' + (q+1) + 'opts').children; | |
| const fb = document.getElementById('q' + (q+1) + 'fb'); | |
| for (let o of opts) { o.disabled = true; } | |
| opts[choice].classList.add(choice === quizAnswers[q] ? 'correct' : 'wrong'); | |
| if (choice !== quizAnswers[q]) opts[quizAnswers[q]].classList.add('correct'); | |
| fb.textContent = quizFeedback[q][choice]; | |
| fb.className = 'quiz-feedback show ' + (choice === quizAnswers[q] ? 'good' : 'bad'); | |
| } | |
| function generateSkill() { | |
| const name = document.getElementById('s-name').value.trim() || 'my-skill'; | |
| const desc = document.getElementById('s-desc').value.trim() || 'Describe what this skill does and when to use it.'; | |
| const author = document.getElementById('s-author').value.trim() || 'your-team'; | |
| const version = document.getElementById('s-version').value.trim() || '1.0'; | |
| const inputs = document.getElementById('s-inputs').value.trim(); | |
| const steps = document.getElementById('s-steps').value.trim(); | |
| const format = document.getElementById('s-format').value.trim(); | |
| const gotchas = document.getElementById('s-gotchas').value.trim(); | |
| const nameClean = name.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-').replace(/^-|-$/g, '') || 'my-skill'; | |
| let stepsFormatted = ''; | |
| if (steps) { | |
| const lines = steps.split('\n').filter(l => l.trim()); | |
| stepsFormatted = lines.map(l => l.trim().startsWith(/\d/.test(l.trim()[0]) ? l.trim()[0] : '~') ? l.trim() : l.trim()).join('\n'); | |
| } | |
| let gotchasFormatted = ''; | |
| if (gotchas) { | |
| gotchasFormatted = gotchas.split('\n').filter(l => l.trim()).map(l => '- ' + l.replace(/^[-•]\s*/, '')).join('\n'); | |
| } | |
| const output = document.getElementById('skill-output'); | |
| output.innerHTML = `<span class="so-sep">---</span> | |
| <span class="so-key">name:</span> <span class="so-val">${nameClean}</span> | |
| <span class="so-key">description:</span> <span class="so-val">${desc}</span> | |
| <span class="so-key">license:</span> <span class="so-val">Proprietary — internal use only</span> | |
| <span class="so-key">metadata:</span> | |
| <span class="so-key">author:</span> <span class="so-val">${author}</span> | |
| <span class="so-key">version:</span> <span class="so-val">"${version}"</span> | |
| <span class="so-sep">---</span> | |
| ${inputs ? `<span class="so-head"># ${nameClean.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join(' ')}</span> | |
| <span class="so-head">## Required inputs</span> | |
| <span class="so-body">${inputs.split(',').map(i => '- ' + i.trim()).join('\n')}</span> | |
| ` : `<span class="so-head"># ${nameClean.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join(' ')}</span> | |
| `}${stepsFormatted ? `<span class="so-head">## Steps</span> | |
| <span class="so-body">${stepsFormatted}</span> | |
| ` : ''}${format ? `<span class="so-head">## Output format</span> | |
| <span class="so-body">${format}</span> | |
| ` : ''}${gotchasFormatted ? `<span class="so-head">## Gotchas</span> | |
| <span class="so-body">${gotchasFormatted}</span>` : ''}`; | |
| document.getElementById('builderOutput').classList.add('show'); | |
| } | |
| function copySkill() { | |
| const name = document.getElementById('s-name').value.trim() || 'my-skill'; | |
| const desc = document.getElementById('s-desc').value.trim() || 'Describe what this skill does and when to use it.'; | |
| const author = document.getElementById('s-author').value.trim() || 'your-team'; | |
| const version = document.getElementById('s-version').value.trim() || '1.0'; | |
| const inputs = document.getElementById('s-inputs').value.trim(); | |
| const steps = document.getElementById('s-steps').value.trim(); | |
| const format = document.getElementById('s-format').value.trim(); | |
| const gotchas = document.getElementById('s-gotchas').value.trim(); | |
| const nameClean = name.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-').replace(/^-|-$/g, '') || 'my-skill'; | |
| const gotchasFormatted = gotchas ? gotchas.split('\n').filter(l => l.trim()).map(l => '- ' + l.replace(/^[-•]\s*/, '')).join('\n') : ''; | |
| const skillTitle = nameClean.split('-').map(w => w[0].toUpperCase() + w.slice(1)).join(' '); | |
| let text = `---\nname: ${nameClean}\ndescription: ${desc}\nlicense: Proprietary — internal use only\nmetadata:\n author: ${author}\n version: "${version}"\n---\n\n# ${skillTitle}\n`; | |
| if (inputs) text += `\n## Required inputs\n${inputs.split(',').map(i => '- ' + i.trim()).join('\n')}\n`; | |
| if (steps) text += `\n## Steps\n${steps}\n`; | |
| if (format) text += `\n## Output format\n${format}\n`; | |
| if (gotchasFormatted) text += `\n## Gotchas\n${gotchasFormatted}\n`; | |
| navigator.clipboard.writeText(text).then(() => { | |
| const btn = document.querySelector('.copy-btn'); | |
| btn.textContent = 'Copied!'; | |
| setTimeout(() => { btn.textContent = 'Copy to clipboard'; }, 2000); | |
| }); | |
| } | |
| generateSkill(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment