cokit-cli 1.0.8 → 1.2.0

package/templates/repo/.github/skills/ck-docs-seeker/scripts/utils/env-loader.js

@@ -1,94 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Environment variable loader for docs-seeker skill
- * Respects order: process.env > skill/.env > skills/.env > %USERPROFILE%/.claude/.env
- */
-
-const fs = require('fs');
-const path = require('path');
-
-/**
- * Parse .env file content into key-value pairs
- * @param {string} content - .env file content
- * @returns {Object} Parsed environment variables
- */
-function parseEnvFile(content) {
-  const env = {};
-  const lines = content.split('\n');
-
-  for (const line of lines) {
-    // Skip comments and empty lines
-    if (!line || line.trim().startsWith('#')) continue;
-
-    const match = line.match(/^\s*([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*)$/);
-    if (match) {
-      const key = match[1];
-      let value = match[2].trim();
-
-      // Remove quotes if present
-      if ((value.startsWith('"') && value.endsWith('"')) ||
-          (value.startsWith("'") && value.endsWith("'"))) {
-        value = value.slice(1, -1);
-      }
-
-      env[key] = value;
-    }
-  }
-
-  return env;
-}
-
-/**
- * Load environment variables from .env files in priority order
- * Priority: process.env > skill/.env > skills/.env > %USERPROFILE%/.claude/.env
- * @returns {Object} Merged environment variables
- */
-function loadEnv() {
-  const skillDir = path.resolve(__dirname, '../..');
-  const skillsDir = path.resolve(skillDir, '..');
-  const claudeDir = path.resolve(skillsDir, '..');
-
-  const envPaths = [
-    path.join(claudeDir, '.env'),      // Lowest priority
-    path.join(skillsDir, '.env'),
-    path.join(skillDir, '.env'),       // Highest priority (file)
-  ];
-
-  let mergedEnv = {};
-
-  // Load .env files in order (lowest to highest priority)
-  for (const envPath of envPaths) {
-    if (fs.existsSync(envPath)) {
-      try {
-        const content = fs.readFileSync(envPath, 'utf8');
-        const parsed = parseEnvFile(content);
-        mergedEnv = { ...mergedEnv, ...parsed };
-      } catch (error) {
-        // Silently skip unreadable files
-      }
-    }
-  }
-
-  // process.env has highest priority
-  mergedEnv = { ...mergedEnv, ...process.env };
-
-  return mergedEnv;
-}
-
-/**
- * Get environment variable with fallback
- * @param {string} key - Environment variable key
- * @param {string} defaultValue - Default value if not found
- * @returns {string} Environment variable value
- */
-function getEnv(key, defaultValue = '') {
-  const env = loadEnv();
-  return env[key] || defaultValue;
-}
-
-module.exports = {
-  loadEnv,
-  getEnv,
-  parseEnvFile,
-};

package/templates/repo/.github/skills/ck-docs-seeker/workflows/library-search.md

@@ -1,87 +0,0 @@
-# General Library Documentation Search
-
-**Use when:** User asks about entire library/framework
-
-**Speed:** ⚡⚡ Moderate (30-60s)
-**Token usage:** 🟡 Medium
-**Accuracy:** 📚 Comprehensive
-
-## Trigger Patterns
-
-- "Documentation for [LIBRARY]"
-- "[LIBRARY] getting started"
-- "How to use [LIBRARY]"
-- "[LIBRARY] API reference"
-
-## Workflow (Script-First)
-
-```bash
-# STEP 1: Execute detect-topic.js script
-node scripts/detect-topic.js "<user query>"
-# Returns: {"isTopicSpecific": false} for general queries
-
-# STEP 2: Execute fetch-docs.js script (handles URL construction)
-node scripts/fetch-docs.js "<user query>"
-# Script constructs context7.com URL automatically
-# Script handles GitHub/website URL patterns
-# Returns: llms.txt content with 5-20+ URLs
-
-# STEP 3: Execute analyze-llms-txt.js script
-cat llms.txt | node scripts/analyze-llms-txt.js -
-# Groups URLs: critical, important, supplementary
-# Recommends: agent distribution strategy
-# Returns: {totalUrls, grouped, distribution}
-
-# STEP 4: Deploy agents based on script recommendation
-# - 1-3 URLs: Single agent or direct WebFetch
-# - 4-10 URLs: Deploy 3-5 Explorer agents
-# - 11+ URLs: Deploy 7 agents or phased approach
-
-# STEP 5: Aggregate and present
-# Synthesize findings: installation, concepts, API, examples
-```
-
-## Examples
-
-**Astro framework:**
-```bash
-# Execute scripts (no manual URL construction)
-node scripts/detect-topic.js "Documentation for Astro"
-# {"isTopicSpecific": false}
-
-node scripts/fetch-docs.js "Documentation for Astro"
-# Script fetches: context7.com/withastro/astro/llms.txt
-# Returns: llms.txt with 8 URLs
-
-node scripts/analyze-llms-txt.js < llms.txt
-# {totalUrls: 8, distribution: "3-agents", grouped: {...}}
-
-# Deploy 3 Explorer agents as recommended:
-# Agent 1: Getting started, installation, setup
-# Agent 2: Core concepts, components, layouts
-# Agent 3: Configuration, API reference
-
-# Aggregate and present comprehensive report
-```
-
-## Agent Distribution
-
-**1-3 URLs:** Single agent
-**4-10 URLs:** 3-5 agents (2-3 URLs each)
-**11-20 URLs:** 7 agents (balanced)
-**21+ URLs:** Two-phase (critical first, then important)
-
-## Known Libraries
-
-- Next.js: `vercel/next.js`
-- Astro: `withastro/astro`
-- Remix: `remix-run/remix`
-- shadcn/ui: `shadcn-ui/ui`
-- Better Auth: `better-auth/better-auth`
-
-## Fallback
-
-Scripts handle fallback automatically:
-1. `fetch-docs.js` tries context7.com
-2. If 404, script suggests WebSearch for llms.txt
-3. If still unavailable: [Repository Analysis](./repo-analysis.md)

package/templates/repo/.github/skills/ck-frontend-design/SKILL.md

@@ -1,79 +0,0 @@
----
-name: 'ck-frontend-design'
-description: 'Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications, OR when provided screenshots/images/designs to replicate. Extracts design guidelines from screenshots, implements code following guidelines. Generates creative, polished code avoiding generic AI aesthetics.'
----
-
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
-
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
-
-## Input Types & Workflows
-
-### When User Provides Screenshot/Image/Design Reference
-
-**MANDATORY workflow for screenshot/image/design inputs**:
-
-1. **Extract Design Guidelines** using `./references/design-extraction-overview.md`:
-   - Analyze screenshot/image visually
-   - Extract: colors (hex codes), typography (fonts, sizes, weights), spacing scale, layout patterns, visual hierarchy
-   - Document findings in project `docs/design-guidelines/extracted-design.md`
-   - See `./references/extraction-prompts.md` for comprehensive analysis prompts
-
-2. **Implement Code** following extracted guidelines:
-   - Use exact colors from extraction (hex codes)
-   - Match typography specifications (fonts, sizes, weights, line-heights)
-   - Replicate layout structure and spacing system
-   - Maintain visual hierarchy and component patterns
-   - Preserve aesthetic direction and mood
-
-3. **Verify Quality** using `./references/visual-analysis-overview.md`:
-   - Compare implementation to original screenshot
-   - Check color accuracy, spacing consistency, typography matching
-   - Ensure all design elements preserved
-
-**Important**: Do NOT skip to implementation. Extract design guidelines FIRST, then code.
-
-### When Building from Scratch (No Screenshot Provided)
-
-Follow "Design Thinking" process below to create original design.
-
-## Design Thinking
-
-Before coding, understand the context and commit to a BOLD aesthetic direction:
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
-
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
-
-## Frontend Aesthetics Guidelines
-
-Focus on:
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available (Use `anime.js` for animations: `./references/animejs.md`). Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
-
-### Analyzing Provided Screenshots/Images/Designs
-When user provides screenshots, photos, or design references to analyze or replicate, use `./references/design-extraction-overview.md` to extract design guidelines BEFORE implementation. This is MANDATORY for screenshot inputs (see "Input Types & Workflows" above).
-
-**Workflows**:
-- `./references/design-extraction-overview.md` - Extract guidelines from inspiration
-- `./references/visual-analysis-overview.md` - Analyze and verify quality
-- `./references/technical-overview.md` - Optimization and best practices
-
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
-
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
-
-Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/templates/repo/.github/skills/ck-frontend-design/references/animejs.md

@@ -1,396 +0,0 @@
-# Anime.js v4 Reference Guide for AI Assistants
-
-## 🚨 CRITICAL: ALWAYS USE ANIME.JS V4 SYNTAX 🚨
-
-**This project uses Anime.js v4.x.x - DO NOT use v3 syntax under any circumstances**
-
-**If you're about to write `import anime from 'animejs'` - STOP!**
-**That's v3. This project uses v4. Use the correct import below.**
-
-## 🚀 Quick Start - Essential Setup
-
-### 1. Correct v4 Import (REQUIRED)
-```javascript
-// ✅ CORRECT v4 imports
-import { animate, createTimeline, stagger, utils, svg, eases, engine } from 'animejs';
-
-// ❌ WRONG v3 import - NEVER USE THIS
-// import anime from 'animejs';
-```
-
-### 2. Configure Time Units to Seconds (SET ONCE IN APP ENTRY POINT)
-```javascript
-// ⚠️ IMPORTANT: Set this ONLY ONCE in your app's main entry point
-// For React: App.js/App.tsx or index.js/index.tsx
-// For Vue: main.js/main.ts
-// For vanilla JS: The main script file that loads first
-
-import { engine } from 'animejs';
-
-// Set ONLY in the app's entry point, NOT in components
-engine.timeUnit = 's';
-
-// Now ALL durations use seconds everywhere: 1 = 1 second, 0.5 = 500ms
-// DO NOT set this in individual components - it's a global setting!
-```
-
-### 3. Single-Line Format for Simple Animations (REQUIRED)
-```javascript
-// ✅ GOOD - Clean, readable, one line for simple tweens
-animate('.element', { x: 250, duration: 1, ease: 'outQuad' });
-
-// ❌ BAD - Unnecessary multi-line for simple tweens
-animate('.element', {
-  x: 250,
-  duration: 1,
-  ease: 'outQuad'
-});
-```
-
-## ✅ Quick Validation Checklist
-
-Before generating anime.js code, verify:
-- [ ] Using `import { animate, ... } from 'animejs'` NOT `import anime`
-- [ ] Set `engine.timeUnit = 's'` ONLY ONCE in app entry point (NOT in components)
-- [ ] Using seconds for all durations (1 = 1 second)
-- [ ] Simple animations on ONE LINE
-- [ ] Using `animate()` NOT `anime()`
-- [ ] Using `createTimeline()` NOT `anime.timeline()`
-- [ ] Using `ease:` NOT `easing:`
-- [ ] Using `to:` for values, NOT `value:`
-- [ ] Using `on` prefix for callbacks (onUpdate, onComplete)
-- [ ] Using `loop` and `alternate` NOT `direction`
-- [ ] Using correct v4 stagger syntax with `stagger()`
-- [ ] Using shorthand properties (x, y, z) when possible
-
-## 🎯 Core API - Most Common Patterns
-
-### Basic Animation (single line for simple tweens)
-```javascript
-// Simple tween - ALWAYS one line
-animate('.element', { x: 250, rotate: 180, duration: 0.8, ease: 'inOutQuad' });
-
-// Fade in - one line
-animate('.element', { opacity: [0, 1], y: [20, 0], duration: 0.6, ease: 'outQuad' });
-
-// Scale bounce - one line
-animate('.element', { scale: [0, 1], duration: 0.8, ease: 'outElastic(1, 0.5)' });
-
-// Infinite loop - one line
-animate('.element', { rotate: 360, duration: 2, loop: true, ease: 'linear' });
-```
-
-### Timeline Creation
-```javascript
-const tl = createTimeline({ defaults: { duration: 1, ease: 'outQuad' } });
-
-tl.add('.element1', { x: 250 })
-  .add('.element2', { y: 100 }, '+=0.2')  // 0.2s after previous
-  .add('.element3', { rotate: 180 }, '<'); // at start of previous
-```
-
-### Stagger Animations (single line)
-```javascript
-animate('.elements', { x: 250, delay: stagger(0.1) });  // 0.1s between each
-animate('.elements', { x: 250, delay: stagger(0.1, { from: 'center' }) });
-```
-
-## ❌ Common AI Mistakes to Avoid
-
-### MISTAKE #1: Using v3 Import Pattern
-```javascript
-// ❌ WRONG - This is v3
-import anime from 'animejs';
-anime({ targets: '.element', translateX: 250 });
-
-// ✅ CORRECT - Always use v4
-import { animate } from 'animejs';
-animate('.element', { x: 250 });
-```
-
-### MISTAKE #2: Using 'targets' Property
-```javascript
-// ❌ WRONG - 'targets' is v3
-animate({ targets: '.element', translateX: 250 });
-
-// ✅ CORRECT - First parameter is the target
-animate('.element', { x: 250 });
-```
-
-### MISTAKE #3: Using 'easing' Instead of 'ease'
-```javascript
-// ❌ WRONG
-animate('.element', { x: 250, easing: 'easeInOutQuad' });
-
-// ✅ CORRECT
-animate('.element', { x: 250, ease: 'inOutQuad' });
-```
-
-### MISTAKE #4: Using 'value' for Animation Values
-```javascript
-// ❌ WRONG - 'value' is v3
-animate('.element', { x: { value: 250 } });
-
-// ✅ CORRECT - Use 'to' for values
-animate('.element', { x: { to: 250 } });
-```
-
-### MISTAKE #5: Wrong Timeline Syntax
-```javascript
-// ❌ WRONG - anime.timeline() is v3
-const tl = anime.timeline();
-
-// ✅ CORRECT - Use createTimeline
-import { createTimeline } from 'animejs';
-const tl = createTimeline();
-```
-
-## 📋 Property Syntax Reference (v3 → v4)
-
-### Animation Values
-```javascript
-// ✅ v4: Use 'to' for target values
-{ opacity: { to: 0.5 } }
-{ x: { to: [0, 100] } }
-
-// ❌ v3: DON'T use 'value'
-// { opacity: { value: 0.5 } }
-```
-
-### Easing Functions
-```javascript
-// ✅ v4: Use 'ease' (no 'ease' prefix)
-{ ease: 'inOutQuad' }
-{ ease: 'outElastic(1, 0.5)' }
-{ ease: 'cubicBezier(0.4, 0, 0.2, 1)' }
-
-// ❌ v3: DON'T use 'easing' or 'ease' prefix
-// { easing: 'easeInOutQuad' }
-```
-
-### Direction & Looping
-```javascript
-// ✅ v4
-{
-  loop: true,        // infinite loop
-  loop: 3,          // loop 3 times
-  alternate: true,   // alternate direction
-  reversed: true     // play in reverse
-}
-
-// ❌ v3: DON'T use 'direction'
-// { direction: 'alternate' }
-```
-
-### Transform Properties (Shorthand Preferred)
-```javascript
-// ✅ Both syntaxes work in v4:
-animate('.element', { x: 100, y: 50, z: 25 });           // shorthand (preferred)
-animate('.element', { translateX: 100, translateY: 50, translateZ: 25 }); // explicit
-```
-
-### Callbacks (ALL prefixed with 'on')
-```javascript
-// ✅ v4: Simple callback - keep on one line
-animate('.element', { x: 250, duration: 1, onComplete: () => console.log('Done!') });
-
-// ✅ v4: Multiple callbacks - use multi-line
-animate('.element', {
-  x: 250,
-  duration: 1,
-  onBegin: (anim) => console.log('Started'),
-  onUpdate: (anim) => console.log('Progress:', anim.progress),
-  onComplete: (anim) => console.log('Finished')
-});
-
-// ❌ v3: DON'T use unprefixed callbacks
-// { update: () => {}, complete: () => {} }
-```
-
-## 📝 Code Formatting Guidelines
-
-### ALWAYS Use Single-Line Format for Simple Animations
-**This is mandatory for readability** - Use for animations with ≤4 properties:
-```javascript
-// ✅ GOOD - Clean, readable, one line
-animate('.element', { x: 250, duration: 1, ease: 'outQuad' });
-animate('.box', { opacity: 0.5, scale: 0.8, duration: 0.3 });
-
-// ❌ BAD - Unnecessary multi-line for simple tweens
-animate('.element', {
-  x: 250,
-  duration: 1,
-  ease: 'outQuad'
-});
-```
-
-### Multi-Line Format (Only for Complex Animations)
-Use for animations with >4 properties or callbacks:
-```javascript
-// Complex animation with callbacks - multi-line is appropriate
-animate('.element', {
-  x: { to: [0, 100, 50], duration: 2 },
-  y: { to: [0, -50, 0], duration: 2 },
-  scale: [0, 1.2, 1],
-  ease: 'outElastic(1, 0.5)',
-  onComplete: () => console.log('Done!')
-});
-```
-
-## 🎨 Common Animation Patterns
-
-### Hover Animation (single line per animation)
-```javascript
-element.addEventListener('mouseenter', () => animate(element, { scale: 1.1, duration: 0.3, ease: 'outQuad' }));
-element.addEventListener('mouseleave', () => animate(element, { scale: 1, duration: 0.3, ease: 'outQuad' }));
-```
-
-### Sequential Timeline
-```javascript
-const tl = createTimeline({ defaults: { duration: 0.5 } });
-tl.add('.step1', { x: 100 })
-  .add('.step2', { y: 100 })
-  .add('.step3', { scale: 2 });
-```
-
-### Scroll-triggered Animation
-```javascript
-import { createScrollObserver } from 'animejs';
-
-createScrollObserver({
-  target: '.scroll-element',
-  root: document.querySelector('.scroll-container'),
-  play: () => animate('.element', { x: 250, duration: 1 }),
-  visibility: 0.5
-});
-```
-
-## 🔧 Advanced Features
-
-### SVG Animations
-```javascript
-import { animate, svg } from 'animejs';
-
-// Morph path (single line)
-animate('#path1', { d: svg.morphTo('#path2'), duration: 1 });
-
-// Draw SVG line
-const drawable = svg.createDrawable('.svg-path');
-animate(drawable, { draw: '0% 100%', duration: 2 });
-
-// Motion path (single line for simple usage)
-const motionPath = svg.createMotionPath('#motion-path');
-animate('.element', { x: motionPath.translateX, y: motionPath.translateY, rotate: motionPath.rotate });
-```
-
-### Utility Functions
-```javascript
-import { utils } from 'animejs';
-
-// DOM selection
-const elements = utils.$('.elements');
-
-// Get current value
-const currentX = utils.get('.element', 'translateX');
-
-// Set values immediately
-utils.set('.element', { x: 100, opacity: 0.5 });
-
-// Remove animations
-utils.remove('.element');
-
-// Math utilities
-utils.random(0, 100);
-utils.shuffle([1, 2, 3, 4]);
-utils.lerp(0, 100, 0.5); // 50
-utils.clamp(150, 0, 100); // 100
-```
-
-### TypeScript Support
-```typescript
-import { animate, createTimeline, JSAnimation, Timeline, AnimationParams, TimelineParams } from 'animejs';
-
-// Single line for simple animations
-const animation: JSAnimation = animate('.element', { x: 250, duration: 1 } as AnimationParams);
-
-const timeline: Timeline = createTimeline({ defaults: { duration: 0.8 } } as TimelineParams);
-```
-
-## ⚡ Performance Tips
-
-1. **Use transforms over position properties**
-   ```javascript
-   // ✅ Good - uses transform
-   animate('.element', { x: 100 });
-   
-   // ❌ Avoid - triggers layout
-   animate('.element', { left: 100 });
-   ```
-
-2. **Batch animations in timelines**
-   ```javascript
-   // ✅ Good - single timeline
-   const tl = createTimeline();
-   elements.forEach(el => tl.add(el, { x: 100 }));
-   
-   // ❌ Avoid - multiple animations
-   elements.forEach(el => animate(el, { x: 100 }));
-   ```
-
-3. **Use will-change CSS property for complex animations**
-   ```css
-   .animated-element {
-     will-change: transform, opacity;
-   }
-   ```
-
-## 🚫 How to Identify V3 Code (DON'T USE)
-
-If you see ANY of these patterns, it's v3 and MUST be updated:
-
-```javascript
-// All of these are V3 - NEVER USE:
-anime({ ... })
-anime.timeline()
-anime.stagger()
-anime.random()
-anime.remove()
-anime.get()
-anime.set()
-anime.running
-{ targets: '...' }
-{ easing: '...' }
-{ value: ... }
-{ direction: 'alternate' }
-```
-
-## 💡 AI Code Generation Rules
-
-When asked to create animations with anime.js:
-
-1. **ONLY** set `engine.timeUnit = 's'` ONCE in the app's main entry point (App.js, main.js, index.js) - NEVER in components
-2. **ALWAYS** use seconds for all durations (1 = 1 second)
-3. **ALWAYS** format simple animations on ONE LINE
-4. **ALWAYS** start with v4 imports
-5. **NEVER** use `anime()` function
-6. **ALWAYS** use `animate()` for animations
-7. **NEVER** include `targets` property
-8. **ALWAYS** use `ease` not `easing`
-9. **NEVER** use `value`, use `to` instead
-10. **ALWAYS** prefix callbacks with `on`
-11. **NEVER** use `direction`, use `alternate` and `reversed`
-12. **ALWAYS** use `createTimeline()` for timelines
-13. **PREFER** shorthand (`x`) over explicit (`translateX`)
-14. **FORMAT** short animations on single line (≤4 properties)
-15. **NEVER** generate v3 syntax under any circumstances
-
-## NPM Installation
-```bash
-npm install animejs
-```
-
-## Version Check
-```javascript
-// Current version: 4.x.x
-// If you see any code using anime({ targets: ... }), it's v3 and needs updating!
-```