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

@agentskillkit/agent-skills 1.0.1 → 3.2.2

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 (801) hide show

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

@@ -1,310 +0,0 @@
-# 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/references/anti-patterns.md DELETED Viewed

@@ -1,46 +0,0 @@
-# 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 |

package/.agent/skills/nextjs-best-practices/SKILL.md DELETED Viewed

@@ -1,203 +0,0 @@
----
-name: nextjs-best-practices
-description: Next.js App Router principles. Server Components, data fetching, routing patterns.
-allowed-tools: Read, Write, Edit, Glob, Grep
----
-# Next.js Best Practices
-> Principles for Next.js App Router development.
----
-## 1. Server vs Client Components
-### Decision Tree
-```
-Does it need...?
-│
-├── useState, useEffect, event handlers
-│   └── Client Component ('use client')
-│
-├── Direct data fetching, no interactivity
-│   └── Server Component (default)
-│
-└── Both?
-    └── Split: Server parent + Client child
-```
-### By Default
-| Type | Use |
-|------|-----|
-| **Server** | Data fetching, layout, static content |
-| **Client** | Forms, buttons, interactive UI |
----
-## 2. Data Fetching Patterns
-### Fetch Strategy
-| Pattern | Use |
-|---------|-----|
-| **Default** | Static (cached at build) |
-| **Revalidate** | ISR (time-based refresh) |
-| **No-store** | Dynamic (every request) |
-### Data Flow
-| Source | Pattern |
-|--------|---------|
-| Database | Server Component fetch |
-| API | fetch with caching |
-| User input | Client state + server action |
----
-## 3. Routing Principles
-### File Conventions
-| File | Purpose |
-|------|---------|
-| `page.tsx` | Route UI |
-| `layout.tsx` | Shared layout |
-| `loading.tsx` | Loading state |
-| `error.tsx` | Error boundary |
-| `not-found.tsx` | 404 page |
-### Route Organization
-| Pattern | Use |
-|---------|-----|
-| Route groups `(name)` | Organize without URL |
-| Parallel routes `@slot` | Multiple same-level pages |
-| Intercepting `(.)` | Modal overlays |
----
-## 4. API Routes
-### Route Handlers
-| Method | Use |
-|--------|-----|
-| GET | Read data |
-| POST | Create data |
-| PUT/PATCH | Update data |
-| DELETE | Remove data |
-### Best Practices
-- Validate input with Zod
-- Return proper status codes
-- Handle errors gracefully
-- Use Edge runtime when possible
----
-## 5. Performance Principles
-### Image Optimization
-- Use next/image component
-- Set priority for above-fold
-- Provide blur placeholder
-- Use responsive sizes
-### Bundle Optimization
-- Dynamic imports for heavy components
-- Route-based code splitting (automatic)
-- Analyze with bundle analyzer
----
-## 6. Metadata
-### Static vs Dynamic
-| Type | Use |
-|------|-----|
-| Static export | Fixed metadata |
-| generateMetadata | Dynamic per-route |
-### Essential Tags
-- title (50-60 chars)
-- description (150-160 chars)
-- Open Graph images
-- Canonical URL
----
-## 7. Caching Strategy
-### Cache Layers
-| Layer | Control |
-|-------|---------|
-| Request | fetch options |
-| Data | revalidate/tags |
-| Full route | route config |
-### Revalidation
-| Method | Use |
-|--------|-----|
-| Time-based | `revalidate: 60` |
-| On-demand | `revalidatePath/Tag` |
-| No cache | `no-store` |
----
-## 8. Server Actions
-### Use Cases
-- Form submissions
-- Data mutations
-- Revalidation triggers
-### Best Practices
-- Mark with 'use server'
-- Validate all inputs
-- Return typed responses
-- Handle errors
----
-## 9. Anti-Patterns
-| ❌ Don't | ✅ Do |
-|----------|-------|
-| 'use client' everywhere | Server by default |
-| Fetch in client components | Fetch in server |
-| Skip loading states | Use loading.tsx |
-| Ignore error boundaries | Use error.tsx |
-| Large client bundles | Dynamic imports |
----
-## 10. Project Structure
-```
-app/
-├── (marketing)/     # Route group
-│   └── page.tsx
-├── (dashboard)/
-│   ├── layout.tsx   # Dashboard layout
-│   └── page.tsx
-├── api/
-│   └── [resource]/
-│       └── route.ts
-└── components/
-    └── ui/
-```
----
-> **Remember:** Server Components are the default for a reason. Start there, add client only when needed.

