全部 Skills

Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Azure RBAC or role assignments (use azure-rbac), Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.

Gmail：显示未读收件箱摘要（发件人、主题、日期）。

UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, WPF, WinUI, Avalonia, Uno Platform, UWP, Three.js, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, troubleshoot functions, troubleshoot AKS, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, service bus dead letter.

Azure VM/VMSS router. WHEN: create / provision / deploy / spin-up VM, recommend VM size, compare VM pricing, VMSS, scale set, autoscale, burstable, lightweight server, website, backend, GPU, machine learning, HPC simulation, dev/test, workload, family, load balancer, Flexible orchestration, Uniform orchestration, cost estimate, can't connect / RDP / SSH, refused, black screen, reset password, reach VM, port 3389, NSG, security, Linux, troubleshoot, troubleshooting, connectivity, capacity reservation (CRG), reserve, guarantee capacity, pre-provision, CRG association, CRG disassociation, machine enrollment (EMM), Essential Machine Management, monitor. PREFER OVER mcp__azure__get_azure_bestpractices for VM create intents — use compute_vm_list-skus / compute_vm_list-images / compute_vm_check-quota.

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), Figma Motion animations (MCP), and shaders (MCP source / native export). Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

端到端、阶段门控的AI编码代理SDLC：不懈的设计面试 → 已审查的规格 → 依赖图任务板 → 安全波次TDD执行 → 验证 → 收敛。处理功能、缺陷、重构、绿地项目、规划分解和迁移。触发条件为"绝对工作"、"端到端构建"、"规划并构建"、"分解为任务"、"对计划进行严格审查"、"领取此工单"、"运行此迁移"。

依赖升级：按语义化版本波浪规划过时/有漏洞的依赖（补丁和次要版本批量处理，主版本门控并阅读变更日志），逐步应用，每次重新生成锁文件并确保测试通过。在绿色主分支上运行。触发条件为："绝对升级"、"升级我们的依赖"、"提升依赖版本"、"更新包"、"迁移已弃用的X"、"清理Dependabot积压任务"。

专业 DOCX 文档创建、编辑和格式化（使用 OpenXML SDK (.NET)）。三个流程：(A) 从头创建新文档，(B) 在现有文档中填充/编辑内容，(C) 应用带 XSD 验证门控检查的模板格式化。只要用户需要生成、修改或格式化 Word 文档时——包括当用户说“写一份报告”、“起草一份提案”、“制作一份合同”、“填写此表格”、“按照此模板重新排版”或任何最终输出为 .docx 文件的任务——**必须**使用本技能。即使用户没有明确提到“docx”，但如果任务暗示需要可打印/正式文档，也应使用本技能。

使用具体的 CSS/Tailwind 值构建精致、有意的用户界面 —— 排版、颜色、布局、间距、暗色模式、无障碍设计、动画、组件。编码具体且带有明确值的意见性规则，而非模糊建议。涵盖按钮、卡片、表单、表格、导航、仪表盘、落地页、新手引导等。触发词包括：“绝对 UI”、“设计一个 UI”、“给这个组件设置样式”、“让它看起来不那么像 AI 生成”、“修复间距/排版/颜色”、“暗色模式”、“设计一个定价页面”、“让它看起来更好”。

轻量级独立设计规范，适用于AI编码代理：代码库扫描 → 有限的澄清轮次（3–5个问题，非盘问） → 将审查过的设计文档写入 `docs/plans/` → 独立评分审查 → 停止。无任务板，无构建。当您想要一份规格用于讨论、交接或在提交实现前进行审查时使用。在准备构建时，可链接到 absolute-work 流程。触发词为："absolute spec"、"write a spec"、"spec out this feature"、"draft a design doc"、"I want a spec to hand off / review, don't build it yet"。

当用户想要简化、清理、重构、整理或优化代码时使用——针对其暂存/未暂存的 Git 变更或目标文件/路径。降低复杂度、扁平化嵌套、去除冗余和死代码，按价值对每项变更进行评分（保留低价值变动），然后运行测试以证明未破坏任何功能。触发词："simplify"、"simplify this"、"simplify my code/changes"、"clean up"、"clean this up"、"clean up my changes"、"refactor this"、"make this cleaner"、"tidy this up"、"reduce complexity"、"flatten this"、"remove dead code"、"make it more readable"、"polish before commit" 或 "absolute simplify"。作用于你的工作差异（working diff）；如需全仓库的死代码清理，请使用 absolute-prune；对于 lint/类型债务，请使用 absolute-debt。

死代码和依赖项清理，仓库范围：未使用的依赖项、未引用的导出、不可达代码、孤立文件——仅在提供工具证据的情况下移除，并以可逆的方式进行。在绿色的主干分支上运行。对于差异范围清理，请使用 absolute-simplify。触发词包括 "absolute prune"、"remove dead code"、"find unused deps/exports"、"what can we delete"、"clean up orphaned files"。

Diátaxis 驱动的 AI 编程代理文档：编写、改进或审计教程、操作指南、参考、解释以及开发者文档（README、CONTRIBUTING、ADR）。检测文档栈；在撰写正文前以大纲为关卡；在发布前对照代码验证每一项声明。触发词："absolute docs"、"write docs"、"write a tutorial"、"write a README"、"document this"、"improve this doc"、"audit our docs"。

显示所有Rust移植计划文档的状态以及最近的相关提交。当需要了解已完成与剩余工作的情况时使用。

将现有的 Tesseron TypeScript 代码库进行映射——生成应用、动作、资源、上下文方法使用、传输层、React hooks 以及会话生命周期连接的目录；追踪代理调用如何通过处理器流入应用状态；返回包含文件:行引用的紧凑架构摘要。当用户在导入 `@tesseron/core`、`@tesseron/web`、`@tesseron/server`、`@tesseron/react` 或 `@tesseron/mcp` 的项目中请求“探索”、“映射”、“理解”、“分析”、“追踪”或“解释这是如何工作的”，或在扩展非平凡的 Tesseron 代码库之前，主动使用此功能。调用者应在调用提示中传递作用范围（项目根目录、包或特定功能）。

权威的 Tesseron 文档查询通过 `@tesseron/docs-mcp` MCP 服务器实现。当用户询问关于 Tesseron 协议或 SDK 行为的精确问题时，调用 `search_docs` 查找相关页面，并使用 `read_doc` 获取完整的 Markdown 正文。触发于需要确切规范而非概述的请求——包括线格式（JSON-RPC 信封、`tesseron/hello`、`tesseron/welcome`、`tesseron/resume`、`actions/progress`、`actions/cancel`）、传输帧结构、握手与声明码流程、会话恢复与 resumeToken、生命周期转换、采样契约、引导契约（`ctx.confirm`、`ctx.elicit`）、通过 `AbortSignal` 实现的进度和取消、错误码（`TesseronErrorCode`、`SamplingNotAvailableError`、`ElicitationNotAvailableError`、`TimeoutError`、`CancelledError`、`ResumeFailedError`）、能力协商、来源白名单、多应用命名空间、MCP 网关配置、标准 Schema（Zod、Valibot、Typebox）集成、动作构建器步骤、资源读取/订阅、React Hook 语义。使用如“X 返回什么错误码”、“tesseron/hello 长什么样”、“确切的握手结构”、“resumeToken 流程”、“网关来源白名单”、“给我看规范”、“X 接受哪些字段”等表述。`framework` 技能负责方向性和思维模型；`tesseron-docs` 负责逐章逐节的精确问题解答。

