wotann 0.5.0 → 0.5.39

package/skills/scientific/markdown-mermaid-writing/references/diagrams/timeline.md

@@ -0,0 +1,96 @@
+<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
+
+# Timeline
+
+> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
+
+**Syntax keyword:** `timeline`
+**Best for:** Chronological events, historical progression, milestones over time, release history
+**When NOT to use:** Task durations/dependencies (use [Gantt](gantt.md)), detailed project plans (use [Gantt](gantt.md))
+
+> ⚠️ **Accessibility:** Timelines do **not** support `accTitle`/`accDescr`. Always place a descriptive _italic_ Markdown paragraph directly above the code block.
+
+---
+
+## Exemplar Diagram
+
+_Timeline of a startup's growth milestones from founding through Series A, organized by year and quarter:_
+
+```mermaid
+timeline
+    title 🚀 Startup Growth Milestones
+    section 2024
+        Q1 : 💡 Founded : Built MVP
+        Q2 : 🧪 Beta launch : 100 users
+        Q3 : 📈 Product-market fit : 1K users
+        Q4 : 💰 Seed round : $2M raised
+    section 2025
+        Q1 : 👥 Team of 10 : Hired engineering lead
+        Q2 : 🌐 Public launch : 10K users
+        Q3 : 🏢 Enterprise tier : First B2B deal
+        Q4 : 📊 $1M ARR : Series A prep
+    section 2026
+        Q1 : 🚀 Series A : $15M raised
+```
+
+---
+
+## Tips
+
+- Use `section` to group by year, quarter, or phase
+- Each entry can have multiple items separated by `:`
+- Keep items concise — 2–4 words each
+- Emoji at the start of key items for visual anchoring
+- **Always** pair with a Markdown text description above for screen readers
+
+---
+
+## Template
+
+_Description of the timeline and the period it covers:_
+
+```mermaid
+timeline
+    title 📋 Your Timeline Title
+    section Period 1
+        Event A : Detail one : Detail two
+        Event B : Detail three
+    section Period 2
+        Event C : Detail four
+        Event D : Detail five : Detail six
+```
+
+---
+
+## Complex Example
+
+_Multi-year technology platform evolution tracking a startup's journey from monolith through microservices to AI-powered platform. Six sections span 2020-2025, each capturing key technical milestones and business metrics that drove architecture decisions:_
+
+```mermaid
+timeline
+    title 🚀 Platform Architecture Evolution
+    section 2020 — Monolith Era
+        Q1 : 💡 Founded company : Rails monolith launched : 10 engineers
+        Q3 : ⚠️ Hit scaling ceiling : 50K concurrent users : Database bottleneck
+    section 2021 — Breaking Apart
+        Q1 : 🔐 Extracted auth service : 🐳 Adopted Docker : CI/CD pipeline live
+        Q3 : 📦 Split order processing : ⚡ Added Redis cache : 200K users
+    section 2022 — Microservices
+        Q1 : ⚙️ 8 services in production : ☸️ Kubernetes migration : Service mesh pilot
+        Q3 : 📥 Event-driven architecture : 📊 Observability stack : 500K users
+    section 2023 — Platform Maturity
+        Q1 : 🌐 Multi-region deployment : 🛡️ Zero-trust networking : 50 engineers
+        Q3 : 🔄 Canary deployments : 📈 99.99% uptime SLA : 2M users
+    section 2024 — AI Integration
+        Q1 : 🧠 ML recommendation engine : ⚡ Real-time personalization
+        Q3 : 🔍 AI-powered search : 📊 Predictive analytics : 5M users
+    section 2025 — Next Generation
+        Q1 : ☁️ Edge computing rollout : 🤖 AI agent platform : 10M users
+```
+
+### Why this works
+
+- **6 sections are eras, not just years** — "Monolith Era", "Breaking Apart", "Microservices" tell the story of _why_ the architecture changed, not just _when_
+- **Business metrics alongside tech milestones** — user counts and team size appear next to architecture decisions. This shows the _pressure_ that drove each evolution (50K users → scaling ceiling → extracted services)
+- **Multiple items per time point** — each quarter packs 2-3 items separated by `:`, giving a dense but scannable view of everything happening in parallel
+- **Emoji anchors the scan** — eyes land on 🧠 ML, 🌐 Multi-region, ⚡ Redis before reading the text. For a quick skim, the emoji alone tells the story

