npm - opencode-skills-collection - Versions diffs - 4.0.53 → 4.0.54 - Mend

opencode-skills-collection 4.0.53 → 4.0.54

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

package/bundled-skills/frontend-ui-dark-ts/references/detailed-guide.md ADDED Viewed

@@ -0,0 +1,573 @@
+# Frontend UI Dark Theme (TypeScript) - Detailed Guide
+> This file contains the detailed procedure and reference material extracted from `SKILL.md` for focused loading. The root skill defines activation, examples, safety constraints, and limitations.
+## Stack
+| Package | Version | Purpose |
+|---------|---------|---------|
+| `react` | ^18.x | UI framework |
+| `react-dom` | ^18.x | DOM rendering |
+| `react-router-dom` | ^6.x | Routing |
+| `framer-motion` | ^11.x | Animations |
+| `clsx` | ^2.x | Class merging |
+| `tailwindcss` | ^3.x | Styling |
+| `vite` | ^5.x | Build tool |
+| `typescript` | ^5.x | Type safety |
+## Quick Start
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm install framer-motion clsx react-router-dom
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+## Project Structure
+```
+public/
+├── favicon.ico                    # Classic favicon (32x32)
+├── favicon.svg                    # Modern SVG favicon
+├── apple-touch-icon.png           # iOS home screen (180x180)
+├── og-image.png                   # Social sharing image (1200x630)
+└── site.webmanifest               # PWA manifest
+src/
+├── assets/
+│   └── fonts/
+│       ├── Segoe UI.ttf
+│       ├── Segoe UI Bold.ttf
+│       ├── Segoe UI Italic.ttf
+│       └── Segoe UI Bold Italic.ttf
+├── components/
+│   ├── ui/
+│   │   ├── Button.tsx
+│   │   ├── Card.tsx
+│   │   ├── Input.tsx
+│   │   ├── Badge.tsx
+│   │   ├── Dialog.tsx
+│   │   ├── Tabs.tsx
+│   │   └── index.ts
+│   └── layout/
+│       ├── AppShell.tsx
+│       ├── Sidebar.tsx
+│       └── PageHeader.tsx
+├── styles/
+│   └── globals.css
+├── App.tsx
+└── main.tsx
+```
+## Configuration
+### index.html
+The HTML entry point with mobile viewport, favicons, and social meta tags:
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <!-- Favicons -->
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <!-- Theme color for mobile browser chrome -->
+    <meta name="theme-color" content="#18181B" />
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="App Name" />
+    <meta property="og:description" content="App description" />
+    <meta property="og:image" content="https://example.com/og-image.png" />
+    <meta property="og:url" content="https://example.com" />
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="App Name" />
+    <meta name="twitter:description" content="App description" />
+    <meta name="twitter:image" content="https://example.com/og-image.png" />
+    <title>App Name</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
+### public/site.webmanifest
+PWA manifest for installable web apps:
+```json
+{
+  "name": "App Name",
+  "short_name": "App",
+  "icons": [
+    { "src": "/favicon.ico", "sizes": "32x32", "type": "image/x-icon" },
+    { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
+  ],
+  "theme_color": "#18181B",
+  "background_color": "#18181B",
+  "display": "standalone"
+}
+```
+### tailwind.config.js
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Segoe UI', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        brand: {
+          DEFAULT: '#8251EE',
+          hover: '#9366F5',
+          light: '#A37EF5',
+          subtle: 'rgba(130, 81, 238, 0.15)',
+        },
+        neutral: {
+          bg1: 'hsl(240, 6%, 10%)',
+          bg2: 'hsl(240, 5%, 12%)',
+          bg3: 'hsl(240, 5%, 14%)',
+          bg4: 'hsl(240, 4%, 18%)',
+          bg5: 'hsl(240, 4%, 22%)',
+          bg6: 'hsl(240, 4%, 26%)',
+        },
+        text: {
+          primary: '#FFFFFF',
+          secondary: '#A1A1AA',
+          muted: '#71717A',
+        },
+        border: {
+          subtle: 'hsla(0, 0%, 100%, 0.08)',
+          DEFAULT: 'hsla(0, 0%, 100%, 0.12)',
+          strong: 'hsla(0, 0%, 100%, 0.20)',
+        },
+        status: {
+          success: '#10B981',
+          warning: '#F59E0B',
+          error: '#EF4444',
+          info: '#3B82F6',
+        },
+        dataviz: {
+          purple: '#8251EE',
+          blue: '#3B82F6',
+          green: '#10B981',
+          yellow: '#F59E0B',
+          red: '#EF4444',
+          pink: '#EC4899',
+          cyan: '#06B6D4',
+        },
+      },
+      borderRadius: {
+        DEFAULT: '0.5rem',
+        lg: '0.75rem',
+        xl: '1rem',
+      },
+      boxShadow: {
+        glow: '0 0 20px rgba(130, 81, 238, 0.3)',
+        'glow-lg': '0 0 40px rgba(130, 81, 238, 0.4)',
+      },
+      backdropBlur: {
+        xs: '2px',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'slide-down': 'slideDown 0.3s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideDown: {
+          '0%': { opacity: '0', transform: 'translateY(-10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      // Mobile: safe area insets for notched devices
+      spacing: {
+        'safe-top': 'env(safe-area-inset-top)',
+        'safe-bottom': 'env(safe-area-inset-bottom)',
+        'safe-left': 'env(safe-area-inset-left)',
+        'safe-right': 'env(safe-area-inset-right)',
+      },
+      // Mobile: minimum touch target sizes (44px per Apple/Google guidelines)
+      minHeight: {
+        'touch': '44px',
+      },
+      minWidth: {
+        'touch': '44px',
+      },
+    },
+  },
+  plugins: [],
+};
+```
+### postcss.config.js
+```js
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+### src/styles/globals.css
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Font faces */
+@font-face {
+  font-family: 'Segoe UI';
+  src: url('../assets/fonts/Segoe UI.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Segoe UI';
+  src: url('../assets/fonts/Segoe UI Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Segoe UI';
+  src: url('../assets/fonts/Segoe UI Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Segoe UI';
+  src: url('../assets/fonts/Segoe UI Bold Italic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+/* CSS Custom Properties */
+:root {
+  /* Brand colors */
+  --color-brand: #8251EE;
+  --color-brand-hover: #9366F5;
+  --color-brand-light: #A37EF5;
+  --color-brand-subtle: rgba(130, 81, 238, 0.15);
+  /* Neutral backgrounds */
+  --color-bg-1: hsl(240, 6%, 10%);
+  --color-bg-2: hsl(240, 5%, 12%);
+  --color-bg-3: hsl(240, 5%, 14%);
+  --color-bg-4: hsl(240, 4%, 18%);
+  --color-bg-5: hsl(240, 4%, 22%);
+  --color-bg-6: hsl(240, 4%, 26%);
+  /* Text colors */
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #A1A1AA;
+  --color-text-muted: #71717A;
+  /* Border colors */
+  --color-border-subtle: hsla(0, 0%, 100%, 0.08);
+  --color-border-default: hsla(0, 0%, 100%, 0.12);
+  --color-border-strong: hsla(0, 0%, 100%, 0.20);
+  /* Status colors */
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #3B82F6;
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  /* Border radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease;
+}
+/* Base styles */
+html {
+  color-scheme: dark;
+}
+body {
+  @apply bg-neutral-bg1 text-text-primary font-sans antialiased;
+  min-height: 100vh;
+}
+/* Focus styles */
+*:focus-visible {
+  @apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-neutral-bg1;
+}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  @apply bg-neutral-bg2;
+}
+::-webkit-scrollbar-thumb {
+  @apply bg-neutral-bg5 rounded-full;
+}
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-neutral-bg6;
+}
+/* Glass utility classes */
+@layer components {
+  .glass {
+    @apply backdrop-blur-md bg-white/5 border border-white/10;
+  }
+  .glass-card {
+    @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-xl;
+  }
+  .glass-panel {
+    @apply backdrop-blur-lg bg-black/40 border border-white/5;
+  }
+  .glass-overlay {
+    @apply backdrop-blur-sm bg-black/60;
+  }
+  .glass-input {
+    @apply backdrop-blur-sm bg-white/5 border border-white/10 focus:border-brand focus:bg-white/10;
+  }
+}
+/* Animation utilities */
+@layer utilities {
+  .animate-in {
+    animation: fadeIn 0.3s ease-out, slideUp 0.3s ease-out;
+  }
+}
+```
+### src/main.tsx
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/globals.css';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);
+```
+### src/App.tsx
+```tsx
+import { Routes, Route } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
+import { AppShell } from './components/layout/AppShell';
+import { Dashboard } from './pages/Dashboard';
+import { Settings } from './pages/Settings';
+export default function App() {
+  return (
+    <AppShell>
+      <AnimatePresence mode="wait">
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/settings" element={<Settings />} />
+        </Routes>
+      </AnimatePresence>
+    </AppShell>
+  );
+}
+```
+## Animation Patterns
+### Framer Motion Variants
+```tsx
+// Fade in on mount
+export const fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.2 },
+};
+// Slide up on mount
+export const slideUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: 20 },
+  transition: { duration: 0.3, ease: 'easeOut' },
+};
+// Scale on hover (for buttons/cards)
+export const scaleOnHover = {
+  whileHover: { scale: 1.02 },
+  whileTap: { scale: 0.98 },
+  transition: { type: 'spring', stiffness: 400, damping: 17 },
+};
+// Stagger children
+export const staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.1,
+    },
+  },
+};
+export const staggerItem = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.2, ease: 'easeOut' },
+  },
+};
+```
+### Page Transition Wrapper
+```tsx
+import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
+interface PageTransitionProps {
+  children: ReactNode;
+}
+export function PageTransition({ children }: PageTransitionProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      transition={{ duration: 0.3, ease: 'easeOut' }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+```
+## Glass Effect Patterns
+### Glass Card
+```tsx
+<div className="glass-card p-6">
+  <h2 className="text-lg font-semibold text-text-primary">Card Title</h2>
+  <p className="text-text-secondary mt-2">Card content goes here.</p>
+</div>
+```
+### Glass Panel (Sidebar)
+```tsx
+<aside className="glass-panel w-64 h-screen p-4">
+  <nav className="space-y-2">
+    {/* Navigation items */}
+  </nav>
+</aside>
+```
+### Glass Modal Overlay
+```tsx
+<motion.div
+  className="fixed inset-0 glass-overlay flex items-center justify-center z-50"
+  initial={{ opacity: 0 }}
+  animate={{ opacity: 1 }}
+  exit={{ opacity: 0 }}
+>
+  <motion.div
+    className="glass-card p-6 max-w-md w-full mx-4"
+    initial={{ scale: 0.95, opacity: 0 }}
+    animate={{ scale: 1, opacity: 1 }}
+    exit={{ scale: 0.95, opacity: 0 }}
+  >
+    {/* Modal content */}
+  </motion.div>
+</motion.div>
+```
+## Typography
+| Element | Classes |
+|---------|---------|
+| Page title | `text-2xl font-semibold text-text-primary` |
+| Section title | `text-lg font-semibold text-text-primary` |
+| Card title | `text-base font-medium text-text-primary` |
+| Body text | `text-sm text-text-secondary` |
+| Caption | `text-xs text-text-muted` |
+| Label | `text-sm font-medium text-text-secondary` |
+## Related Files
+- Design Tokens — Complete color system, spacing, typography scales
+- Components — Button, Card, Input, Dialog, Tabs, and more
+- Patterns — Page layouts, navigation, lists, forms

package/bundled-skills/full-stack-orchestration-full-stack-feature/SKILL.md CHANGED Viewed

@@ -137,6 +137,12 @@ Orchestrate full-stack feature development across backend, frontend, and infrast
 Feature to implement: $ARGUMENTS
+## Example
+**User request:**
+> Implement this feature across backend, frontend, and data layers, then verify the end-to-end behavior.
 ## Limitations
 - Use this skill only when the task clearly matches the scope described above.
 - Do not treat the output as a substitute for environment-specific validation, testing, or expert review.

package/bundled-skills/game-development/2d-games/SKILL.md CHANGED Viewed

@@ -125,6 +125,12 @@ date_added: "2026-02-27"
 Use for canvas/Phaser/Kaplay/Pixi 2D systems, or guest viewports inside hybrid web apps.
+## Example
+**User request:**
+> Use @2d-games for this task: 2D game development principles.
 ## Limitations
 - Use this skill only when the task clearly matches the scope described above.

package/bundled-skills/game-development/mobile-games/SKILL.md CHANGED Viewed

@@ -112,6 +112,12 @@ date_added: "2026-02-27"
 ## When to Use
 This skill is applicable to execute the workflow or actions described in the overview.
+## Example
+**User request:**
+> Use @mobile-games for this task: Mobile game development principles.
 ## Limitations
 - Use this skill only when the task clearly matches the scope described above.
 - Do not treat the output as a substitute for environment-specific validation, testing, or expert review.

package/bundled-skills/game-development/vr-ar/SKILL.md CHANGED Viewed

@@ -127,6 +127,12 @@ date_added: "2026-02-27"
 ## When to Use
 This skill is applicable to execute the workflow or actions described in the overview.
+## Example
+**User request:**
+> Use @vr-ar for this task: VR/AR development principles.
 ## Limitations
 - Use this skill only when the task clearly matches the scope described above.
 - Do not treat the output as a substitute for environment-specific validation, testing, or expert review.