Tesseron TypeScript SDK 快速参考心智模型 — 核心抽象（app、action、resource、handler、ActionContext、transport、session、gateway），每个消费者包的规范导入（`@tesseron/web`、`/server`、`/react`、`/core`、`/mcp`），以及最小可行应用模板。当用户开始 Tesseron 工作、连接第一个 action 或 resource、决定导入哪个消费者包、首次编写 handler，或者了解各部分如何配合时加载。触发条件：代码从 `@tesseron/*` 导入，调用 `tesseron.action(...)`、`tesseron.resource(...)`、`tesseron.connect(...)`、`useTesseronAction`、`useTesseronResource` 或 `useTesseronConnection`，以及提出广泛问题如“什么是 Tesseron”、“actions 如何工作”、“我从哪里开始”。对于权威规范 — 确切的线缆格式、错误码表、握手和恢复形状、完整协议行为 — 请优先参考 `tesseron-docs` 技能，该技能会查询实时 `@tesseron/docs-mcp` 服务器。本技能是速查表；`tesseron-docs` 是手册。

在对 `packages/**` 源码进行任何更改后，若该更改调整了 Tesseron 的公共表面（包括协议消息、导出类型、操作/资源构建器 API、ActionContext 方法、传输层、网关 CLI 标志或 React 钩子），请使用此技能同步更新 `docs/src/content/docs/`，以使 Starlight 站点与代码保持一致。触发器为“更新文档”、“同步文档”、“此次更改后文档已过时”，或当会话结束时存在对公共表面的编辑但未伴随文档编辑时触发。对于仅涉及测试、工具或内部重构且公共表面保持不变的情况，请勿触发。

