npm - @xopcai/xopc - Versions diffs - 0.0.103 → 0.0.104 - Mend

@xopcai/xopc 0.0.103 → 0.0.104

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

package/skills/creative/algorithmic-art/templates/viewer.html DELETED Viewed

@@ -1,599 +0,0 @@
-<!DOCTYPE html>
-<!--
-    THIS IS A TEMPLATE THAT SHOULD BE USED EVERY TIME AND MODIFIED.
-    WHAT TO KEEP:
-    ✓ Overall structure (header, sidebar, main content)
-    ✓ Anthropic branding (colors, fonts, layout)
-    ✓ Seed navigation section (always include this)
-    ✓ Self-contained artifact (everything inline)
-    WHAT TO CREATIVELY EDIT:
-    ✗ The p5.js algorithm (implement YOUR vision)
-    ✗ The parameters (define what YOUR art needs)
-    ✗ The UI controls (match YOUR parameters)
-    Let your philosophy guide the implementation.
-    The world is your oyster - be creative!
--->
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Generative Art Viewer</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Lora:wght@400;500&display=swap" rel="stylesheet">
-    <style>
-        /* Anthropic Brand Colors */
-        :root {
-            --anthropic-dark: #141413;
-            --anthropic-light: #faf9f5;
-            --anthropic-mid-gray: #b0aea5;
-            --anthropic-light-gray: #e8e6dc;
-            --anthropic-orange: #d97757;
-            --anthropic-blue: #6a9bcc;
-            --anthropic-green: #788c5d;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-            background: linear-gradient(135deg, var(--anthropic-light) 0%, #f5f3ee 100%);
-            min-height: 100vh;
-            color: var(--anthropic-dark);
-        }
-        .container {
-            display: flex;
-            min-height: 100vh;
-            padding: 20px;
-            gap: 20px;
-        }
-        /* Sidebar */
-        .sidebar {
-            width: 320px;
-            flex-shrink: 0;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            padding: 24px;
-            border-radius: 12px;
-            box-shadow: 0 10px 30px rgba(20, 20, 19, 0.1);
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-        .sidebar h1 {
-            font-family: 'Lora', serif;
-            font-size: 24px;
-            font-weight: 500;
-            color: var(--anthropic-dark);
-            margin-bottom: 8px;
-        }
-        .sidebar .subtitle {
-            color: var(--anthropic-mid-gray);
-            font-size: 14px;
-            margin-bottom: 32px;
-            line-height: 1.4;
-        }
-        /* Control Sections */
-        .control-section {
-            margin-bottom: 32px;
-        }
-        .control-section h3 {
-            font-size: 16px;
-            font-weight: 600;
-            color: var(--anthropic-dark);
-            margin-bottom: 16px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .control-section h3::before {
-            content: '•';
-            color: var(--anthropic-orange);
-            font-weight: bold;
-        }
-        /* Seed Controls */
-        .seed-input {
-            width: 100%;
-            background: var(--anthropic-light);
-            padding: 12px;
-            border-radius: 8px;
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            margin-bottom: 12px;
-            border: 1px solid var(--anthropic-light-gray);
-            text-align: center;
-        }
-        .seed-input:focus {
-            outline: none;
-            border-color: var(--anthropic-orange);
-            box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.1);
-            background: white;
-        }
-        .seed-controls {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
-            margin-bottom: 8px;
-        }
-        .regen-button {
-            margin-bottom: 0;
-        }
-        /* Parameter Controls */
-        .control-group {
-            margin-bottom: 20px;
-        }
-        .control-group label {
-            display: block;
-            font-size: 14px;
-            font-weight: 500;
-            color: var(--anthropic-dark);
-            margin-bottom: 8px;
-        }
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-        .slider-container input[type="range"] {
-            flex: 1;
-            height: 4px;
-            background: var(--anthropic-light-gray);
-            border-radius: 2px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        .slider-container input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 16px;
-            height: 16px;
-            background: var(--anthropic-orange);
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .slider-container input[type="range"]::-webkit-slider-thumb:hover {
-            transform: scale(1.1);
-            background: #c86641;
-        }
-        .slider-container input[type="range"]::-moz-range-thumb {
-            width: 16px;
-            height: 16px;
-            background: var(--anthropic-orange);
-            border-radius: 50%;
-            border: none;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-        .value-display {
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            color: var(--anthropic-mid-gray);
-            min-width: 60px;
-            text-align: right;
-        }
-        /* Color Pickers */
-        .color-group {
-            margin-bottom: 16px;
-        }
-        .color-group label {
-            display: block;
-            font-size: 12px;
-            color: var(--anthropic-mid-gray);
-            margin-bottom: 4px;
-        }
-        .color-picker-container {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .color-picker-container input[type="color"] {
-            width: 32px;
-            height: 32px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            background: none;
-            padding: 0;
-        }
-        .color-value {
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            color: var(--anthropic-mid-gray);
-        }
-        /* Buttons */
-        .button {
-            background: var(--anthropic-orange);
-            color: white;
-            border: none;
-            padding: 10px 16px;
-            border-radius: 6px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            width: 100%;
-        }
-        .button:hover {
-            background: #c86641;
-            transform: translateY(-1px);
-        }
-        .button:active {
-            transform: translateY(0);
-        }
-        .button.secondary {
-            background: var(--anthropic-blue);
-        }
-        .button.secondary:hover {
-            background: #5a8bb8;
-        }
-        .button.tertiary {
-            background: var(--anthropic-green);
-        }
-        .button.tertiary:hover {
-            background: #6b7b52;
-        }
-        .button-row {
-            display: flex;
-            gap: 8px;
-        }
-        .button-row .button {
-            flex: 1;
-        }
-        /* Canvas Area */
-        .canvas-area {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 0;
-        }
-        #canvas-container {
-            width: 100%;
-            max-width: 1000px;
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: 0 20px 40px rgba(20, 20, 19, 0.1);
-            background: white;
-        }
-        #canvas-container canvas {
-            display: block;
-            width: 100% !important;
-            height: auto !important;
-        }
-        /* Loading State */
-        .loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            color: var(--anthropic-mid-gray);
-        }
-        /* Responsive - Stack on mobile */
-        @media (max-width: 600px) {
-            .container {
-                flex-direction: column;
-            }
-            .sidebar {
-                width: 100%;
-            }
-            .canvas-area {
-                padding: 20px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- Control Sidebar -->
-        <div class="sidebar">
-            <!-- Headers (CUSTOMIZE THIS FOR YOUR ART) -->
-            <h1>TITLE - EDIT</h1>
-            <div class="subtitle">SUBHEADER - EDIT</div>
-            <!-- Seed Section (ALWAYS KEEP THIS) -->
-            <div class="control-section">
-                <h3>Seed</h3>
-                <input type="number" id="seed-input" class="seed-input" value="12345" onchange="updateSeed()">
-                <div class="seed-controls">
-                    <button class="button secondary" onclick="previousSeed()">← Prev</button>
-                    <button class="button secondary" onclick="nextSeed()">Next →</button>
-                </div>
-                <button class="button tertiary regen-button" onclick="randomSeedAndUpdate()">↻ Random</button>
-            </div>
-            <!-- Parameters Section (CUSTOMIZE THIS FOR YOUR ART) -->
-            <div class="control-section">
-                <h3>Parameters</h3>
-                <!-- Particle Count -->
-                <div class="control-group">
-                    <label>Particle Count</label>
-                    <div class="slider-container">
-                        <input type="range" id="particleCount" min="1000" max="10000" step="500" value="5000" oninput="updateParam('particleCount', this.value)">
-                        <span class="value-display" id="particleCount-value">5000</span>
-                    </div>
-                </div>
-                <!-- Flow Speed -->
-                <div class="control-group">
-                    <label>Flow Speed</label>
-                    <div class="slider-container">
-                        <input type="range" id="flowSpeed" min="0.1" max="2.0" step="0.1" value="0.5" oninput="updateParam('flowSpeed', this.value)">
-                        <span class="value-display" id="flowSpeed-value">0.5</span>
-                    </div>
-                </div>
-                <!-- Noise Scale -->
-                <div class="control-group">
-                    <label>Noise Scale</label>
-                    <div class="slider-container">
-                        <input type="range" id="noiseScale" min="0.001" max="0.02" step="0.001" value="0.005" oninput="updateParam('noiseScale', this.value)">
-                        <span class="value-display" id="noiseScale-value">0.005</span>
-                    </div>
-                </div>
-                <!-- Trail Length -->
-                <div class="control-group">
-                    <label>Trail Length</label>
-                    <div class="slider-container">
-                        <input type="range" id="trailLength" min="2" max="20" step="1" value="8" oninput="updateParam('trailLength', this.value)">
-                        <span class="value-display" id="trailLength-value">8</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Colors Section (OPTIONAL - CUSTOMIZE OR REMOVE) -->
-            <div class="control-section">
-                <h3>Colors</h3>
-                <!-- Color 1 -->
-                <div class="color-group">
-                    <label>Primary Color</label>
-                    <div class="color-picker-container">
-                        <input type="color" id="color1" value="#d97757" onchange="updateColor('color1', this.value)">
-                        <span class="color-value" id="color1-value">#d97757</span>
-                    </div>
-                </div>
-                <!-- Color 2 -->
-                <div class="color-group">
-                    <label>Secondary Color</label>
-                    <div class="color-picker-container">
-                        <input type="color" id="color2" value="#6a9bcc" onchange="updateColor('color2', this.value)">
-                        <span class="color-value" id="color2-value">#6a9bcc</span>
-                    </div>
-                </div>
-                <!-- Color 3 -->
-                <div class="color-group">
-                    <label>Accent Color</label>
-                    <div class="color-picker-container">
-                        <input type="color" id="color3" value="#788c5d" onchange="updateColor('color3', this.value)">
-                        <span class="color-value" id="color3-value">#788c5d</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Actions Section (ALWAYS KEEP THIS) -->
-            <div class="control-section">
-                <h3>Actions</h3>
-                <div class="button-row">
-                    <button class="button" onclick="resetParameters()">Reset</button>
-                </div>
-            </div>
-        </div>
-        <!-- Main Canvas Area -->
-        <div class="canvas-area">
-            <div id="canvas-container">
-                <div class="loading">Initializing generative art...</div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // ═══════════════════════════════════════════════════════════════════════
-        // GENERATIVE ART PARAMETERS - CUSTOMIZE FOR YOUR ALGORITHM
-        // ═══════════════════════════════════════════════════════════════════════
-        let params = {
-            seed: 12345,
-            particleCount: 5000,
-            flowSpeed: 0.5,
-            noiseScale: 0.005,
-            trailLength: 8,
-            colorPalette: ['#d97757', '#6a9bcc', '#788c5d']
-        };
-        let defaultParams = {...params}; // Store defaults for reset
-        // ═══════════════════════════════════════════════════════════════════════
-        // P5.JS GENERATIVE ART ALGORITHM - REPLACE WITH YOUR VISION
-        // ═══════════════════════════════════════════════════════════════════════
-        let particles = [];
-        let flowField = [];
-        let cols, rows;
-        let scl = 10; // Flow field resolution
-        function setup() {
-            let canvas = createCanvas(1200, 1200);
-            canvas.parent('canvas-container');
-            initializeSystem();
-            // Remove loading message
-            document.querySelector('.loading').style.display = 'none';
-        }
-        function initializeSystem() {
-            // Seed the randomness for reproducibility
-            randomSeed(params.seed);
-            noiseSeed(params.seed);
-            // Clear particles and recreate
-            particles = [];
-            // Initialize particles
-            for (let i = 0; i < params.particleCount; i++) {
-                particles.push(new Particle());
-            }
-            // Calculate flow field dimensions
-            cols = floor(width / scl);
-            rows = floor(height / scl);
-            // Generate flow field
-            generateFlowField();
-            // Clear background
-            background(250, 249, 245); // Anthropic light background
-        }
-        function generateFlowField() {
-          // fill this in
-        }
-        function draw() {
-            // fill this in
-        }
-        // ═══════════════════════════════════════════════════════════════════════
-        // PARTICLE SYSTEM - CUSTOMIZE FOR YOUR ALGORITHM
-        // ═══════════════════════════════════════════════════════════════════════
-        class Particle {
-            constructor() {
-                // fill this in
-            }
-            // fill this in
-        }
-        // ═══════════════════════════════════════════════════════════════════════
-        // UI CONTROL HANDLERS - CUSTOMIZE FOR YOUR PARAMETERS
-        // ═══════════════════════════════════════════════════════════════════════
-        function updateParam(paramName, value) {
-            // fill this in
-        }
-        function updateColor(colorId, value) {
-            // fill this in
-        }
-        // ═══════════════════════════════════════════════════════════════════════
-        // SEED CONTROL FUNCTIONS - ALWAYS KEEP THESE
-        // ═══════════════════════════════════════════════════════════════════════
-        function updateSeedDisplay() {
-            document.getElementById('seed-input').value = params.seed;
-        }
-        function updateSeed() {
-            let input = document.getElementById('seed-input');
-            let newSeed = parseInt(input.value);
-            if (newSeed && newSeed > 0) {
-                params.seed = newSeed;
-                initializeSystem();
-            } else {
-                // Reset to current seed if invalid
-                updateSeedDisplay();
-            }
-        }
-        function previousSeed() {
-            params.seed = Math.max(1, params.seed - 1);
-            updateSeedDisplay();
-            initializeSystem();
-        }
-        function nextSeed() {
-            params.seed = params.seed + 1;
-            updateSeedDisplay();
-            initializeSystem();
-        }
-        function randomSeedAndUpdate() {
-            params.seed = Math.floor(Math.random() * 999999) + 1;
-            updateSeedDisplay();
-            initializeSystem();
-        }
-        function resetParameters() {
-            params = {...defaultParams};
-            // Update UI elements
-            document.getElementById('particleCount').value = params.particleCount;
-            document.getElementById('particleCount-value').textContent = params.particleCount;
-            document.getElementById('flowSpeed').value = params.flowSpeed;
-            document.getElementById('flowSpeed-value').textContent = params.flowSpeed;
-            document.getElementById('noiseScale').value = params.noiseScale;
-            document.getElementById('noiseScale-value').textContent = params.noiseScale;
-            document.getElementById('trailLength').value = params.trailLength;
-            document.getElementById('trailLength-value').textContent = params.trailLength;
-            // Reset colors
-            document.getElementById('color1').value = params.colorPalette[0];
-            document.getElementById('color1-value').textContent = params.colorPalette[0];
-            document.getElementById('color2').value = params.colorPalette[1];
-            document.getElementById('color2-value').textContent = params.colorPalette[1];
-            document.getElementById('color3').value = params.colorPalette[2];
-            document.getElementById('color3-value').textContent = params.colorPalette[2];
-            updateSeedDisplay();
-            initializeSystem();
-        }
-        // Initialize UI on load
-        window.addEventListener('load', function() {
-            updateSeedDisplay();
-        });
-    </script>
-</body>
-</html>

package/skills/creative/frontend-design/SKILL-zh.md DELETED Viewed

@@ -1,42 +0,0 @@
----
-name: frontend-design
-description: 创建独特且达到生产级质量的前端界面。当用户要求构建 Web 组件、页面、制品、海报或应用（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或美化任何 Web UI）时使用本技能。生成创意、精致的代码和 UI 设计，避免泛泛的 AI 同质化审美。
-license: 完整条款见 LICENSE.txt
----
-本技能指导创建独特、生产级质量的前端界面，避免泛泛的"AI 同质化"审美。实现真正可运行的代码，在美学细节和创意选择上精益求精。
-用户提供前端需求：一个组件、页面、应用或待构建的界面。他们可能包含关于用途、受众或技术约束的背景信息。
-## 设计思考
-在编码之前，理解上下文并确定一个**大胆的美学方向**：
-- **目的**：这个界面解决什么问题？谁在使用它？
-- **基调**：选择一个极端方向：极致简约、混沌极繁、复古未来、有机/自然、奢华/精致、玩乐/玩具风、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。以上述风格为灵感，但设计出真正符合美学方向的作品。
-- **约束**：技术要求（框架、性能、可访问性）。
-- **差异化**：什么让这个设计**令人难忘**？用户会记住的那一个亮点是什么？
-**关键**：选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都行——关键在于**有意图**，而非强度。
-然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：
-- 达到生产级质量且功能完整
-- 视觉上引人注目且令人难忘
-- 具有凝聚力和清晰的美学视角
-- 每个细节都精心打磨
-## 前端美学指南
-重点关注：
-- **字体排印**：选择美观、独特且有趣的字体。避免 Arial 和 Inter 等通用字体；选择能提升前端美感的个性化字体；出人意料、富有特色的字体选择。将独特的展示字体与精致的正文字体搭配使用。
-- **色彩与主题**：坚持有凝聚力的美学风格。使用 CSS 变量保持一致性。主色鲜明、点缀色锐利的方案优于平淡、平均分布的颜色组合。
-- **动效**：使用动画营造效果和微交互。HTML 优先使用纯 CSS 方案。React 项目中使用 Motion 库（如可用）。聚焦高光时刻：一个精心编排的页面加载配合交错揭示（通过 `animation-delay`）比零散的微交互能带来更多愉悦感。使用滚动触发和令人惊喜的悬停状态。
-- **空间构图**：出人意料的布局。不对称。重叠。对角线流。打破网格的元素。慷慨的留白或有控制的密集排布。
-- **背景与视觉细节**：营造氛围和深度，而不是默认使用纯色。添加上下文相关的效果和纹理以配合整体美学。运用渐变网格、噪点纹理、几何图案、层次化透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加等创意形式。
-**永远不要**使用通用的 AI 生成式审美，例如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的色彩方案（特别是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏上下文特征的标准设计。
-发挥创造性，做出出人意料的选择，让每个设计都感觉是为特定上下文而精心设计的。没有两个设计应该相同。在浅色和深色主题、不同字体、不同美学风格之间变化。**永远不要**在不同生成之间趋同于常见选择（例如 Space Grotesk）。
-**重要**：实现复杂度需与美学愿景匹配。极繁主义设计需要包含大量动画和效果的精细代码。极简或精致的设计需要克制、精确，以及对间距、字体排印和微妙细节的仔细关注。优雅来自对愿景的完美执行。
-记住：Claude 有能力完成非凡的创意工作。不要有所保留，展示当跳出框架思考并全身心投入独特愿景时，真正能够创造出什么。