moai-adk 0.35.1__py3-none-any.whl

moai_adk/templates/.claude/skills/moai-library-mermaid/reference.md

@@ -0,0 +1,228 @@
+# Reference: Mermaid Diagram Expert v5.0.0
+
+## Official Documentation
+
+### Core Resources
+- [Mermaid Official Website](https://mermaid.js.org/) - Latest documentation
+- [Mermaid Introduction](https://mermaid.js.org/intro/) - Getting started guide
+- [Syntax Reference](https://mermaid.js.org/syntax/) - Complete syntax for all diagram types
+- [Live Editor](https://mermaid.live/) - Interactive testing environment
+- [GitHub Repository](https://github.com/mermaid-js/mermaid) - Source code and issues
+
+### CLI Tools
+- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli) - Official Node.js CLI tool
+- [Mermaid CLI Docker](https://hub.docker.com/r/minlag/mermaid-cli) - Docker image
+
+### Framework Integration
+- [Nextra Mermaid Support](https://nextra.site/) - Documentation site integration
+- [Remark Mermaid](https://github.com/remarkjs/remark-mermaid) - Markdown processor plugin
+- [Gatsby Plugin](https://www.gatsbyjs.com/plugins/@ramonak/gatsby-plugin-mermaid/) - Gatsby integration
+
+---
+
+## Diagram Type Resources
+
+### Flowchart / Graph
+- [Flowchart Syntax](https://mermaid.js.org/syntax/flowchart.html)
+- [Node Shapes Reference](https://mermaid.js.org/syntax/flowchart.html#node-shapes)
+- [Styling & Colors](https://mermaid.js.org/syntax/flowchart.html#styling-and-classes)
+
+### Sequence Diagram
+- [Sequence Diagram Syntax](https://mermaid.js.org/syntax/sequenceDiagram.html)
+- [Message Types](https://mermaid.js.org/syntax/sequenceDiagram.html#message-to-self)
+- [Autonumbering](https://mermaid.js.org/syntax/sequenceDiagram.html#autonumber)
+
+### Class Diagram
+- [Class Diagram Syntax](https://mermaid.js.org/syntax/classDiagram.html)
+- [UML Relationships](https://mermaid.js.org/syntax/classDiagram.html#relationship)
+- [Visibility Modifiers](https://mermaid.js.org/syntax/classDiagram.html#class-member-visibility)
+
+### State Diagram
+- [State Diagram v2 Syntax](https://mermaid.js.org/syntax/stateDiagram.html)
+- [Composite States](https://mermaid.js.org/syntax/stateDiagram.html#composite-states)
+- [Parallel States](https://mermaid.js.org/syntax/stateDiagram.html#parallel-state)
+
+### Entity Relationship (ER) Diagram
+- [ER Diagram Syntax](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)
+- [Cardinality Notation](https://mermaid.js.org/syntax/entityRelationshipDiagram.html#cardinality)
+- [Relationship Types](https://mermaid.js.org/syntax/entityRelationshipDiagram.html#relationships)
+
+### Gantt Chart
+- [Gantt Chart Syntax](https://mermaid.js.org/syntax/gantt.html)
+- [Date Formats](https://mermaid.js.org/syntax/gantt.html#date-format)
+- [Task Dependencies](https://mermaid.js.org/syntax/gantt.html#dependencies)
+
+### Mindmap
+- [Mindmap Syntax](https://mermaid.js.org/syntax/mindmap.html)
+- [Icon Support](https://mermaid.js.org/syntax/mindmap.html#icons)
+
+### Timeline
+- [Timeline Syntax](https://mermaid.js.org/syntax/timeline.html)
+- [Event Formatting](https://mermaid.js.org/syntax/timeline.html)
+
+### Git Graph
+- [Git Graph Syntax](https://mermaid.js.org/syntax/gitgraph.html)
+- [Commit Types](https://mermaid.js.org/syntax/gitgraph.html#commit-type)
+- [Branch Operations](https://mermaid.js.org/syntax/gitgraph.html#branch)
+
+### C4 Diagram
+- [C4 Model Syntax](https://mermaid.js.org/syntax/c4Diagram.html)
+- [System Context](https://mermaid.js.org/syntax/c4Diagram.html#system-context-diagram)
+- [Container Diagram](https://mermaid.js.org/syntax/c4Diagram.html#container-diagram)
+
+### User Journey
+- [User Journey Syntax](https://mermaid.js.org/syntax/userJourney.html)
+- [Scoring System](https://mermaid.js.org/syntax/userJourney.html#section)
+
+### Requirement Diagram
+- [Requirement Diagram Syntax](https://mermaid.js.org/syntax/requirementDiagram.html)
+- [Element Types](https://mermaid.js.org/syntax/requirementDiagram.html#elements)
+
+### Pie Chart
+- [Pie Chart Syntax](https://mermaid.js.org/syntax/pie.html)
+- [Data Format](https://mermaid.js.org/syntax/pie.html#pie-example)
+
+### Quadrant Chart
+- [Quadrant Chart Syntax](https://mermaid.js.org/syntax/quadrantChart.html)
+- [Axis Configuration](https://mermaid.js.org/syntax/quadrantChart.html#quadrant)
+
+### XY Chart
+- [XY Chart Syntax](https://mermaid.js.org/syntax/xychart.html)
+- [Data Plotting](https://mermaid.js.org/syntax/xychart.html#scatter-plot)
+
+### Block Diagram
+- [Block Diagram Syntax](https://mermaid.js.org/syntax/block.html)
+- [Nested Blocks](https://mermaid.js.org/syntax/block.html#nested-blocks)
+
+### Sankey Diagram
+- [Sankey Diagram Syntax](https://mermaid.js.org/syntax/sankey.html)
+- [Flow Visualization](https://mermaid.js.org/syntax/sankey.html)
+
+### Kanban Board
+- [Kanban Syntax](https://mermaid.js.org/syntax/kanban.html)
+- [Task Management](https://mermaid.js.org/syntax/kanban.html)
+
+### Packet Diagram
+- [Packet Diagram Syntax](https://mermaid.js.org/syntax/packet.html)
+- [Protocol Structures](https://mermaid.js.org/syntax/packet.html)
+
+### Radar Chart
+- [Radar Chart Syntax](https://mermaid.js.org/syntax/radar.html)
+- [Multi-dimensional Data](https://mermaid.js.org/syntax/radar.html)
+
+---
+
+## Configuration & Customization
+
+### Mermaid Initialize Options
+- [Theme Configuration](https://mermaid.js.org/config/configuration.html#theming)
+- [Theme Variables](https://mermaid.js.org/config/theming.html)
+- [Diagram-Specific Config](https://mermaid.js.org/config/configuration.html#diagram-configurations)
+- [Accessibility Options](https://mermaid.js.org/config/accessibility.html)
+
+### Styling
+- [CSS Classes](https://mermaid.js.org/syntax/flowchart.html#styling-and-classes)
+- [Color Themes](https://mermaid.js.org/config/theming.html)
+- [SVG Classes](https://mermaid.js.org/syntax/flowchart.html#styling-with-css-classes)
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+Rendering Issues
+- [Mermaid Rendering Troubleshooting](https://mermaid.js.org/ecosystem/integrations.html#troubleshooting)
+- [Security Level Configuration](https://mermaid.js.org/config/configuration.html#security-level)
+
+Performance
+- [Large Diagram Optimization](https://mermaid.js.org/config/configuration.html#performance)
+- [Lazy Loading](https://mermaid.js.org/config/configuration.html#lazy-load-example)
+
+Browser Compatibility
+- [Supported Browsers](https://mermaid.js.org/intro/index.html#browser-support)
+- [IE11 Polyfills](https://mermaid.js.org/ecosystem/integrations.html)
+
+---
+
+## Python Integration
+
+### PyPI Packages
+- [mermaid-py](https://pypi.org/project/mermaid-py/) - Python wrapper
+- [pypyrus](https://pypi.org/project/pypyrus/) - Diagram generation library
+- [diagrams](https://diagrams.mingrammer.com/) - AWS/infrastructure diagrams
+
+### Browser Automation
+- [Playwright Documentation](https://playwright.dev/) - Cross-browser automation
+- [Playwright Python](https://playwright.dev/python/) - Python bindings
+
+---
+
+## Tools & Services
+
+### Online Tools
+- [Mermaid Live Editor](https://mermaid.live) - Official editor
+- [Mermaid Editor Pro](https://mermaid.ink/) - Enhanced editor
+
+### VS Code Extensions
+- [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
+- [Markdown Preview Mermaid](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
+- [Mermaid Chart](https://marketplace.visualstudio.com/items?itemName=mermaid-js.mermaid-chart)
+
+### GitHub Integration
+- [GitHub Mermaid Support](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams) - Native support in markdown
+
+### CI/CD
+- [GitHub Actions Mermaid](https://github.com/marketplace/actions/mermaid-cli-action) - Action for diagram generation
+- [GitLab Mermaid Support](https://docs.gitlab.com/ee/user/markdown.html#diagrams) - Native support
+
+---
+
+## Best Practices
+
+### Design Principles
+- Clarity: Keep diagrams simple and focused
+- Hierarchy: Use subgraphs to organize complex flows
+- Consistency: Use same styling and notation throughout
+- Documentation: Add notes and comments for clarity
+
+### Performance Tips
+1. Limit diagram complexity (max 100 nodes for flowcharts)
+2. Use lazy loading for web applications
+3. Cache rendered diagrams when possible
+4. Validate syntax before rendering in production
+
+### Accessibility
+1. Add descriptive text and labels
+2. Use high contrast colors
+3. Provide alternative descriptions
+4. Test with screen readers
+
+---
+
+## Version History
+
+### v5.0.0 (Current)
+- Added Python CLI tool (mermaid-to-svg-png.py)
+- Support for all 21 diagram types
+- Batch processing and automation
+- GitHub Actions integration examples
+- Comprehensive validation and error handling
+
+### v4.0.0
+- Foundation of Mermaid diagram support
+- Nextra integration
+- Auto-generation from source code
+
+---
+
+## Support & Community
+
+- GitHub Issues: [mermaid-js/mermaid/issues](https://github.com/mermaid-js/mermaid/issues)
+- Discussions: [mermaid-js/mermaid/discussions](https://github.com/mermaid-js/mermaid/discussions)
+- Community Chat: [Mermaid Discord](https://discord.gg/mermaid)
+- Stack Overflow: [mermaid tag](https://stackoverflow.com/questions/tagged/mermaid)
+
+---
+
+Last Updated: 2025-11-20

moai_adk/templates/.claude/skills/moai-library-nextra/SKILL.md

@@ -0,0 +1,319 @@
+---
+name: moai-library-nextra
+description: Enterprise Nextra documentation framework with Next.js
+version: 2.0.0
+modularized: true
+allowed-tools: Read, Write, Edit, Grep, Glob
+aliases:
+ - moai-library-nextra
+category: library
+---
+
+## Quick Reference (30 seconds)
+
+Purpose: Build professional documentation sites with Nextra + Next.js.
+
+Nextra Advantages:
+
+- Zero config MDX (Markdown + JSX seamlessly)
+- File-system routing (automatic routes)
+- Performance optimized (code splitting, prefetching)
+- Theme system (pluggable, customizable)
+- i18n built-in (internationalization)
+
+Core Files:
+
+- `pages/` - Documentation pages (MDX)
+- `theme.config.tsx` - Site configuration
+- `_meta.js` - Navigation structure
+
+## Implementation Guide (5 minutes)
+
+### Features
+
+- Nextra documentation framework architecture patterns
+- Next.js 15 integration with optimal configuration
+- Theme customization and component overrides
+- Advanced search with FlexSearch integration
+- Internationalization (i18n) support
+- MDX-powered content with React components
+
+### When to Use
+
+- Building documentation sites with modern React features
+- Creating knowledge bases with advanced search capabilities
+- Developing multi-language documentation portals
+- Implementing custom documentation themes
+- Integrating interactive examples in technical docs
+
+### Core Patterns
+
+Pattern 1: Nextra Project Setup
+
+```bash
+# Initialize Nextra docs site
+npx create-nextra-app@latest my-docs --template docs
+
+# Project structure
+pages/
+ _app.tsx (custom App component)
+ index.mdx (home page)
+ docs/
+ guide.mdx
+ api.mdx
+ _meta.json (navigation config)
+```
+
+Pattern 2: Custom Theme Configuration
+
+```typescript
+// theme.config.tsx
+export default {
+ logo: <span>My Documentation</span>,
+ project: { link: "https://github.com/user/repo" },
+ docsRepositoryBase: "https://github.com/user/repo/tree/main",
+ useNextSeoProps: () => ({
+ titleTemplate: "%s – My Docs",
+ }),
+};
+```
+
+Pattern 3: MDX with React Components
+
+```mdx
+import { Callout } from "nextra/components";
+
+# API Reference
+
+<Callout type="info">This API requires authentication.</Callout>
+
+<CustomCodeBlock language="typescript">// Your code here</CustomCodeBlock>
+```
+
+## Core Patterns (5-10 minutes)
+
+### Pattern 1: Project Structure
+
+Key Concept: Organize documentation files logically
+
+Recommended Structure:
+
+```
+docs/
+ pages/
+ index.mdx # Homepage
+ getting-started/
+ _meta.js # Section config
+ index.mdx
+ installation.mdx
+ guides/
+ _meta.js
+ basics.mdx
+ advanced.mdx
+ api/
+ _meta.js
+ reference.mdx
+ public/ # Static assets
+ theme.config.tsx # Main config
+ next.config.js # Next.js config
+ package.json
+```
+
+### Pattern 2: Theme Configuration
+
+Key Concept: Customize site appearance and behavior
+
+Essential Config:
+
+```typescript
+const config: DocsThemeConfig = {
+ // Branding
+ logo: <span>My Docs</span>,
+ logoLink: "/",
+
+ // Navigation
+ project: { link: "https://github.com/..." },
+ docsRepositoryBase: "https://github.com/.../tree/main",
+
+ // Sidebar
+ sidebar: {
+ defaultMenuCollapseLevel: 1,
+ toggleButton: true,
+ },
+
+ // Table of contents
+ toc: { backToTop: true },
+
+ // Footer
+ footer: { text: "Built with Nextra" },
+};
+```
+
+### Pattern 3: Navigation Structure (\_meta.js)
+
+Key Concept: Control sidebar menu and page ordering
+
+Example:
+
+```javascript
+// pages/guides/_meta.js
+export default {
+ index: "Overview",
+ "getting-started": "Getting Started",
+ basics: "Basic Concepts",
+ advanced: "Advanced Topics",
+ "---": "", // Separator
+ faq: "FAQ",
+};
+```
+
+### Pattern 4: MDX Content & JSX Integration
+
+Key Concept: Mix Markdown with React components
+
+Example:
+
+```mdx
+# My Documentation
+
+<div className="bg-blue-100 p-4">
+ <h3>Important Note</h3>
+ <p>You can embed React components directly!</p>
+</div>
+
+## Code Examples
+
+export const MyComponent = () => (
+ <button onClick={() => alert("Clicked!")}>Click me</button>
+);
+
+<MyComponent />
+```
+
+### Pattern 5: Search & SEO Optimization
+
+Key Concept: Make documentation discoverable
+
+Config:
+
+```typescript
+// theme.config.tsx
+const config: DocsThemeConfig = {
+ // Enable search
+ search: {
+ placeholder: "Search docs...",
+ },
+
+ // SEO metadata
+ head: (
+ <>
+ <meta name="og:title" content="My Documentation" />
+ <meta name="og:description" content="Complete guide" />
+ <meta name="og:image" content="/og-image.png" />
+ </>
+ ),
+
+ // Analytics
+ useNextSeoProps() {
+ return {
+ titleTemplate: "%s - My Docs",
+ };
+ },
+};
+```
+
+---
+
+## Advanced Documentation
+
+This Skill uses Progressive Disclosure. For detailed patterns:
+
+- [modules/configuration.md](modules/configuration.md) - Complete theme.config reference
+- [modules/mdx-components.md](modules/mdx-components.md) - MDX component library
+- [modules/i18n-setup.md](modules/i18n-setup.md) - Internationalization guide
+- [modules/deployment.md](modules/deployment.md) - Hosting & deployment
+
+---
+
+## Theme Options
+
+Built-in Themes:
+
+- nextra-theme-docs (recommended for documentation)
+- nextra-theme-blog (for blogs)
+
+Customization:
+
+- CSS variables for colors
+- Custom sidebar components
+- Footer customization
+- Navigation layout
+
+---
+
+## Deployment
+
+Popular Platforms:
+
+- Vercel (zero-config, recommended)
+- GitHub Pages (free, self-hosted)
+- Netlify (flexible, CI/CD)
+- Custom servers (full control)
+
+Vercel Deployment:
+
+```bash
+npm install -g vercel
+vercel
+# Select project and deploy
+```
+
+---
+
+## Integration with Other Skills
+
+Complementary Skills:
+
+- Skill("moai-docs-generation") - Auto-generate docs from code
+- Skill("moai-workflow-docs") - Validate documentation quality
+- Skill("moai-cc-claude-md") - Markdown formatting
+
+---
+
+## Version History
+
+1.0.1 (2025-11-23)
+
+- Refactored with Progressive Disclosure
+- Configuration patterns highlighted
+- MDX integration guide
+
+1.0.0 (2025-11-12)
+
+- Nextra architecture guide
+- Theme configuration
+- i18n support
+
+---
+
+Maintained by: alfred
+Domain: Documentation Architecture
+Generated with: MoAI-ADK Skill Factory
+
+---
+
+## Works Well With
+
+Agents:
+- workflow-docs - Documentation generation
+- code-frontend - Nextra implementation
+- workflow-spec - Architecture documentation
+
+Skills:
+- moai-docs-generation - Content generation
+- moai-workflow-docs - Documentation validation
+- moai-library-mermaid - Diagram integration
+
+Commands:
+- `/moai:3-sync` - Documentation deployment
+- `/moai:0-project` - Nextra project initialization