I'll create a complete set of professional technical diagrams in the Tesseron visual language, with a dark slate base, amber accents, dotted-grid backgrounds, gradient cards, Lucide-style icons, Gaussian-blur glow, and Inter + JetBrains Mono typography. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tesseron Docs – Technical Diagrams</title> <!-- Google Fonts: Inter + JetBrains Mono --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> <style> /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #12141f; font-family: 'Inter', sans-serif; color: #e8eaf0; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; align-items: center; } .container { max-width: 1400px; width: 100%; } /* ── Section headers ── */ .section-title { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: #f5a623; margin: 2.5rem 0 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; } .section-title::before { content: ''; display: inline-block; width: 4px; height: 28px; background: linear-gradient(180deg, #f5a623, #d48c1a); border-radius: 2px; } .section-sub { font-size: 0.95rem; color: #8892a8; margin-bottom: 1.75rem; font-weight: 400; padding-left: 1rem; border-left: 2px solid #2a2d3e; } /* ── Diagram card wrapper ── */ .diagram-card { background: #1a1d2e; border-radius: 18px; padding: 2rem 2rem 1.8rem 2rem; margin-bottom: 2.8rem; border: 1px solid #2a2d3e; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); overflow: hidden; position: relative; } .diagram-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px; background: linear-gradient(135deg, rgba(245, 166, 35, 0.12), transparent 50%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .diagram-card .diagram-label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 500; color: #6b728c; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .diagram-card .diagram-label span { color: #f5a623; } /* ── SVG styling ── */ .diagram-svg { width: 100%; height: auto; display: block; border-radius: 10px; background: #161926; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3); } /* ── Responsive ── */ @media (max-width: 800px) { body { padding: 1.25rem 0.75rem; } .diagram-card { padding: 1rem 0.75rem 0.75rem 0.75rem; } .section-title { font-size: 1.3rem; } } /* ── Tiny footer ── */ .docs-footer { text-align: center; font-size: 0.7rem; color: #3d4156; margin-top: 0.5rem; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; } .docs-footer span { color: #f5a623; } </style> </head> <body> <div class="container"> <!-- ===== INTRO ===== --> <div style="margin-bottom:2rem;"> <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.25rem;"> <span style="font-size:1.6rem;font-weight:700;color:#f5a623;">◆</span> <h1 style="font-weight:600;font-size:1.9rem;letter-spacing:-0.03em;color:#eceef5;"> Tesseron <span style="color:#f5a623;">Diagrams</span> </h1> </div> <p style="color:#6b728c;font-size:0.95rem;padding-left:2.6rem;font-family:'JetBrains Mono',monospace;"> dark slate &nbsp;·&nbsp; single amber accent &nbsp;·&nbsp; dotted grid &nbsp;·&nbsp; gradient cards &nbsp;·&nbsp; glow </p> </div> <!-- ========================================================== --> <!-- 1. ARCHITECTURE DIAGRAM --> <!-- ========================================================== --> <h2 class="section-title">Architecture</h2> <p class="section-sub">System-level component view with layered services and data flow</p> <div class="diagram-card"> <div class="diagram-label"><span>◆</span> ARCHITECTURE &nbsp;·&nbsp; system.context</div> <svg class="diagram-svg" viewBox="0 0 1100 520" xmlns="http://www.w3.org/2000/svg" style="background:#161926; border-radius:10px;"> <!-- ── DEFS ── --> <defs> <!-- Dotted grid pattern --> <pattern id="grid-dots" patternUnits="userSpaceOnUse" width="24" height="24"> <circle cx="12" cy="12" r="1.1" fill="#2a2d3e" opacity="0.55" /> </pattern> <!-- Amber glow filter --> <filter id="amber-glow" x="-40%" y="-40%" width="180%" height="180%"> <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur1" /> <feColorMatrix in="blur1" type="matrix" values="0 0 0 0 0.96 0 0 0 0 0.65 0 0 0 0 0.14 0 0 0 0.45 0" result="colored" /> <feMerge> <feMergeNode in="colored" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <!-- Subtle card gradients --> <linearGradient id="grad-client" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#1f2338" /> <stop offset="100%" stop-color="#181b2c" /> </linearGradient> <linearGradient id="grad-gateway" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#21253c" /> <stop offset="100%" stop-color="#1a1d30" /> </linearGradient> <linearGradient id="grad-service" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#242841" /> <stop offset="100%" stop-color="#1c1f34" /> </linearGradient> <linearGradient id="grad-data" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#1b1e31" /> <stop offset="100%" stop-color="#161829" /> </linearGradient> <!-- Arrow marker --> <marker id="arrow-amber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#f5a623" opacity="0.8" /> </marker> <marker id="arrow-dim" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#4a4f6a" opacity="0.55" /> </marker> <!-- Icon templates (Lucide-style) --> <g id="icon-browser"> <rect x="1" y="3" width="22" height="18" rx="2" stroke="currentColor" stroke-width="1.8" fill="none" /> <line x1="1" y1="9" x2="23" y2="9" stroke="currentColor" stroke-width="1.8" /> <circle cx="4.5" cy="6.5" r="0.9" fill="currentColor" /> </g> <g id="icon-server"> <rect x="2" y="2" width="20" height="20" rx="3" stroke="currentColor" stroke-width="1.8" fill="none" /> <line x1="6" y1="10" x2="18" y2="10" stroke="currentColor" stroke-width="1.8" /> <line x1="6" y1="14" x2="18" y2="14" stroke="currentColor" stroke-width="1.8" /> <line x1="6" y1="18" x2="18" y2="18" stroke="currentColor" stroke-width="1.8" /> </g> <g id="icon-db"> <ellipse cx="12" cy="5" rx="9" ry="3.5" stroke="currentColor" stroke-width="1.8" fill="none" /> <path d="M3 5v14c0 2 4 3.5 9 3.5s9-1.5 9-3.5V5" stroke="currentColor" stroke-width="1.8" fill="none" /> <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="1.8" /> </g> <g id="icon-cache"> <rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="1.8" fill="none" /> <circle cx="12" cy="12" r="2.8" stroke="currentColor" stroke-width="1.8" fill="none" /> <path d="M8 8l4-4l4 4" stroke="currentColor" stroke-width="1.8" fill="none" /> <path d="M8 16l4 4l4-4" stroke="currentColor" stroke-width="1.8" fill="none" /> </g> <g id="icon-queue"> <rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="1.8" fill="none" /> <circle cx="8" cy="12" r="1.8" fill="currentColor" opacity="0.5" /> <circle cx="14" cy="12" r="1.8" fill="currentColor" opacity="0.7" /> <circle cx="20" cy="12" r="1.8" fill="currentColor" /> </g> </defs> <!-- ── BACKGROUND GRID ── --> <rect width="1100" height="520" fill="url(#grid-dots)" opacity="0.6" /> <!-- ── LAYER LABELS (vertical, left side) ── --> <g font-family="'JetBrains Mono',monospace" font-size="9" fill="#4a4f6a" letter-spacing="0.08em"> <text x="28" y="90" transform="rotate(-90,28,90)" text-anchor="middle">CLIENT</text> <text x="28" y="200" transform="rotate(-90,28,200)" text-anchor="middle">GATEWAY</text> <text x="28" y="340" transform="rotate(-90,28,340)" text-anchor="middle">SERVICES</text> <text x="28" y="460" transform="rotate(-90,28,460)" text-anchor="middle">DATA</text> </g> <!-- ── SEPARATOR LINES (soft) ── --> <line x1="48" y1="120" x2="1070" y2="120" stroke="#2a2d3e" stroke-width="0.8" stroke-dasharray="4 6" opacity="0.4" /> <line x1="48" y1="250" x2="1070" y2="250" stroke="#2a2d3e" stroke-width="0.8" stroke-dasharray="4 6" opacity="0.4" /> <line x1="48" y1="400" x2="1070" y2="400" stroke="#2a2d3e" stroke-width="0.8" stroke-dasharray="4 6" opacity="0.4" /> <!-- ── CLIENT LAYER ── --> <!-- Card: Browser --> <rect x="100" y="40" width="180" height="66" rx="10" fill="url(#grad-client)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-browser" x="115" y="47" width="22" height="22" color="#8892a8" /> <text x="146" y="64" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Web Browser</text> <text x="146" y="81" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">React · 18.2.0</text> <text x="146" y="95" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">User interface &amp; routing</text> <!-- Card: Mobile --> <rect x="340" y="40" width="180" height="66" rx="10" fill="url(#grad-client)" stroke="#2f3350" stroke-width="1.2" /> <rect x="355" y="50" width="18" height="24" rx="3" stroke="#8892a8" stroke-width="1.8" fill="none" /> <circle cx="364" cy="79" r="1.8" fill="#8892a8" /> <text x="382" y="64" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Mobile App</text> <text x="382" y="81" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">Flutter · 3.22</text> <text x="382" y="95" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">iOS / Android</text> <!-- Arrow from Client to Gateway --> <line x1="530" y1="73" x2="610" y2="140" stroke="#f5a623" stroke-width="1.6" stroke-dasharray="5 3" opacity="0.7" marker-end="url(#arrow-amber)" /> <text x="543" y="98" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f5a623" opacity="0.7">HTTPS · gRPC</text> <!-- ── GATEWAY LAYER ── --> <!-- Card: API Gateway --> <rect x="660" y="150" width="200" height="72" rx="10" fill="url(#grad-gateway)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-server" x="675" y="159" width="22" height="22" color="#f5a623" /> <text x="708" y="177" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">API Gateway</text> <text x="708" y="194" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">Kong · 3.8</text> <text x="708" y="209" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">Auth · rate-limit · routing</text> <!-- Gateway -> Services arrows --> <line x1="780" y1="222" x2="780" y2="278" stroke="#f5a623" stroke-width="1.6" opacity="0.6" marker-end="url(#arrow-amber)" /> <text x="792" y="255" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f5a623" opacity="0.5">internal</text> <!-- ── SERVICES LAYER ── --> <!-- Card: User Service --> <rect x="100" y="290" width="175" height="72" rx="10" fill="url(#grad-service)" stroke="#2f3350" stroke-width="1.2" /> <circle cx="120" cy="312" r="11" stroke="#f5a623" stroke-width="1.8" fill="none" /> <path d="M115 318a6 6 0 0110 0" stroke="#f5a623" stroke-width="1.6" fill="none" /> <circle cx="120" cy="308" r="2.5" fill="#f5a623" /> <text x="140" y="316" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">User Service</text> <text x="140" y="333" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">Node.js · 22</text> <text x="140" y="349" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">Profiles · auth · roles</text> <!-- Card: Content Service --> <rect x="310" y="290" width="175" height="72" rx="10" fill="url(#grad-service)" stroke="#2f3350" stroke-width="1.2" /> <rect x="328" y="302" width="16" height="18" rx="2" stroke="#f5a623" stroke-width="1.8" fill="none" /> <line x1="332" y1="308" x2="340" y2="308" stroke="#f5a623" stroke-width="1.6" /> <line x1="332" y1="313" x2="340" y2="313" stroke="#f5a623" stroke-width="1.6" /> <text x="352" y="316" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Content Service</text> <text x="352" y="333" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">Go · 1.22</text> <text x="352" y="349" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">Posts · media · search</text> <!-- Card: Notification Service --> <rect x="520" y="290" width="185" height="72" rx="10" fill="url(#grad-service)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-queue" x="538" y="302" width="20" height="20" color="#f5a623" /> <text x="566" y="316" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Notification Svc</text> <text x="566" y="333" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">TypeScript · Bull</text> <text x="566" y="349" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">Email · push · SMS</text> <!-- Horizontal service bus --> <line x1="88" y1="345" x2="715" y2="345" stroke="#f5a623" stroke-width="0.8" stroke-dasharray="3 5" opacity="0.3" /> <!-- Services -> Data arrows --> <line x1="190" y1="362" x2="190" y2="418" stroke="#4a4f6a" stroke-width="1.2" opacity="0.5" marker-end="url(#arrow-dim)" /> <line x1="398" y1="362" x2="398" y2="418" stroke="#4a4f6a" stroke-width="1.2" opacity="0.5" marker-end="url(#arrow-dim)" /> <line x1="610" y1="362" x2="610" y2="418" stroke="#4a4f6a" stroke-width="1.2" opacity="0.5" marker-end="url(#arrow-dim)" /> <!-- ── DATA LAYER ── --> <!-- Card: Primary DB --> <rect x="100" y="430" width="195" height="66" rx="10" fill="url(#grad-data)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-db" x="115" y="440" width="22" height="22" color="#8892a8" /> <text x="148" y="458" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Primary Database</text> <text x="148" y="475" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">PostgreSQL · 16</text> <text x="148" y="489" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">RDBMS · ACID · replicas</text> <!-- Card: Cache --> <rect x="340" y="430" width="170" height="66" rx="10" fill="url(#grad-data)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-cache" x="355" y="440" width="22" height="22" color="#8892a8" /> <text x="386" y="458" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Cache Layer</text> <text x="386" y="475" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">Redis · 7.4</text> <text x="386" y="489" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">In-memory · TTL</text> <!-- Card: Message Queue --> <rect x="555" y="430" width="185" height="66" rx="10" fill="url(#grad-data)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-queue" x="572" y="440" width="22" height="22" color="#8892a8" /> <text x="604" y="458" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#e8eaf0">Message Queue</text> <text x="604" y="475" font-family="'JetBrains Mono',monospace" font-size="9" fill="#6b728c">RabbitMQ · 3.13</text> <text x="604" y="489" font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a">Async · pub/sub</text> <!-- ── EMPHASIZED NODE (glow) ── --> <!-- We'll add a subtle glow behind the API Gateway to demonstrate --> <rect x="654" y="144" width="212" height="84" rx="14" fill="none" stroke="#f5a623" stroke-width="1.6" filter="url(#amber-glow)" opacity="0.6" pointer-events="none" /> <!-- ── LEGEND ── --> <g font-family="'Inter',sans-serif" font-size="9" fill="#4a4f6a"> <rect x="870" y="445" width="10" height="10" rx="2" fill="#2a2d3e" stroke="#2f3350" stroke-width="1" /> <text x="888" y="453">Layer boundary</text> <line x1="870" y1="468" x2="880" y2="468" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-amber)" /> <text x="888" y="472">Data flow</text> <rect x="870" y="485" width="10" height="10" rx="2" fill="none" stroke="#f5a623" stroke-width="1.2" opacity="0.5" /> <text x="888" y="494">Emphasized node</text> </g> <!-- Diagram version / metadata --> <text x="1070" y="510" font-family="'JetBrains Mono',monospace" font-size="7" fill="#3d4156" text-anchor="end"> v2.3 · system context </text> </svg> </div> <!-- ========================================================== --> <!-- 2. SEQUENCE DIAGRAM --> <!-- ========================================================== --> <h2 class="section-title" style="margin-top:1rem;">Sequence</h2> <p class="section-sub">Request lifecycle for user authentication with token refresh</p> <div class="diagram-card"> <div class="diagram-label"><span>◆</span> SEQUENCE &nbsp;·&nbsp; auth.login.flow</div> <svg class="diagram-svg" viewBox="0 0 1100 580" xmlns="http://www.w3.org/2000/svg" style="background:#161926; border-radius:10px;"> <defs> <pattern id="grid-dots-s" patternUnits="userSpaceOnUse" width="24" height="24"> <circle cx="12" cy="12" r="1.1" fill="#2a2d3e" opacity="0.55" /> </pattern> <filter id="glow-seq" x="-30%" y="-30%" width="160%" height="160%"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" /> <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.96 0 0 0 0 0.65 0 0 0 0 0.14 0 0 0 0.35 0" /> </filter> <marker id="arrow-seq" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#f5a623" opacity="0.85" /> </marker> <marker id="arrow-ret" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#6b728c" opacity="0.7" /> </marker> <linearGradient id="grad-lifeline" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#f5a623" stop-opacity="0.25" /> <stop offset="100%" stop-color="#f5a623" stop-opacity="0" /> </linearGradient> </defs> <!-- Background grid --> <rect width="1100" height="580" fill="url(#grid-dots-s)" opacity="0.6" /> <!-- ── PARTICIPANT HEADERS ── --> <!-- We'll define columns for: User, Client, Auth API, Auth Service, Database --> <!-- Participant boxes at the top --> <!-- User --> <rect x="40" y="30" width="120" height="38" rx="8" fill="#1f2338" stroke="#2f3350" stroke-width="1.2" /> <circle cx="68" cy="49" r="8" stroke="#8892a8" stroke-width="1.6" fill="none" /> <path d="M63 54a5 5 0 0110 0" stroke="#8892a8" stroke-width="1.4" fill="none" /> <circle cx="68" cy="46" r="2" fill="#8892a8" /> <text x="84" y="54" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">User</text> <text x="84" y="66" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">browser / app</text> <!-- Client (Frontend) --> <rect x="210" y="30" width="130" height="38" rx="8" fill="#1f2338" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-browser" x="228" y="39" width="18" height="18" color="#8892a8" /> <text x="252" y="54" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Frontend</text> <text x="252" y="66" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">React SPA</text> <!-- Auth API --> <rect x="400" y="30" width="130" height="38" rx="8" fill="#21253c" stroke="#f5a623" stroke-width="1.4" /> <rect x="418" y="39" width="16" height="18" rx="3" stroke="#f5a623" stroke-width="1.6" fill="none" /> <text x="442" y="54" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Auth API</text> <text x="442" y="66" font-family="'JetBrains Mono',monospace" font-size="7" fill="#6b728c">Kong route</text> <!-- Glow on Auth API header --> <rect x="396" y="26" width="138" height="46" rx="11" fill="none" stroke="#f5a623" stroke-width="1.8" filter="url(#glow-seq)" opacity="0.5" pointer-events="none" /> <!-- Auth Service --> <rect x="590" y="30" width="140" height="38" rx="8" fill="#1f2338" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-server" x="608" y="39" width="18" height="18" color="#8892a8" /> <text x="632" y="54" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Auth Service</text> <text x="632" y="66" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">Node.js · JWT</text> <!-- Database --> <rect x="790" y="30" width="130" height="38" rx="8" fill="#1f2338" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-db" x="808" y="39" width="18" height="18" color="#8892a8" /> <text x="832" y="54" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Database</text> <text x="832" y="66" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">PostgreSQL</text> <!-- Lifelines (dashed vertical lines) --> <g stroke="#2a2d3e" stroke-width="1.2" stroke-dasharray="4 5"> <line x1="100" y1="75" x2="100" y2="530" /> <line x1="275" y1="75" x2="275" y2="530" /> <line x1="465" y1="75" x2="465" y2="530" /> <line x1="660" y1="75" x2="660" y2="530" /> <line x1="855" y1="75" x2="855" y2="530" /> </g> <!-- ── MESSAGES ── --> <!-- 1. User -> Frontend: Enter credentials --> <line x1="100" y1="110" x2="265" y2="110" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="135" y="104" font-family="'Inter',sans-serif" font-size="10" fill="#e8eaf0">Enter email &amp; password</text> <text x="135" y="120" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">click "Sign In"</text> <!-- 2. Frontend -> Auth API: POST /auth/login --> <line x1="275" y1="150" x2="455" y2="150" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="310" y="144" font-family="'Inter',sans-serif" font-size="10" fill="#e8eaf0">POST /auth/login</text> <text x="310" y="160" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">{ email, password }</text> <!-- 3. Auth API -> Auth Service: validate + sign --> <line x1="465" y1="190" x2="650" y2="190" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="500" y="184" font-family="'Inter',sans-serif" font-size="10" fill="#e8eaf0">validate credentials</text> <text x="500" y="200" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">bcrypt · JWT sign</text> <!-- 4. Auth Service -> Database: SELECT user --> <line x1="660" y1="230" x2="845" y2="230" stroke="#6b728c" stroke-width="1.4" marker-end="url(#arrow-ret)" /> <text x="698" y="224" font-family="'Inter',sans-serif" font-size="10" fill="#8892a8">SELECT user by email</text> <text x="698" y="240" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">query · index scan</text> <!-- Activation bar on Database --> <rect x="855" y="225" width="4" height="18" fill="#f5a623" opacity="0.7" rx="2" /> <!-- 5. Database -> Auth Service: user row --> <line x1="855" y1="270" x2="670" y2="270" stroke="#6b728c" stroke-width="1.4" marker-end="url(#arrow-ret)" /> <text x="710" y="264" font-family="'Inter',sans-serif" font-size="10" fill="#8892a8">user row + hash</text> <text x="710" y="280" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">200 · found</text> <!-- 6. Auth Service -> Auth API: token --> <line x1="660" y1="310" x2="475" y2="310" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="510" y="304" font-family="'Inter',sans-serif" font-size="10" fill="#e8eaf0">return JWT + refresh</text> <text x="510" y="320" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">access_token · refresh_token</text> <!-- 7. Auth API -> Frontend: 200 OK --> <line x1="465" y1="350" x2="285" y2="350" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="310" y="344" font-family="'Inter',sans-serif" font-size="10" fill="#e8eaf0">200 · Set-Cookie</text> <text x="310" y="360" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">HttpOnly · Secure · SameSite</text> <!-- 8. Frontend -> User: dashboard --> <line x1="275" y1="390" x2="110" y2="390" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="140" y="384" font-family="'Inter',sans-serif" font-size="10" fill="#e8eaf0">Redirect to dashboard</text> <text x="140" y="400" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">window.location</text> <!-- ── SELF-REF / NOTE: Token refresh ── --> <rect x="420" y="430" width="260" height="42" rx="8" fill="#1a1d2e" stroke="#2f3350" stroke-width="1.2" /> <text x="440" y="450" font-family="'Inter',sans-serif" font-size="10" font-weight="600" fill="#f5a623">⟳ Token refresh</text> <text x="440" y="466" font-family="'Inter',sans-serif" font-size="9" fill="#6b728c">Silent refresh via /auth/refresh every 15 min</text> <!-- ── ACTIVATION BARS (along lifelines) ── --> <rect x="465" y="145" width="4" height="215" fill="url(#grad-lifeline)" rx="2" /> <rect x="660" y="185" width="4" height="135" fill="url(#grad-lifeline)" rx="2" /> <rect x="855" y="225" width="4" height="50" fill="url(#grad-lifeline)" rx="2" /> <!-- ── LEGEND ── --> <g font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a"> <line x1="80" y1="500" x2="110" y2="500" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-seq)" /> <text x="118" y="503">Request</text> <line x1="200" y1="500" x2="230" y2="500" stroke="#6b728c" stroke-width="1.4" marker-end="url(#arrow-ret)" /> <text x="238" y="503">Response</text> <rect x="330" y="495" width="8" height="8" rx="2" fill="#f5a623" opacity="0.3" /> <text x="346" y="503">Active period</text> </g> <!-- Metadata --> <text x="1070" y="565" font-family="'JetBrains Mono',monospace" font-size="7" fill="#3d4156" text-anchor="end"> seq · auth.login.v2 </text> </svg> </div> <!-- ========================================================== --> <!-- 3. STATE DIAGRAM --> <!-- ========================================================== --> <h2 class="section-title">State</h2> <p class="section-sub">Finite-state machine for document processing pipeline</p> <div class="diagram-card"> <div class="diagram-label"><span>◆</span> STATE &nbsp;·&nbsp; doc.processing.fsm</div> <svg class="diagram-svg" viewBox="0 0 1100 500" xmlns="http://www.w3.org/2000/svg" style="background:#161926; border-radius:10px;"> <defs> <pattern id="grid-dots-st" patternUnits="userSpaceOnUse" width="24" height="24"> <circle cx="12" cy="12" r="1.1" fill="#2a2d3e" opacity="0.55" /> </pattern> <filter id="glow-state" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur in="SourceGraphic" stdDeviation="9" result="blur" /> <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.96 0 0 0 0 0.65 0 0 0 0 0.14 0 0 0 0.40 0" /> </filter> <marker id="arrow-st" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#f5a623" opacity="0.8" /> </marker> <marker id="arrow-st-dim" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#4a4f6a" opacity="0.5" /> </marker> </defs> <!-- Background grid --> <rect width="1100" height="500" fill="url(#grid-dots-st)" opacity="0.6" /> <!-- ── STATES ── --> <!-- 1. IDLE (initial) --> <rect x="60" y="170" width="140" height="70" rx="14" fill="#1f2338" stroke="#2f3350" stroke-width="1.4" /> <!-- Initial marker --> <circle cx="70" cy="180" r="4" fill="#f5a623" /> <text x="88" y="196" font-family="'Inter',sans-serif" font-size="14" font-weight="600" fill="#8892a8">Idle</text> <text x="88" y="214" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4a4f6a">awaiting input</text> <circle cx="170" cy="240" r="5" fill="none" stroke="#f5a623" stroke-width="1.6" opacity="0.5" /> <!-- 2. PENDING --> <rect x="320" y="80" width="140" height="70" rx="14" fill="#1f2338" stroke="#2f3350" stroke-width="1.4" /> <text x="348" y="106" font-family="'Inter',sans-serif" font-size="14" font-weight="600" fill="#e8eaf0">Pending</text> <text x="348" y="124" font-family="'JetBrains Mono',monospace" font-size="8" fill="#6b728c">queued</text> <!-- 3. PROCESSING (emphasized - with glow) --> <rect x="530" y="170" width="150" height="70" rx="14" fill="#242841" stroke="#f5a623" stroke-width="1.8" /> <rect x="526" y="166" width="158" height="78" rx="18" fill="none" stroke="#f5a623" stroke-width="1.8" filter="url(#glow-state)" opacity="0.6" pointer-events="none" /> <text x="560" y="196" font-family="'Inter',sans-serif" font-size="14" font-weight="600" fill="#f5a623">Processing</text> <text x="560" y="214" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f5a623" opacity="0.7">active · 12%</text> <!-- Spinner icon --> <path d="M605 182a8 8 0 100 16" stroke="#f5a623" stroke-width="2" fill="none" stroke-dasharray="4 6"> <animateTransform attributeName="transform" type="rotate" from="0 609 190" to="360 609 190" dur="2s" repeatCount="indefinite" /> </path> <!-- 4. SUCCESS --> <rect x="780" y="80" width="140" height="70" rx="14" fill="#1f2338" stroke="#2f3350" stroke-width="1.4" /> <text x="810" y="106" font-family="'Inter',sans-serif" font-size="14" font-weight="600" fill="#7ecf8a">Success</text> <text x="810" y="124" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4a4f6a">completed</text> <circle cx="800" cy="98" r="6" stroke="#7ecf8a" stroke-width="1.6" fill="none" /> <polyline points="796,98 799,101 804,95" stroke="#7ecf8a" stroke-width="1.4" fill="none" /> <!-- 5. FAILED (error state) --> <rect x="780" y="280" width="140" height="70" rx="14" fill="#1f2338" stroke="#2f3350" stroke-width="1.4" /> <text x="808" y="306" font-family="'Inter',sans-serif" font-size="14" font-weight="600" fill="#e06c6c">Failed</text> <text x="808" y="324" font-family="'JetBrains Mono',monospace" font-size="8" fill="#4a4f6a">check logs</text> <circle cx="796" cy="298" r="6" stroke="#e06c6c" stroke-width="1.6" fill="none" /> <line x1="793" y1="295" x2="799" y2="301" stroke="#e06c6c" stroke-width="1.6" /> <line x1="799" y1="295" x2="793" y2="301" stroke="#e06c6c" stroke-width="1.6" /> <!-- ── TRANSITIONS ── --> <!-- Idle -> Pending (on submit) --> <line x1="200" y1="190" x2="310" y2="130" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-st)" /> <text x="230" y="162" font-family="'Inter',sans-serif" font-size="9" fill="#f5a623" opacity="0.8">document.submit()</text> <!-- Pending -> Processing (worker picks up) --> <line x1="460" y1="115" x2="520" y2="195" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-st)" /> <text x="475" y="148" font-family="'Inter',sans-serif" font-size="9" fill="#f5a623" opacity="0.8">worker.allocate()</text> <!-- Processing -> Success --> <line x1="680" y1="195" x2="770" y2="130" stroke="#7ecf8a" stroke-width="1.4" marker-end="url(#arrow-st)" /> <text x="695" y="162" font-family="'Inter',sans-serif" font-size="9" fill="#7ecf8a" opacity="0.7">onComplete()</text> <!-- Processing -> Failed --> <line x1="600" y1="240" x2="800" y2="310" stroke="#e06c6c" stroke-width="1.4" marker-end="url(#arrow-st)" /> <text x="675" y="280" font-family="'Inter',sans-serif" font-size="9" fill="#e06c6c" opacity="0.7">onError()</text> <!-- Failed -> Pending (retry) --> <path d="M 835 350 Q 835 400 460 400 Q 130 400 130 300 Q 130 200 310 140" stroke="#f5a623" stroke-width="1.2" stroke-dasharray="5 4" fill="none" marker-end="url(#arrow-st)" opacity="0.5" /> <text x="440" y="418" font-family="'Inter',sans-serif" font-size="8" fill="#f5a623" opacity="0.5">retry()</text> <!-- Success -> Idle (reset) --> <path d="M 850 150 Q 900 50 500 50 Q 200 50 160 160" stroke="#4a4f6a" stroke-width="1.2" stroke-dasharray="4 5" fill="none" marker-end="url(#arrow-st-dim)" opacity="0.4" /> <text x="460" y="52" font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a" opacity="0.5">reset()</text> <!-- ── LEGEND ── --> <g font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a"> <circle cx="960" cy="420" r="4" fill="#f5a623" /> <text x="972" y="423">Initial state</text> <rect x="960" y="435" width="10" height="10" rx="3" fill="none" stroke="#f5a623" stroke-width="1.6" /> <text x="978" y="444">Active / emphasized</text> <line x1="960" y1="456" x2="975" y2="456" stroke="#e06c6c" stroke-width="1.4" /> <text x="984" y="459">Error transition</text> <line x1="960" y1="472" x2="975" y2="472" stroke="#4a4f6a" stroke-width="1.2" stroke-dasharray="4 4" /> <text x="984" y="475">Reset</text> </g> <!-- Metadata --> <text x="1070" y="490" font-family="'JetBrains Mono',monospace" font-size="7" fill="#3d4156" text-anchor="end"> fsm · doc-pipeline · v1 </text> </svg> </div> <!-- ========================================================== --> <!-- 4. FLOW DIAGRAM --> <!-- ========================================================== --> <h2 class="section-title">Flow</h2> <p class="section-sub">CI/CD deployment pipeline with quality gates and rollback</p> <div class="diagram-card"> <div class="diagram-label"><span>◆</span> FLOW &nbsp;·&nbsp; deploy.pipeline.gates</div> <svg class="diagram-svg" viewBox="0 0 1100 480" xmlns="http://www.w3.org/2000/svg" style="background:#161926; border-radius:10px;"> <defs> <pattern id="grid-dots-fl" patternUnits="userSpaceOnUse" width="24" height="24"> <circle cx="12" cy="12" r="1.1" fill="#2a2d3e" opacity="0.55" /> </pattern> <filter id="glow-flow" x="-30%" y="-30%" width="160%" height="160%"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" /> <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.96 0 0 0 0 0.65 0 0 0 0 0.14 0 0 0 0.30 0" /> </filter> <marker id="arrow-fl" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#f5a623" opacity="0.85" /> </marker> <marker id="arrow-fl-dim" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#4a4f6a" opacity="0.6" /> </marker> <linearGradient id="grad-flow-card" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" stop-color="#1f2338" /> <stop offset="100%" stop-color="#191c2e" /> </linearGradient> </defs> <!-- Background grid --> <rect width="1100" height="480" fill="url(#grid-dots-fl)" opacity="0.6" /> <!-- ── PIPELINE STEPS (horizontal layout with two rows) ── --> <!-- Row 1: Build & Test --> <!-- Step 1: Commit --> <rect x="50" y="60" width="140" height="72" rx="12" fill="url(#grad-flow-card)" stroke="#2f3350" stroke-width="1.2" /> <circle cx="78" cy="86" r="10" stroke="#f5a623" stroke-width="1.8" fill="none" /> <polyline points="73,86 77,90 83,82" stroke="#f5a623" stroke-width="1.8" fill="none" /> <text x="96" y="90" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Commit</text> <text x="96" y="108" font-family="'JetBrains Mono',monospace" font-size="8" fill="#6b728c">git push</text> <text x="96" y="122" font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a">main / feat/*</text> <!-- Arrow 1->2 --> <line x1="190" y1="96" x2="240" y2="96" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-fl)" /> <!-- Step 2: Build --> <rect x="250" y="60" width="140" height="72" rx="12" fill="url(#grad-flow-card)" stroke="#2f3350" stroke-width="1.2" /> <rect x="274" y="76" width="16" height="18" rx="3" stroke="#8892a8" stroke-width="1.8" fill="none" /> <line x1="280" y1="82" x2="284" y2="82" stroke="#8892a8" stroke-width="1.6" /> <line x1="280" y1="87" x2="284" y2="87" stroke="#8892a8" stroke-width="1.6" /> <text x="298" y="90" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Build</text> <text x="298" y="108" font-family="'JetBrains Mono',monospace" font-size="8" fill="#6b728c">Docker · Vite</text> <text x="298" y="122" font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a">image tags</text> <!-- Arrow 2->3 --> <line x1="390" y1="96" x2="440" y2="96" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-fl)" /> <!-- Step 3: Unit + Integration Tests --> <rect x="450" y="60" width="170" height="72" rx="12" fill="url(#grad-flow-card)" stroke="#2f3350" stroke-width="1.2" /> <circle cx="476" cy="84" r="7" stroke="#f5a623" stroke-width="1.6" fill="none" /> <path d="M472 90l4 4l8-8" stroke="#f5a623" stroke-width="1.6" fill="none" /> <text x="496" y="90" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Unit + Integration</text> <text x="496" y="108" font-family="'JetBrains Mono',monospace" font-size="8" fill="#6b728c">Jest · Playwright</text> <text x="496" y="122" font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a">coverage ≥ 80%</text> <!-- Decision diamond after tests --> <polygon points="655,96 675,76 695,96 675,116" fill="#1a1d2e" stroke="#f5a623" stroke-width="1.6" /> <text x="675" y="100" font-family="'Inter',sans-serif" font-size="9" font-weight="600" fill="#f5a623">OK?</text> <!-- Pass arrow (down-right) --> <line x1="695" y1="96" x2="740" y2="96" stroke="#7ecf8a" stroke-width="1.6" marker-end="url(#arrow-fl)" /> <text x="710" y="88" font-family="'Inter',sans-serif" font-size="8" fill="#7ecf8a" opacity="0.8">pass</text> <!-- Fail arrow (down) --> <line x1="675" y1="116" x2="675" y2="170" stroke="#e06c6c" stroke-width="1.4" marker-end="url(#arrow-fl)" opacity="0.7" /> <text x="684" y="148" font-family="'Inter',sans-serif" font-size="8" fill="#e06c6c" opacity="0.7">fail</text> <!-- Step 4 (fail path): Fix --> <rect x="610" y="180" width="130" height="56" rx="10" fill="#1f2338" stroke="#e06c6c" stroke-width="1.2" stroke-dasharray="4 3" /> <text x="640" y="204" font-family="'Inter',sans-serif" font-size="11" font-weight="600" fill="#e06c6c">Fix &amp; recommit</text> <text x="640" y="222" font-family="'JetBrains Mono',monospace" font-size="7" fill="#4a4f6a">rollback · debug</text> <!-- Loop arrow back to commit --> <path d="M 610 208 Q 530 208 530 140 Q 530 96 190 96" stroke="#e06c6c" stroke-width="1.2" stroke-dasharray="5 4" fill="none" marker-end="url(#arrow-fl)" opacity="0.45" /> <!-- Row 2: Deploy --> <!-- Step 5: Deploy to Staging --> <rect x="750" y="60" width="155" height="72" rx="12" fill="url(#grad-flow-card)" stroke="#2f3350" stroke-width="1.2" /> <use href="#icon-server" x="768" y="76" width="18" height="18" color="#f5a623" /> <text x="794" y="90" font-family="'Inter',sans-serif" font-size="12" font-weight="600" fill="#e8eaf0">Deploy Staging</text> <text x="794" y="108" font-family="'JetBrains Mono',monospace" font-size="8" fill="#6b728c">Helm · ArgoCD</text> <text x="794" y="122" font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a">staging.svc</text> <!-- Arrow 5->6 --> <line x1="905" y1="96" x2="950" y2="96" stroke="#f5a623" stroke-width="1.6" marker-end="url(#arrow-fl)" /> <!-- Step 6: E2E + Smoke Tests --> <rect x="960" y="60" width="120" height="72" rx="12" fill="url(#grad-flow-card)" stroke="#2f3350" stroke-width="1.2" /> <text x="986" y="90" font-family="'Inter',sans-serif" font-size="11" font-weight="600" fill="#e8eaf0">E2E &amp; Smoke</text> <text x="986" y="108" font-family="'JetBrains Mono',monospace" font-size="8" fill="#6b728c">Cypress · k6</text> <text x="986" y="122" font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a">canary 10%</text> <!-- Decision after smoke --> <polygon points="1020,165 1040,185 1020,205 1000,185" fill="#1a1d2e" stroke="#f5a623" stroke-width="1.6" /> <text x="1020" y="189" font-family="'Inter',sans-serif" font-size="9" font-weight="600" fill="#f5a623">OK?</text> <!-- Pass arrow to production --> <line x1="1020" y1="205" x2="1020" y2="280" stroke="#7ecf8a" stroke-width="1.6" marker-end="url(#arrow-fl)" /> <text x="1030" y="248" font-family="'Inter',sans-serif" font-size="8" fill="#7ecf8a" opacity="0.8">pass</text> <!-- Step 7: Deploy to Production (emphasized) --> <rect x="910" y="290" width="170" height="72" rx="12" fill="#242841" stroke="#f5a623" stroke-width="1.8" /> <rect x="906" y="286" width="178" height="80" rx="16" fill="none" stroke="#f5a623" stroke-width="1.8" filter="url(#glow-flow)" opacity="0.5" pointer-events="none" /> <use href="#icon-server" x="930" y="306" width="18" height="18" color="#f5a623" /> <text x="958" y="320" font-family="'Inter',sans-serif" font-size="13" font-weight="600" fill="#f5a623">Deploy Production</text> <text x="958" y="338" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f5a623" opacity="0.7">prod.svc · 100%</text> <text x="958" y="353" font-family="'Inter',sans-serif" font-size="8" fill="#6b728c">blue/green · auto-rollback</text> <!-- Fail arrow from smoke back to staging --> <line x1="980" y1="205" x2="900" y2="185" stroke="#e06c6c" stroke-width="1.2" stroke-dasharray="5 4" fill="none" marker-end="url(#arrow-fl)" opacity="0.5" /> <text x="910" y="178" font-family="'Inter',sans-serif" font-size="7" fill="#e06c6c" opacity="0.6">rollback</text> <!-- ── QUALITY GATE BADGE ── --> <rect x="440" y="150" width="130" height="24" rx="6" fill="#1a1d2e" stroke="#2a2d3e" stroke-width="1" /> <text x="460" y="166" font-family="'JetBrains Mono',monospace" font-size="8" fill="#f5a623">⛁ Quality Gate</text> <!-- ── LEGEND ── --> <g font-family="'Inter',sans-serif" font-size="8" fill="#4a4f6a"> <rect x="40" y="400" width="10" height="10" rx="3" fill="none" stroke="#2f3350" stroke-width="1.2" /> <text x="58" y="408">Step</text> <polygon points="190,400 198,408 190,416 182,408" fill="#1a1d2e" stroke="#f5a623" stroke-width="1.2" /> <text x="206" y="408">Decision</text> <line x1="290" y1="404" x2="305" y2="404" stroke="#e06c6c" stroke-width="1.2" stroke-dasharray="4 3" /> <text x="314" y="408">Fail / rollback</text> <rect x="420" y="396" width="10" height="10" rx="3" fill="none" stroke="#f5a623" stroke-width="1.8" /> <text x="438" y="408">Emphasized</text> </g> <!-- Metadata --> <text x="1070" y="465" font-family="'JetBrains Mono',monospace" font-size="7" fill="#3d4156" text-anchor="end"> flow · deploy · v3.1 </text> </svg> </div> <!-- ========================================================== --> <!-- FOOTER --> <!-- ========================================================== --> <div class="docs-footer"> <span>◆</span> Tesseron Design System &nbsp;·&nbsp; dark slate + amber &nbsp;·&nbsp; Inter / JetBrains Mono </div> </div><!-- /container --> </body> </html> ``` ### Tesseron Diagram Design This page delivers four diagram types — architecture, sequence, state, and flow — each built with the Tesseron visual language. Here's how they work: - **Architecture Diagram** – Layered system view with client, gateway, service, and data tiers. Gradient cards and dotted-grid background reinforce the dark slate aesthetic, while the API Gateway node features a Gaussian-blur amber glow to mark emphasis. Lucide-style icons and JetBrains Mono labels keep the technical readout clean. - **Sequence Diagram** – Request lifecycle for authentication. Horizontal lifelines, arrow markers, and activation bars trace the flow from user through frontend, Auth API, service, and database. The Auth API header glows amber to signal the critical node, and response arrows use a muted gray to distinguish returns from requests. - **State Diagram** – Document processing FSM with Idle, Pending, Processing, Success, and Failed states. The Processing state glows amber and includes an animated spinner. Transition labels show triggers (`document.submit()`, `onError()`), and retry/reset paths use dashed lines for distinction. - **Flow Diagram** – CI/CD pipeline with build, test, deploy stages and quality gates. Decision diamonds branch pass/fail paths, with fail routes looping back to fix. The Production deploy node glows amber, and the overall layout uses horizontal step cards with clear arrow direction. Each diagram includes a legend, metadata tag, and consistent typography (Inter for labels, JetBrains Mono for code/version strings). The amber accent stays singular – used only for emphasis, active paths, and key nodes – preserving the restrained monochrome-plus-one aesthetic. --- **Optimization Tip:** You can replace placeholder text (e.g., "v2.3 · system context", "React · 18.2.0") with your actual version numbers, service names, or status messages.

