claudify-agent 0.0.0-stage → 1.0.0

package/.claude/skills/vite-guide/SKILL.md

@@ -0,0 +1,445 @@
+---
+name: vite-guide
+description: Optimize Vite projects for maximum performance. Use when configuring Vite, improving dev server speed, optimizing builds, or when the user mentions Vite, vite.config, build performance, or HMR issues.
+---
+
+# Vite Best Practices
+
+## Quick Start
+
+When working with Vite projects:
+
+1. **Check configuration** - Review vite.config.js for performance issues
+2. **Audit plugins** - Identify slow plugins or heavy operations
+3. **Optimize imports** - Remove barrel files, use explicit extensions
+4. **Configure warmup** - Pre-transform frequently used files
+5. **Profile if slow** - Use `vite --profile` to identify bottlenecks
+
+## Configuration Fundamentals
+
+### Use defineConfig
+
+Always use the `defineConfig` helper for TypeScript intelligence:
+
+```javascript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+export default defineConfig({
+  plugins: [react()],
+  // ... config options
+})
+```
+
+### Plugin Selection
+
+**Preferred**: Use `@vitejs/plugin-react-swc` instead of `@vitejs/plugin-react` for 6-8x faster HMR.
+
+```javascript
+// ✅ Good - SWC-based (fast)
+import react from '@vitejs/plugin-react-swc'
+
+// ❌ Avoid - Babel-based (slower)
+import react from '@vitejs/plugin-react'
+```
+
+## Performance Optimization
+
+### Development Server Speed
+
+#### 1. Replace Babel with SWC
+
+Switch to SWC for dramatically faster transformations:
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+export default defineConfig({
+  plugins: [react()],
+})
+```
+
+**Impact**: Reduces HMR transformation from 3-4s to <500ms.
+
+#### 2. Avoid Barrel Files
+
+Barrel files force Vite to process thousands of modules unnecessarily.
+
+```javascript
+// ❌ Bad - Barrel file import
+import { slash, formatDate, debounce } from './utils'
+
+// ✅ Good - Direct imports
+import { slash } from './utils/slash.js'
+import { formatDate } from './utils/formatDate.js'
+import { debounce } from './utils/debounce.js'
+```
+
+**Why**: Barrel files (index.js re-exporting everything) require loading all files even when you need one function.
+
+#### 3. Use Explicit Import Extensions
+
+Enable TypeScript bundler module resolution and use explicit extensions:
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true
+  }
+}
+```
+
+```typescript
+// ✅ Good - Explicit extension
+import { Component } from './Component.jsx'
+
+// ❌ Avoid - Implicit extension (requires 6+ filesystem checks)
+import { Component } from './Component'
+```
+
+#### 4. Configure File Warmup
+
+Pre-transform frequently used files to avoid request waterfalls:
+
+```javascript
+// vite.config.js
+export default defineConfig({
+  server: {
+    warmup: {
+      clientFiles: [
+        './src/main.jsx',
+        './src/App.jsx',
+        './src/components/BigComponent.jsx',
+        './src/utils/big-utils.js',
+      ],
+    },
+  },
+})
+```
+
+**How to find files to warmup**: Run `vite --debug transform` and look for files with >100ms transform time.
+
+#### 5. Optimize Dependency Pre-bundling
+
+Control which dependencies are pre-bundled:
+
+```javascript
+// vite.config.js
+export default defineConfig({
+  optimizeDeps: {
+    include: ['lodash-es', 'axios'], // Force pre-bundling
+    exclude: ['@custom/large-lib'], // Skip pre-bundling
+    entries: ['./src/**/*.jsx'], // Custom entry points
+  },
+})
+```
+
+### Build Optimization
+
+#### 1. Manual Chunking
+
+Avoid single large bundle by implementing manual chunks:
+
+```javascript
+// vite.config.js
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          utils: ['lodash-es', 'dayjs'],
+        },
+      },
+    },
+  },
+})
+```
+
+#### 2. CSS Optimization
+
+Use native tooling when possible:
+
+```javascript
+// vite.config.js
+export default defineConfig({
+  css: {
+    transformer: 'lightningcss', // Experimental but faster
+    lightningcssOptions: {
+      minify: true,
+    },
+  },
+})
+```
+
+**Alternative**: Stick with PostCSS for better compatibility.
+
+#### 3. Asset Handling
+
+**Preferred**: Import SVGs as URLs, not components:
+
+```javascript
+// ✅ Good - URL import
+import logo from './logo.svg'
+<img src={logo} alt="Logo" />
+
+// ❌ Avoid - SVG as component (slower)
+import { ReactComponent as Logo } from './logo.svg'
+<Logo />
+```
+
+## Plugin Audit Practices
+
+### Slow Plugin Detection
+
+Identify slow plugins using debug mode:
+
+```bash
+# See transform times
+vite --debug plugin-transform
+
+# Profile entire build
+vite --profile
+# Press 'p + enter' to generate .cpuprofile
+```
+
+### Plugin Best Practices
+
+When evaluating community plugins:
+
+1. **Check hooks**: Avoid plugins with heavy `buildStart`, `config`, or `configResolved` hooks
+2. **Dynamic imports**: Large dependencies should be dynamically imported
+3. **Conditional transforms**: Plugins should check file extensions before transforming
+
+**Example optimization** (for plugin authors):
+
+```javascript
+// ✅ Good - Check before transform
+transform(code, id) {
+  if (!id.endsWith('.jsx')) return null
+  if (!code.includes('useState')) return null
+  // ... transformation
+}
+
+// ❌ Bad - Always transform
+transform(code, id) {
+  // ... heavy transformation
+}
+```
+
+## Common Performance Issues
+
+### Issue 1: Slow Dev Server Start
+
+**Symptoms**: Server takes >5s to start.
+
+**Fixes**:
+1. Check for plugins with heavy `config` hooks
+2. Reduce `optimizeDeps.include` to essentials only
+3. Use `@vitejs/plugin-react-swc` instead of Babel
+4. Run `vite --profile` to identify bottlenecks
+
+### Issue 2: Slow HMR Updates
+
+**Symptoms**: Changes take >1s to reflect in browser.
+
+**Fixes**:
+1. Remove barrel file imports
+2. Disable "Disable Cache" in Chrome DevTools Network tab
+3. Check browser extensions (test in incognito mode)
+4. Warm up frequently changed files
+
+### Issue 3: Large Production Bundles
+
+**Symptoms**: Main chunk >500KB gzipped.
+
+**Fixes**:
+1. Implement manual chunking
+2. Check for accidentally bundled node_modules
+3. Use dynamic imports for heavy components
+4. Analyze bundle with `npm run build -- --sourcemap`
+
+### Issue 4: Slow Full Page Reloads
+
+**Symptoms**: Full reload takes >3s.
+
+**Fixes**:
+1. Ensure browser cache is enabled (not disabled in DevTools)
+2. Reduce number of transformed files
+3. Avoid transforming SVGs to components
+4. Use CSS instead of Sass/Less when possible
+
+## Profiling and Debugging
+
+### Debug Commands
+
+```bash
+# Profile startup and transformations
+vite --profile
+
+# See detailed transform timings
+vite --debug plugin-transform
+
+# Debug resolve operations
+vite --debug resolve
+
+# Check transform cache
+vite --debug transform
+```
+
+### Analyzing CPU Profiles
+
+1. Run `vite --profile`
+2. Use the app normally
+3. Press `p + enter` in terminal
+4. Open `.cpuprofile` in [speedscope.app](https://www.speedscope.app/)
+5. Look for:
+   - Long-running hooks (`buildStart`, `config`)
+   - Slow transformations (>100ms)
+   - Excessive resolve operations
+
+### Performance Checklist
+
+Before considering a Vite project optimized:
+
+- [ ] Using `@vitejs/plugin-react-swc` (for React projects)
+- [ ] No barrel file imports in critical path
+- [ ] Explicit import extensions enabled
+- [ ] Frequently used files warmed up
+- [ ] Browser cache enabled in DevTools
+- [ ] Manual chunking configured for build
+- [ ] No heavy operations in plugin hooks
+- [ ] Profiled with `vite --profile` (no major bottlenecks)
+
+## Commands
+
+**Profile Vite**: Run profiling to identify performance issues
+**Optimize config**: Review and optimize vite.config.js
+**Fix HMR**: Diagnose and fix slow HMR updates
+**Audit plugins**: Check for slow community plugins
+
+## Examples
+
+### Example 1: Optimized vite.config.js
+
+```javascript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { visualizer } from 'rollup-plugin-visualizer'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    visualizer({ open: true }), // Analyze bundle
+  ],
+  
+  server: {
+    warmup: {
+      clientFiles: [
+        './src/main.jsx',
+        './src/App.jsx',
+      ],
+    },
+  },
+  
+  optimizeDeps: {
+    include: ['lodash-es', 'axios'],
+  },
+  
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          utils: ['lodash-es', 'dayjs'],
+        },
+      },
+    },
+  },
+})
+```
+
+### Example 2: Fixing Barrel File Imports
+
+**Before** (slow):
+
+```javascript
+// src/App.jsx
+import { Button, Input, Modal } from './components'
+import { formatDate, validateEmail } from './utils'
+```
+
+**After** (fast):
+
+```javascript
+// src/App.jsx
+import { Button } from './components/Button.jsx'
+import { Input } from './components/Input.jsx'
+import { Modal } from './components/Modal.jsx'
+import { formatDate } from './utils/formatDate.js'
+import { validateEmail } from './utils/validateEmail.js'
+```
+
+### Example 3: Diagnosing Slow HMR
+
+**User**: "My HMR is taking 3-4 seconds to update"
+
+**Agent Response**:
+"I'll diagnose the slow HMR issue. Let me check:
+
+1. **Browser setup**: Is 'Disable Cache' checked in DevTools?
+   - Fix: Uncheck it in Network tab
+
+2. **Plugin audit**: Running `vite --debug plugin-transform`
+   - Looking for transforms >100ms
+
+3. **Import patterns**: Checking for barrel files
+   - Found: `import { X } from './utils'` in 5 files
+   - Fix: Use direct imports
+
+4. **Plugin choice**: Using `@vitejs/plugin-react`?
+   - Fix: Switch to `@vitejs/plugin-react-swc`
+
+Let me start by checking your vite.config.js and running a profile..."
+
+## Additional Resources
+
+- [Vite Performance Guide](https://vitejs.dev/guide/performance/)
+- [Vite Config Reference](https://vitejs.dev/config/)
+- [speedscope.app](https://www.speedscope.app/) - CPU profile viewer
+- [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) - Bundle analyzer
+
+## Anti-Patterns to Avoid
+
+### 1. Windows-Style Paths
+- ✅ Use: `./src/components/Button.jsx`
+- ❌ Avoid: `.\src\components\Button.jsx`
+
+### 2. Too Many Warmup Files
+```javascript
+// ❌ Bad - Overloads dev server
+warmup: {
+  clientFiles: ['./src/**/*'] // All files!
+}
+
+// ✅ Good - Only critical files
+warmup: {
+  clientFiles: [
+    './src/main.jsx',
+    './src/App.jsx',
+  ]
+}
+```
+
+### 3. Time-Sensitive Configuration
+```javascript
+// ❌ Bad - Will become outdated
+// "Use Vite 5.0 features before 2026"
+
+// ✅ Good - Use current stable features
+// Use manualChunks for code splitting
+```

package/CLAUDE.md

@@ -0,0 +1,49 @@
+# CLAUDE CORE OPERATING SYSTEM
+
+> **Universal Directive:** You are an autonomous Senior Software Engineer operating via Claude Code / Anthropic Agent loop. Follow these concise, modular instructions. Do not load all guidelines into context; inspect modular files on-demand using `@path` mentions.
+
+---
+
+## 1. 🛑 Context & Token Preservation (Sub-20 Line Core)
+- Keep responses concise and targeted. Never dump entire files when diffs suffice.
+- Do NOT read whole directory trees. Inspect shallow structure first.
+- Context Tiers (Inspect when prompted):
+  - **Tier 1 (Base):** @.claude/rules/context-tier-1.md
+  - **Tier 2 (Deep Task):** @.claude/rules/context-tier-2.md
+  - **Anti-Patterns:** @.claude/rules/anti-patterns.md
+
+## 2. 📋 Plan First Protocol (Anti-Drift)
+- For tasks touching **>= 2 files** or core architecture:
+  - Generate a concise Plan before modifying files.
+  - Research protocol: @.claude/rules/plan-mode-research.md
+  - Execution checklist: @.claude/rules/plan-mode-execution.md
+  - Validation steps: @.claude/rules/plan-mode-validation.md
+  - Plan structure guide: @.claude/rules/plan-mode-structure.md
+
+## 3. 🧪 Zero-Token Local Verification Loop
+After modifying code, execute local verification based on project stack:
+- **Node/TS/NestJS:** `npm run lint:fix && npm run typecheck`
+- **Go Backend:** `go vet ./... && go test -race ./...`
+- **Solidity (SMC):** `forge test -vvv` hoặc `npx hardhat test`
+- Core standards: @.claude/rules/general.md & @.claude/rules/security-critical.md
+
+## 4. 📚 On-Demand Skills Index (Load ONLY When Tech Is Used)
+- **Backend Concurrency & Locking:** @.claude/skills/backend-concurrency/SKILL.md
+- **NestJS Enterprise:** @.claude/skills/nestjs-guide/SKILL.md
+- **Golang Backend:** @.claude/skills/golang-guide/SKILL.md
+- **Solidity (Smart Contracts):** @.claude/skills/solidity-guide/SKILL.md
+- **Next.js:** @.claude/skills/nextjs-guide/SKILL.md
+- **React:** @.claude/skills/react-guide/SKILL.md
+- **Python:** @.claude/skills/python-guide/SKILL.md
+- **Vite:** @.claude/skills/vite-guide/SKILL.md
+- **MCP Mastery:** @.claude/skills/mcp-mastery/SKILL.md
+- **Tool Selection:** @.claude/skills/tool-selection/SKILL.md
+- **Debug Optimizer:** @.claude/skills/debug-optimizer/SKILL.md
+- **Parallel Exploration:** @.claude/skills/parallel-exploration/SKILL.md
+- **Learning Loop:** @.claude/skills/learning-loop/SKILL.md
+
+## 5. 🔌 Tool & MCP Strategy
+- Auto Tool Selection: @.claude/rules/tool-auto-selection.md
+- Tool Strategy: @.claude/rules/tool-strategy.md
+- MCP Auto-Usage: @.claude/rules/mcp-auto-use.md
+- MCP Integration Guide: @.claude/docs/MCP-INTEGRATION-GUIDE.md

package/README.md

@@ -1,3 +1,66 @@
-# Temporary Holding Version
+# ⚡ claudify-agent
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> **Enterprise-grade workflow & context optimization framework for Claude Code, Claude Desktop, and autonomous AI coding agents.**
+
+Inspired by research-backed agent instruction patterns, **claudify-agent** acts as the deterministic bridle and operating system for Claude: preventing context bloat, eliminating repetitive LLM token waste through zero-token local hooks, and enforcing systematic plan-first development.
+
+---
+
+## 🚀 Quick Install via NPX
+
+Không cần cài đặt rườm rà. Tại bất kỳ dự án mới hoặc có sẵn nào của bạn, chỉ cần mở terminal và chạy:
+
+```bash
+npx claudify-agent init
+```
+
+Lệnh này sẽ tự động khởi tạo:
+- `CLAUDE.md`: File điều phối trung tâm tự động nạp bởi Claude Code CLI.
+- `.claude/skills/`: Kho 12 cẩm nang chuyên sâu (Golang, NestJS, Concurrency/Locking, Solidity, Next.js, React...).
+- `.claude/rules/`: 13 bộ luật tối ưu phân tầng ngữ cảnh (< 20 dòng/rule).
+- `.claude/scripts/`: Hệ thống tự kiểm tra cú pháp, typecheck, và bảo mật tốn 0 token.
+
+---
+
+## 📖 Hướng Dẫn Sử Dụng Chi Tiết (How to Use)
+
+### Cách 1: Dùng với Claude Code CLI (Khuyên Dùng Nhất 🚀)
+
+Sau khi chạy `npx claudify-agent init`, chỉ cần mở terminal và gõ:
+```bash
+claude
+```
+👉 Claude Code CLI sẽ tự động phát hiện và tuân thủ toàn bộ quy tắc trong `CLAUDE.md`:
+- Tự động lập **Plan Mode** trước khi sửa từ 2 file trở lên.
+- Tự động tra cứu kỹ năng chuyên biệt khi đụng tới backend Go, NestJS, hoặc Smart Contract.
+- Tự chạy kiểm tra local sau khi code xong.
+
+### Cách 2: Dùng với Claude Desktop / Claude Projects
+
+1. Mở **Claude Desktop** $\rightarrow$ Tạo **Project** mới trỏ vào thư mục code.
+2. Dán nội dung của [CLAUDE.md](CLAUDE.md) vào ô **Custom Instructions**.
+3. Thêm thư mục `.claude/` vào Project Files để Claude tra cứu khi cần.
+
+---
+
+## 🛠️ Kho Kỹ Năng Đầy Đủ (Included 12 Skills)
+
+| Kỹ Năng | Đường dẫn | Trọng tâm giải quyết |
+| :--- | :--- | :--- |
+| **Backend Concurrency** | `.claude/skills/backend-concurrency/SKILL.md` | Chống Race conditions, Distributed Lock (Redis), Deadlock, Idempotency. |
+| **Golang Backend** | `.claude/skills/golang-guide/SKILL.md` | Standard layout (`cmd/`, `internal/`), Worker Pool, Safe Goroutines, Context. |
+| **NestJS Enterprise** | `.claude/skills/nestjs-guide/SKILL.md` | Module boundaries, TypeORM Transaction QueryRunner, DTO Validation. |
+| **Solidity (Smart Contracts)** | `.claude/skills/solidity-guide/SKILL.md` | Mẫu CEI, ReentrancyGuard, tối ưu Gas EVM, Foundry/Hardhat tests. |
+| **Next.js Guide** | `.claude/skills/nextjs-guide/SKILL.md` | App Router, Server Components & Server Actions. |
+| **React Guide** | `.claude/skills/react-guide/SKILL.md` | Single Source of Truth, render optimization & Custom Hooks. |
+| **Python Guide** | `.claude/skills/python-guide/SKILL.md` | FastAPI, Django, Type hints & Pydantic. |
+| **MCP Mastery** | `.claude/skills/mcp-mastery/SKILL.md` | Kết nối và sử dụng các Model Context Protocol servers. |
+| **Debug Optimizer** | `.claude/skills/debug-optimizer/SKILL.md` | Quy trình truy tìm nguyên nhân gốc rễ (Root Cause) 4 bước. |
+| **Tool Selection** | `.claude/skills/tool-selection/SKILL.md` | Chiến lược chọn đúng tool nhằm giảm thiểu số lần gọi API. |
+| **Plan Mastery** | `.claude/skills/plan-mode-mastery/SKILL.md` | Lập kế hoạch có hệ thống trước khi gõ code. |
+| **Vite Guide** | `.claude/skills/vite-guide/SKILL.md` | Cấu hình bundling SPA tối ưu hiệu năng. |
+
+---
+
+## 📄 License
+MIT © [mytoandeptrai](https://github.com/mytoandeptrai)

package/bin/cli.js

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+
+/**
+ * Claudify CLI Tool
+ * Installs CLAUDE.md and .claude configuration into target projects.
+ */
+
+import { fileURLToPath } from 'url';
+import { dirname, join, resolve } from 'path';
+import { cp, access } from 'fs/promises';
+import { existsSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const packageRoot = resolve(__dirname, '..');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+console.log('⚡ Claudify - Claude Agent & Context Optimization Toolkit\n');
+
+if (command === 'init') {
+  const targetDir = process.cwd();
+  console.log(`📦 Initializing Claudify in: ${targetDir}`);
+
+  try {
+    // 1. Copy CLAUDE.md
+    await cp(join(packageRoot, 'CLAUDE.md'), join(targetDir, 'CLAUDE.md'));
+    console.log('  ✅ Created CLAUDE.md (Root agent instruction guidelines)');
+
+    // 2. Copy .claude folder
+    await cp(join(packageRoot, '.claude'), join(targetDir, '.claude'), { recursive: true });
+    console.log('  ✅ Created .claude/ (Skills and automated verification scripts)');
+
+    console.log('\n🎉 Successfully initialized Claudify!');
+    console.log('👉 Next Steps:');
+    console.log('   - Review CLAUDE.md in your project root.');
+    console.log('   - Run Claude Code CLI (or open Claude Desktop) in this directory.');
+    console.log('   - Enjoy strict token minimization and deterministic local checks!');
+  } catch (err) {
+    console.error('❌ Failed to initialize:', err.message);
+    process.exit(1);
+  }
+} else {
+  console.log(`
+Usage:
+  npx claudify init       - Set up CLAUDE.md and .claude skills in current project
+  npx claudify --help     - Show help options
+`);
+}

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "claudify-agent",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Enterprise-grade workflow & context optimization framework for Claude Code, Claude Desktop, and AI coding agents.",
+  "type": "module",
+  "main": "bin/cli.js",
+  "bin": {
+    "claudify-agent": "./bin/cli.js",
+    "claudify": "./bin/cli.js"
+  },
+  "files": [
+    "CLAUDE.md",
+    ".claude",
+    "bin",
+    "README.md",
+    "package.json"
+  ],
+  "scripts": {
+    "lint": "eslint . --format=stylish",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "validate": "node .claude/scripts/auto-validate.js",
+    "security": "node .claude/scripts/security-scan.js"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "anthropic",
+    "ai-agent",
+    "mcp",
+    "developer-tools",
+    "token-optimization",
+    "context-management",
+    "golang",
+    "nestjs",
+    "solidity"
+  ],
+  "author": "mytoandeptrai <mytoandn@gmail.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}