package/skills/scientific/markdown-mermaid-writing/references/diagrams/treemap.md

@@ -0,0 +1,66 @@
+<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
+
+# Treemap Diagram
+
+> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
+
+**Syntax keyword:** `treemap-beta`
+**Mermaid version:** v11.12.0+
+**Best for:** Hierarchical data proportions, budget breakdowns, disk usage, portfolio composition
+**When NOT to use:** Simple flat proportions (use [Pie](pie.md)), flow-based hierarchy (use [Sankey](sankey.md))
+
+> ⚠️ **Accessibility:** Treemap diagrams do **not** support `accTitle`/`accDescr`. Always place a descriptive _italic_ Markdown paragraph directly above the code block.
+>
+> ⚠️ **GitHub support:** Treemap is very new — verify it renders on your target GitHub version before using.
+
+---
+
+## Exemplar Diagram
+
+_Treemap showing annual cloud infrastructure costs broken down by service category and specific service, with rectangle sizes proportional to spend:_
+
+```mermaid
+treemap-beta
+"Compute"
+    "EC2 Instances": 45000
+    "Lambda Functions": 12000
+    "ECS Containers": 8000
+"Storage"
+    "S3 Buckets": 18000
+    "RDS Databases": 15000
+    "DynamoDB": 6000
+"Networking"
+    "CloudFront CDN": 9000
+    "API Gateway": 7000
+"Observability"
+    "CloudWatch": 5000
+    "Datadog": 8000
+```
+
+---
+
+## Tips
+
+- Parent nodes (sections) use quoted text: `"Section Name"`
+- Leaf nodes add a value: `"Leaf Name": 123`
+- Hierarchy is created by **indentation** (spaces or tabs)
+- Values determine the size of each rectangle — larger value = larger area
+- Keep to **2–3 levels** of nesting for clarity
+- Use `classDef` and `:::class` syntax for styling nodes
+- **Always** pair with a Markdown text description above for screen readers
+
+---
+
+## Template
+
+_Description of the hierarchical data and what the proportions represent:_
+
+```mermaid
+treemap-beta
+"Category A"
+    "Sub A1": 40
+    "Sub A2": 25
+"Category B"
+    "Sub B1": 20
+    "Sub B2": 15
+```

package/skills/scientific/markdown-mermaid-writing/references/diagrams/user_journey.md