创建专业的暗色主题架构图，作为包含SVG图形的独立HTML文件。适用于用户要求系统架构图、基础设施图、云架构可视化、安全图、网络拓扑图或任何显示系统组件及其关系的技术图。

Plans migrations from Zscaler ZIA/ZPA, Palo Alto, legacy VPN, SWG, or SASE stacks to Cloudflare One. Use for migration assessments, policy mapping, rollout plans, and parity/gap analysis.

Reference document for monopoly security-checklist.

Reference document for monopoly patterns.

Protocol for token-efficient web research. Use when accessing URLs, GitHub repos, or running search queries. Prevents full-page fetching waste.

Use after completing any non-trivial task. The agent self-rates its output on 5 axes — accuracy, completeness, clarity, actionability, conciseness — with concrete evidence per criterion. Produces a structured 1-5 scorecard with specific improvement suggestions.

用于GLM生态系统发现和安装的仅文档主技能（master skill）。 此技能不执行脚本或子进程命令。 它提供官方GLM技能的精选列表、安装方法和源链接。

使用智谱GLM-Image API从文本提示生成高质量图像的官方技能。擅长科学插图、高质量肖像、社交媒体图形和商业海报。支持多种宽高比、高清质量和水印控制。当用户想要生成图像、创建AI艺术、文本转图像或将文本描述转换为视觉内容时，使用此技能。