package/.agent/skills/nodejs-best-practices/SKILL.md DELETED Viewed

@@ -1,76 +0,0 @@
----
-name: nodejs-best-practices
-description: Node.js development principles and decision-making. Framework selection (Hono/Fastify/Express/NestJS), async patterns, security, architecture. Teaches thinking, not copying.
----
-# Node.js Best Practices
-> Principles and decision-making for Node.js development in 2025.
-> **Learn to THINK, not memorize code patterns.**
-## ⚠️ How to Use This Skill
-This skill teaches **decision-making principles**, not fixed code to copy.
-- ASK user for preferences when unclear
-- Choose framework/pattern based on CONTEXT
-- Don't default to same solution every time
-## Quick References
-| Topic | Reference |
-|-------|-----------|
-| Framework Selection | [framework-selection.md](./references/framework-selection.md) |
-| Runtime & Module System | [runtime-modules.md](./references/runtime-modules.md) |
-| Architecture Patterns | [architecture-patterns.md](./references/architecture-patterns.md) |
-| Error Handling | [error-handling.md](./references/error-handling.md) |
-| Async Patterns | [async-patterns.md](./references/async-patterns.md) |
-| Validation & Security | [validation-security.md](./references/validation-security.md) |
-| Testing Strategy | [testing-strategy.md](./references/testing-strategy.md) |
-## Framework Decision Tree
-```
-What are you building?
-├── Edge/Serverless → Hono (fastest cold starts)
-├── High Performance API → Fastify (2-3x faster than Express)
-├── Enterprise/Team → NestJS (structured, DI)
-├── Legacy/Maximum ecosystem → Express
-└── Full-stack → Next.js API Routes or tRPC
-```
-## Framework Comparison
-| Factor | Hono | Fastify | Express |
-|--------|------|---------|---------|
-| **Best for** | Edge, serverless | Performance | Legacy |
-| **Cold start** | Fastest | Fast | Moderate |
-| **TypeScript** | Native | Excellent | Good |
-## Decision Checklist
-Before implementing:
-- [ ] Asked user about stack preference?
-- [ ] Chosen framework for THIS context?
-- [ ] Considered deployment target?
-- [ ] Planned error handling strategy?
-- [ ] Identified validation points?
-- [ ] Considered security requirements?
-## Anti-Patterns
-### ❌ DON'T:
-- Use Express for new edge projects
-- Use sync methods in production
-- Put business logic in controllers
-- Skip input validation
-- Block event loop with CPU work
-### ✅ DO:
-- Choose framework based on context
-- Use layered architecture for growing projects
-- Validate all inputs
-- Use environment variables for secrets
-> **Remember**: Node.js best practices are about decision-making, not memorizing patterns.

package/.agent/skills/nodejs-best-practices/references/architecture-patterns.md DELETED Viewed

@@ -1,34 +0,0 @@
-# Architecture Patterns
-## Layered Structure Concept
-```
-Request Flow:
-│
-├── Controller/Route Layer
-│   ├── Handles HTTP specifics
-│   ├── Input validation at boundary
-│   └── Calls service layer
-│
-├── Service Layer
-│   ├── Business logic
-│   ├── Framework-agnostic
-│   └── Calls repository layer
-│
-└── Repository Layer
-    ├── Data access only
-    ├── Database queries
-    └── ORM interactions
-```
-## Why This Matters
-- **Testability**: Mock layers independently
-- **Flexibility**: Swap database without touching business logic
-- **Clarity**: Each layer has single responsibility
-## When to Simplify
-- Small scripts → Single file OK
-- Prototypes → Less structure acceptable
-- Always ask: "Will this grow?"

package/.agent/skills/nodejs-best-practices/references/async-patterns.md DELETED Viewed

@@ -1,32 +0,0 @@
-# Async Patterns
-## When to Use Each
-| Pattern | Use When |
-|---------|----------|
-| `async/await` | Sequential async operations |
-| `Promise.all` | Parallel independent operations |
-| `Promise.allSettled` | Parallel where some can fail |
-| `Promise.race` | Timeout or first response wins |
-## Event Loop Awareness
-```
-I/O-bound (async helps):
-├── Database queries
-├── HTTP requests
-├── File system
-└── Network operations
-CPU-bound (async doesn't help):
-├── Crypto operations
-├── Image processing
-├── Complex calculations
-└── → Use worker threads or offload
-```
-## Avoiding Event Loop Blocking
-- Never use sync methods in production (fs.readFileSync, etc.)
-- Offload CPU-intensive work
-- Use streaming for large data