@@ -0,0 +1,108 @@
+<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
+
+# User Journey
+
+> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
+
+**Syntax keyword:** `journey`
+**Best for:** User experience mapping, customer journey, process satisfaction scoring, onboarding flows
+**When NOT to use:** Simple processes without satisfaction data (use [Flowchart](flowchart.md)), chronological events (use [Timeline](timeline.md))
+
+---
+
+## Exemplar Diagram
+
+```mermaid
+journey
+    accTitle: New Developer Onboarding Experience
+    accDescr: Journey map tracking a new developer through day-one setup, first-week integration, and month-one productivity with satisfaction scores at each step
+
+    title 👤 New Developer Onboarding
+    section 📋 Day 1 Setup
+        Read onboarding doc       : 3 : New Dev
+        Clone repositories        : 4 : New Dev
+        Configure local env       : 2 : New Dev
+        Run into setup issues     : 1 : New Dev
+    section 🤝 Week 1 Integration
+        Meet the team             : 5 : New Dev
+        Pair program on first PR  : 4 : New Dev, Mentor
+        Navigate codebase         : 2 : New Dev
+        First PR merged           : 5 : New Dev
+    section 🚀 Month 1 Productivity
+        Own a small feature       : 4 : New Dev
+        Participate in code review: 4 : New Dev
+        Ship to production        : 5 : New Dev
+```
+
+---
+
+## Tips
+
+- Scores: **1** = 😤 frustrated, **3** = 😐 neutral, **5** = 😄 delighted
+- Assign actors after the score: `5 : Actor1, Actor2`
+- Use `section` with **emoji prefix** to group by time period or phase
+- Focus on **pain points** (low scores) — that's where the insight is
+- Keep to **3–4 sections** with **3–4 steps** each
+
+---
+
+## Template
+
+```mermaid
+journey
+    accTitle: Your Title Here
+    accDescr: Describe the user journey and what experience insights it reveals
+
+    title 👤 Journey Title
+    section 📋 Phase 1
+        Step one           : 3 : Actor
+        Step two           : 4 : Actor
+    section 🔧 Phase 2
+        Step three         : 2 : Actor
+        Step four          : 5 : Actor
+```
+
+---
+
+## Complex Example
+
+A multi-persona e-commerce journey comparing a New Customer vs Returning Customer across 5 phases. The two actors experience the same flow with different satisfaction scores, revealing exactly where first-time UX needs investment.
+
+```mermaid
+journey
+    accTitle: E-Commerce Customer Journey Comparison
+    accDescr: Side-by-side journey map comparing new customer and returning customer satisfaction across discovery, shopping, checkout, fulfillment, and post-purchase phases to identify first-time experience gaps
+
+    title 👤 E-Commerce Customer Journey Comparison
+    section 🔍 Discovery
+        Find the product         : 3 : New Customer, Returning Customer
+        Read reviews             : 4 : New Customer, Returning Customer
+        Compare alternatives     : 3 : New Customer
+        Go to saved favorite     : 5 : Returning Customer
+    section 🛒 Shopping
+        Add to cart              : 4 : New Customer, Returning Customer
+        Apply coupon code        : 2 : New Customer
+        Use stored coupon        : 5 : Returning Customer
+        Choose shipping option   : 3 : New Customer, Returning Customer
+    section 💰 Checkout
+        Enter payment details    : 2 : New Customer
+        Use saved payment        : 5 : Returning Customer
+        Review and confirm       : 4 : New Customer, Returning Customer
+        Receive confirmation     : 5 : New Customer, Returning Customer
+    section 📦 Fulfillment
+        Track shipment           : 3 : New Customer, Returning Customer
+        Receive delivery         : 5 : New Customer, Returning Customer
+        Unbox product            : 5 : New Customer, Returning Customer
+    section 🔄 Post-Purchase
+        Leave a review           : 2 : New Customer
+        Contact support          : 1 : New Customer
+        Reorder same item        : 5 : Returning Customer
+        Recommend to friend      : 3 : Returning Customer
+```
+
+### Why this works
+
+- **Two personas on the same map** — instead of two separate diagrams, both actors appear in each step. The satisfaction gap between New Customer (2-3) and Returning Customer (4-5) is immediately visible in checkout and post-purchase.
+- **5 sections follow the real funnel** — discovery → shopping → checkout → fulfillment → post-purchase. Each section tells a story about where the experience breaks down for new users.
+- **Some steps are persona-specific** — "Compare alternatives" is only New Customer, "Reorder same item" is only Returning Customer. This shows divergent paths within the shared journey.
+- **Low scores are the actionable insight** — New Customer scores 1-2 on payment entry, coupon application, and support contact. These are the specific UX investments that would improve conversion.

package/skills/scientific/markdown-mermaid-writing/references/diagrams/xy_chart.md