协调项目 — 跟踪任务、安排会议和共享文档。

飞书知识库：管理知识空间、空间成员和文档节点。创建和查询知识空间、查看和管理空间成员、管理节点层级结构、在知识库中组织文档和快捷方式。当用户需要在知识库中查找或创建文档、浏览知识空间结构、查看或管理空间成员、移动或复制节点时使用。当用户给出 doubao.com 的 /wiki/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：上传文件到知识库节点下（走 lark-drive）、编辑文档/表格/Base 内容（走 lark-doc / lark-sheets / lark-base）。

飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、评论/权限/订阅、标题、版本和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sheet/bitable/slides 时使用；doubao.com 云空间 URL/token 也按资源路径和 token 路由，不回退 WebFetch。不负责：文档内容编辑（走 lark-doc）、表格/Base 表内数据操作（走 lark-sheets/lark-base）、知识空间节点/成员管理（走 lark-wiki）、原生 Markdown 文件读写/patch/diff（走 lark-markdown）。

为基于README优先的深度学习仓库复现提供严格的论文上下文辅助工具。仅当README和仓库文件留下一个狭窄的复现关键缺口，且任务是从主要论文来源中解决特定的论文细节（例如数据集划分、预处理、评估协议、检查点映射或运行时假设）并记录冲突时使用。不得用于一般性的论文摘要、仓库扫描、环境设置、命令执行、仅标题的论文查阅，或默认替代README指南。

