npm - @agentskillkit/agent-skills - Versions diffs - 1.0.1 - Mend

@agentskillkit/agent-skills 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (552) hide show

package/.agent/skills/mermaidjs-v11/references/integration.md ADDED Viewed

@@ -0,0 +1,310 @@
+# Mermaid.js Integration Patterns
+JavaScript API integration, HTML embedding, and platform-specific usage.
+## HTML/Browser Integration
+**Basic CDN Setup:**
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
+</head>
+<body>
+  <pre class="mermaid">
+    flowchart TD
+      A[Client] --> B[Load Balancer]
+      B --> C[Server 1]
+      B --> D[Server 2]
+  </pre>
+  <script>
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+</body>
+</html>
+```
+**ES Module (Modern):**
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+```
+## NPM/Node.js Integration
+**Installation:**
+```bash
+npm install mermaid
+# or
+yarn add mermaid
+```
+**Import and Initialize:**
+```javascript
+import mermaid from 'mermaid';
+mermaid.initialize({
+  startOnLoad: true,
+  theme: 'dark',
+  securityLevel: 'strict'
+});
+```
+**Manual Rendering:**
+```javascript
+import mermaid from 'mermaid';
+const graphDefinition = `
+  graph TD
+    A[Start] --> B[Process]
+    B --> C[End]
+`;
+const { svg } = await mermaid.render('graphId', graphDefinition);
+document.getElementById('container').innerHTML = svg;
+```
+## React Integration
+**Component Wrapper:**
+```jsx
+import { useEffect, useRef } from 'react';
+import mermaid from 'mermaid';
+function MermaidDiagram({ chart }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    mermaid.initialize({ startOnLoad: false });
+    if (ref.current) {
+      mermaid.render('diagram', chart).then(({ svg }) => {
+        ref.current.innerHTML = svg;
+      });
+    }
+  }, [chart]);
+  return <div ref={ref} />;
+}
+// Usage
+<MermaidDiagram chart="graph TD\nA-->B" />
+```
+**Next.js (App Router):**
+```jsx
+'use client';
+import dynamic from 'next/dynamic';
+const Mermaid = dynamic(() => import('./MermaidDiagram'), {
+  ssr: false
+});
+export default function Page() {
+  return <Mermaid chart="flowchart TD\nA-->B" />;
+}
+```
+## Vue Integration
+**Component:**
+```vue
+<template>
+  <div ref="container"></div>
+</template>
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import mermaid from 'mermaid';
+const props = defineProps(['chart']);
+const container = ref(null);
+onMounted(() => {
+  mermaid.initialize({ startOnLoad: false });
+  renderDiagram();
+});
+watch(() => props.chart, renderDiagram);
+async function renderDiagram() {
+  const { svg } = await mermaid.render('diagram', props.chart);
+  container.value.innerHTML = svg;
+}
+</script>
+```
+## Markdown Integration
+**GitHub/GitLab:**
+````markdown
+```mermaid
+graph TD
+  A[Start] --> B[End]
+```
+````
+**MDX (Next.js/Gatsby):**
+```mdx
+import Mermaid from './Mermaid';
+# Architecture
+<Mermaid chart={`
+  flowchart LR
+    Client --> API
+    API --> Database
+`} />
+```
+## API Reference
+**mermaid.initialize(config)**
+Configure global settings.
+```javascript
+mermaid.initialize({
+  startOnLoad: true,
+  theme: 'dark',
+  logLevel: 3,
+  securityLevel: 'strict',
+  fontFamily: 'Arial'
+});
+```
+**mermaid.render(id, graphDefinition, config)**
+Programmatically render diagram.
+```javascript
+const { svg, bindFunctions } = await mermaid.render(
+  'uniqueId',
+  'graph TD\nA-->B',
+  { theme: 'forest' }
+);
+```
+**mermaid.parse(text)**
+Validate syntax without rendering.
+```javascript
+try {
+  await mermaid.parse('graph TD\nA-->B');
+  console.log('Valid');
+} catch(e) {
+  console.error('Invalid:', e);
+}
+```
+**mermaid.run(config)**
+Render all diagrams in page.
+```javascript
+await mermaid.run({
+  querySelector: '.mermaid',
+  suppressErrors: false
+});
+```
+## Event Handling
+**Click Events:**
+```javascript
+const graphDefinition = `
+  flowchart TD
+    A[Click me] --> B
+    click A callback "Tooltip text"
+`;
+window.callback = function() {
+  alert('Node clicked!');
+};
+await mermaid.render('graph', graphDefinition);
+```
+**Interactive URLs:**
+```
+flowchart TD
+  A[GitHub] --> B[Docs]
+  click A "https://github.com"
+  click B "https://mermaid.js.org" "Open docs"
+```
+## Advanced Patterns
+**Dynamic Theme Switching:**
+```javascript
+function updateTheme(isDark) {
+  mermaid.initialize({
+    theme: isDark ? 'dark' : 'default',
+    startOnLoad: false
+  });
+  // Re-render all diagrams
+  document.querySelectorAll('.mermaid').forEach(async (el) => {
+    const code = el.textContent;
+    const { svg } = await mermaid.render('id', code);
+    el.innerHTML = svg;
+  });
+}
+```
+**Lazy Loading:**
+```javascript
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(async (entry) => {
+    if (entry.isIntersecting) {
+      const code = entry.target.textContent;
+      const { svg } = await mermaid.render('id', code);
+      entry.target.innerHTML = svg;
+      observer.unobserve(entry.target);
+    }
+  });
+});
+document.querySelectorAll('.mermaid').forEach(el => observer.observe(el));
+```
+**Server-Side Rendering (SSR):**
+```javascript
+import { chromium } from 'playwright';
+async function renderServerSide(code) {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  await page.setContent(`
+    <script src="mermaid.min.js"></script>
+    <div class="mermaid">${code}</div>
+    <script>mermaid.initialize({ startOnLoad: true });</script>
+  `);
+  const svg = await page.locator('.mermaid svg').innerHTML();
+  await browser.close();
+  return svg;
+}
+```
+## Platform-Specific
+**Jupyter/Python:**
+Use mermaid.ink API:
+```python
+from IPython.display import Image
+diagram = "graph TD\nA-->B"
+url = f"https://mermaid.ink/svg/{diagram}"
+Image(url=url)
+```
+**VS Code:**
+Install "Markdown Preview Mermaid Support" extension.
+**Obsidian:**
+Native support in code blocks:
+````markdown
+```mermaid
+graph TD
+  A --> B
+```
+````
+**PowerPoint/Word:**
+Use mermaid.live editor → Export → Insert image.