@@ -0,0 +1,53 @@
+<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
+
+# XY Chart
+
+> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
+
+**Syntax keyword:** `xychart-beta`
+**Best for:** Numeric data visualization, trends over time, bar/line comparisons, metric dashboards
+**When NOT to use:** Proportional breakdowns (use [Pie](pie.md)), qualitative comparisons (use [Quadrant](quadrant.md))
+
+> ⚠️ **Accessibility:** XY charts do **not** support `accTitle`/`accDescr`. Always place a descriptive _italic_ Markdown paragraph directly above the code block.
+
+---
+
+## Exemplar Diagram
+
+_XY chart comparing monthly revenue growth (bars) versus customer acquisition cost (line) over six months, showing improving unit economics as revenue rises while CAC steadily decreases:_
+
+```mermaid
+xychart-beta
+    title "📈 Revenue vs Customer Acquisition Cost"
+    x-axis [Jan, Feb, Mar, Apr, May, Jun]
+    y-axis "Thousands ($)" 0 --> 120
+    bar [20, 35, 48, 62, 78, 95]
+    line [50, 48, 45, 40, 35, 30]
+```
+
+---
+
+## Tips
+
+- Combine `bar` and `line` to show different metrics on the same chart
+- Use **emoji in the title** for visual flair: `"📈 Revenue Growth"`
+- Use quoted `title` and axis labels
+- Define axis range with `min --> max`
+- Keep data points to **6–12** for readability
+- Multiple `bar` or `line` entries create grouped series
+- **Always** pair with a detailed Markdown text description above for screen readers
+
+---
+
+## Template
+
+_Description of what the X axis, Y axis, bars, and lines represent and the key insight:_
+
+```mermaid
+xychart-beta
+    title "📊 Your Chart Title"
+    x-axis [Label1, Label2, Label3, Label4]
+    y-axis "Unit" 0 --> 100
+    bar [25, 50, 75, 60]
+    line [30, 45, 70, 55]
+```

package/skills/scientific/markdown-mermaid-writing/references/diagrams/zenuml.md

@@ -0,0 +1,71 @@
+<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
+
+# ZenUML Sequence Diagram
+
+> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
+
+**Syntax keyword:** `zenuml`
+**Best for:** Code-like sequence diagrams, method-call-style interactions, developers familiar with programming syntax
+**When NOT to use:** Prefer standard [Sequence Diagrams](sequence.md) for most use cases — ZenUML requires an external plugin and has limited GitHub support.
+
+> ⚠️ **GitHub support:** ZenUML requires the `@mermaid-js/mermaid-zenuml` external module. It may **not render** on GitHub natively. Use standard `sequenceDiagram` syntax for GitHub compatibility.
+>
+> ⚠️ **Accessibility:** ZenUML does **not** support `accTitle`/`accDescr`. Always place a descriptive _italic_ Markdown paragraph directly above the code block.
+
+---
+
+## Exemplar Diagram
+
+_ZenUML sequence diagram showing a user authentication flow with credential validation and token generation using programming-style syntax:_
+
+```mermaid
+zenuml
+    @Actor User
+    @Boundary AuthAPI
+    @Entity Database
+
+    // User initiates login
+    User->AuthAPI.login(credentials) {
+        AuthAPI->Database.findUser(email) {
+            return user
+        }
+        if (user.valid) {
+            return token
+        } else {
+            return error
+        }
+    }
+```
+
+---
+
+## Tips
+
+- Uses **programming-style syntax** with method calls: `A->B.method(args)`
+- Curly braces `{}` create natural nesting (activation bars)
+- Control flow: `if/else`, `while`, `for`, `try/catch/finally`, `par`
+- Participant types: `@Actor`, `@Boundary`, `@Entity`, `@Database`, `@Control`
+- Comments with `//` render above messages
+- `return` keyword draws return arrows
+- **Prefer standard `sequenceDiagram`** for GitHub compatibility
+- Use ZenUML only when the code-style syntax is specifically desired
+
+---
+
+## Template
+
+_Description of the interaction flow:_
+
+```mermaid
+zenuml
+    @Actor User
+    @Boundary Server
+    @Entity DB
+
+    User->Server.request(data) {
+        Server->DB.query(params) {
+            return results
+        }
+        return response
+    }
+```