Troubleshoot and resolve issues with Azure Messaging SDKs for Event Hubs and Service Bus. Covers connection failures, authentication errors, message processing issues, and SDK configuration problems. WHEN: event hub SDK error, service bus SDK issue, messaging connection failure, AMQP error, event processor host issue, message lock lost, message lock expired, lock renewal, lock renewal batch, send timeout, receiver disconnected, SDK troubleshooting, azure messaging SDK, event hub consumer, service bus queue issue, topic subscription error, enable logging event hub, service bus logging, eventhub python, servicebus java, eventhub javascript, servicebus dotnet, event hub checkpoint, event hub not receiving messages, service bus dead letter, batch processing lock, session lock expired, idle timeout, connection inactive, link detach, slow reconnect, session error, duplicate events, offset reset, receive batch.

Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.

使用 PptxGenJS 实现单页 PowerPoint 幻灯片。在编写或修复幻灯片 JS 文件时使用：尺寸、定位、文本/图像/图表 API、样式规则以及原生 .pptx 输出的导出预期。

Building video apps with Remotion - framework, rendering and Player advice

Best practices for rendering videos

Best practices for writing Remotion React Markup

Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.

Creating a new Remotion video

为前端或网页设计任务选择并下载合适的 DESIGN.md 模板。当用户需要网页设计模板、UI 风格参考、设计系统、落地页或前端界面设计时，浏览长亭百智云 UI 设计模板库，根据产品场景和视觉偏好匹配模板，并将完整 DESIGN.md 保存到项目中。