package/.agent/skills/mobile-design/SKILL.md ADDED Viewed

@@ -0,0 +1,76 @@
+---
+name: mobile-design
+description: Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
+---
+# Mobile Design System
+> **Philosophy:** Touch-first. Battery-conscious. Platform-respectful. Offline-capable.
+> **Core Principle:** Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.
+## 🔧 Runtime Scripts
+| Script | Purpose | Usage |
+|--------|---------|-------|
+| `scripts/mobile_audit.py` | Mobile UX & Touch Audit | `python scripts/mobile_audit.py <project_path>` |
+## 📚 Reference Files (Read Before Working!)
+| Priority | File | Content |
+|----------|------|---------|
+| 🔴 **CRITICAL** | [mobile-design-thinking.md](references/mobile-design-thinking.md) | Anti-memorization, forces thinking |
+| 🔴 **CRITICAL** | [touch-psychology.md](references/touch-psychology.md) | Fitts' Law, gestures, thumb zone |
+| 🔴 **CRITICAL** | [mobile-performance.md](references/mobile-performance.md) | RN/Flutter 60fps, memory |
+| 🟡 Platform | [platform-ios.md](references/platform-ios.md) | iOS HIG, SF Pro, SwiftUI |
+| 🟡 Platform | [platform-android.md](references/platform-android.md) | Material Design 3, Roboto |
+| ⚪ Optional | [mobile-navigation.md](references/mobile-navigation.md) | Tab/Stack/Drawer, deep linking |
+| ⚪ Optional | [mobile-typography.md](references/mobile-typography.md) | System fonts, Dynamic Type |
+| ⚪ Optional | [mobile-color-system.md](references/mobile-color-system.md) | OLED, dark mode, battery |
+| ⚪ Optional | [decision-trees.md](references/decision-trees.md) | Framework/state selection |
+| ⚪ Optional | [anti-patterns.md](references/anti-patterns.md) | Common AI mistakes to avoid |
+## ⚠️ MANDATORY: Ask Before Assuming
+| Aspect | Ask | Why |
+|--------|-----|-----|
+| **Platform** | "iOS, Android, or both?" | Affects EVERY decision |
+| **Framework** | "React Native, Flutter, or native?" | Determines patterns |
+| **Navigation** | "Tab bar, drawer, or stack-based?" | Core UX decision |
+| **Offline** | "Does this need to work offline?" | Affects data strategy |
+## Quick Reference: Platform Defaults
+| Element | iOS | Android |
+|---------|-----|---------|
+| **Primary Font** | SF Pro | Roboto |
+| **Min Touch Target** | 44pt × 44pt | 48dp × 48dp |
+| **Back Navigation** | Edge swipe left | System back button |
+| **Bottom Tab Icons** | SF Symbols | Material Symbols |
+## Framework Decision Tree
+```
+WHAT ARE YOU BUILDING?
+├── OTA updates + rapid iteration → React Native + Expo
+├── Pixel-perfect custom UI → Flutter
+├── Deep native features (iOS) → SwiftUI
+├── Deep native features (Android) → Kotlin + Compose
+└── Existing codebase → Match current framework
+```
+## Pre-Development Checkpoint
+```
+🧠 CHECKPOINT (fill before coding):
+Platform:   [ iOS / Android / Both ]
+Framework:  [ React Native / Flutter / SwiftUI / Kotlin ]
+Files Read: [ List files you've read ]
+3 Principles I Will Apply:
+1. _______________
+2. _______________
+3. _______________
+```
+> **Remember:** Mobile users are impatient, interrupted, using imprecise fingers on small screens. Design for the WORST conditions.