WorkorAI talent-marketplace skill: candidates search jobs and manage applications; employers run the job lifecycle and get ranked candidate matches with white-box fit explanations.

Rewrites unprofessional code comments into clear ones and performs non-semantic cleanup. Use to professionalize code without altering logic or behavior.

Experimental (preview) Pester skill for migrating classic Should -Be (v5) assertion syntax to the new Should-* (v6) assertions (note the hyphen, no space), e.g. `Should -Be` -> `Should-Be`, `Should -Not -Be` -> `Should-NotBe`. Tracks Pester 6, which is still a release candidate, so this guidance may change; verified against Pester 6.0.0-rc2. Use when converting Pester v5 assertions to Pester v6 Should-* operators, modernizing a Pester test suite, or when a user asks to migrate, convert, or rewrite `Should -...` calls in .Tests.ps1 / PowerShell files.

将React项目和组件从Radix UI迁移到Base UI。当被要求从radix迁移、转向base-ui、转换radix原语或切换shadcn项目的基础库时使用。处理单个组件（如“迁移手风琴组件”）和整个项目。

Review MDPR Markdown presentation workflows with semantic hints, visual checks, and deterministic renderer boundaries.

一次性设置 absolute：询问您希望其行为如何（输出风格、自主性、TDD 严格度、规范目录、分组），同时检测一次技术栈，然后写入 `.absolute.config.json`（项目级，可提交）和 `~/.absolute/config.json`（用户默认值 + 每个项目的覆盖项）。其他所有 absolute-* 命令都会读取该配置，而无需重新检测；非阻塞——命令在没有配置的情况下继续执行，并温和建议进行配置。在输入 "absolute init"、"set up absolute"、"initialize absolute"、"configure absolute"、"first-time setup"、"remember my conventions for this repo" 时触发。

当您需要更新计划文档并进行跨所有编译器遍的深度研究时使用。启动并行子代理分析某个主题如何影响每个编译器阶段，然后将结果合并到计划文档中。

当需要在提交前运行所有编译器检查（测试、lint、格式化）时使用。检测是TS还是Rust代码发生了更改，并运行相应的检查。

审查Rust移植代码的移植保真度、约定合规性和错误处理。与原始TypeScript源代码进行比较。