package/.agent/skills/mobile-design/references/anti-patterns.md ADDED Viewed

@@ -0,0 +1,46 @@
+# Mobile Anti-Patterns
+> 🚫 Common AI default tendencies that MUST be avoided!
+## Performance Sins
+| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
+|-------------|----------------|--------------|
+| ScrollView for long lists | Renders ALL items, memory explodes | Use `FlatList` / `FlashList` / `ListView.builder` |
+| Inline renderItem function | New function every render | `useCallback` + `React.memo` |
+| Missing keyExtractor | Index-based keys cause bugs | Unique, stable ID from data |
+| Skip getItemLayout | Async layout = janky scroll | Provide when items have fixed height |
+| setState() everywhere | Unnecessary widget rebuilds | Targeted state, `const` constructors |
+| Native driver: false | Animations blocked by JS thread | `useNativeDriver: true` always |
+| console.log in production | Blocks JS thread severely | Remove before release build |
+| Skip React.memo/const | Every item re-renders | Memoize list items ALWAYS |
+## Touch/UX Sins
+| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
+|-------------|----------------|--------------|
+| Touch target < 44px | Impossible to tap accurately | Minimum 44pt (iOS) / 48dp (Android) |
+| Spacing < 8px between targets | Accidental taps | Minimum 8-12px gap |
+| Gesture-only interactions | Motor impaired users excluded | Always provide button alternative |
+| No loading state | User thinks app crashed | ALWAYS show loading feedback |
+| No error state | User stuck, no recovery path | Show error with retry option |
+| No offline handling | Crash/block when network lost | Graceful degradation, cached data |
+| Ignore platform conventions | Users confused | iOS feels iOS, Android feels Android |
+## Security Sins
+| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
+|-------------|----------------|--------------|
+| Token in AsyncStorage | Easily stolen on rooted device | `SecureStore` / `Keychain` / `EncryptedSharedPreferences` |
+| Hardcode API keys | Reverse engineered from APK/IPA | Environment variables, secure storage |
+| Skip SSL pinning | MITM attacks possible | Pin certificates in production |
+| Log sensitive data | Logs can be extracted | Never log tokens, passwords, PII |
+## Architecture Sins
+| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |
+|-------------|----------------|--------------|
+| Business logic in UI | Untestable, unmaintainable | Service layer separation |
+| Global state for everything | Unnecessary re-renders | Local state default, lift when needed |
+| Deep linking as afterthought | Notifications, shares broken | Plan deep links from day one |
+| Skip dispose/cleanup | Memory leaks | Clean up subscriptions, timers |