next-skill 1.0.0

package/CLAUDE.md

@@ -0,0 +1,25 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+- **Run tool**: `node index.js`
+- **Global run**: `npx .` (if installed/linked)
+- **Tests**: None specified (`npm test` currently exits with error)
+
+## Architecture
+This is a CLI utility called `next-skill` that wraps `create-next-app` to automatically inject a specialized `.claude/SKILLS.md` file into the new project.
+
+### Core Logic
+- `index.js`: The entry point and main logic.
+  - Prompts for a target directory (defaults to current folder).
+  - Spawns `npx create-next-app@latest` with the specified directory.
+  - On successful creation, it creates a `.claude/SKILLS.md` file in the target directory with a set of predefined project standards.
+
+### Project Standards (Injected via SKILLS.md)
+The injected `SKILLS.md` file enforces:
+- **TypeScript**: Strict type safety.
+- **Next.js App Router**: Server Components by default.
+- **Performance**: Image optimization and dynamic imports.
+- **UI**: Mobile-first design, accessibility, and modern aesthetics (glassmorphism).
+- **State**: Prefers local state and custom hooks over global state.

package/index.js

@@ -0,0 +1,146 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+function createSkillsFile(targetDir) {
+  const claudeDir = path.join(process.cwd(), targetDir, '.claude');
+  const skillsFile = path.join(claudeDir, 'SKILLS.md');
+
+  console.log('Adding .claude/SKILLS.md...');
+
+  if (!fs.existsSync(claudeDir)) {
+    fs.mkdirSync(claudeDir, { recursive: true });
+  }
+
+  const content = `# Project Skills & Standards
+
+This project follows high-performance Next.js standards and is optimized for advanced AI assistants (Claude 3.5 Sonnet / 4.6 Opus).
+
+## 🎯 Development Standards
+- **SSR Dynamic Rendering**: All routes should prioritize Server-Side Rendering (SSR) for real-time data where applicable. Use \`export const dynamic = 'force-dynamic'\` for pages requiring strict dynamic behavior.
+- **Documentation**: Add proper comments (JSDoc/Block) where needed. Avoid excessive inline comments.
+- **Imports**: Import only what is needed. Keep imports in ascending alphabetical order.
+- **Logging**: Use proper console.logs for debugging and progress tracking. When logging errors, print the error object as it is for full context.
+
+## 🎨 Design System & Component Architecture
+- **Atomic Design**: Break down pages into reusable **Atoms** (buttons, inputs), **Molecules** (form fields, cards), and **Organisms** (navbar, hero sections).
+- **Consistency**: Maintain strict adherence to the design system's spacing, typography, and color palette.
+- **Premium Aesthetics**: Use modern color palettes, glassmorphism, and consistent spacing.
+- **Micro-animations**: Implement subtle transitions using Framer Motion or CSS.
+
+## ♻️ Code Structure & DRY Principles
+- **Modularity**: Keep components small and focused. One component per file.
+- **Logic Separation**: Keep business logic separate from UI components. Use utility functions for complex calculations.
+- **Self-Documenting Code**: Use descriptive names. Prefer clarity over brevity.
+- **Type Safety**: Use TypeScript strictly. Define interfaces for all data structures.
+
+## 🪝 React Hooks Strategy
+- **Custom Hooks**: Extract reusable logic into custom hooks.
+- **Performance**: Use \`useMemo\` and \`useCallback\` strategically to prevent unnecessary re-renders in performance-critical areas.
+- **State Management**: Prefer local state and custom hooks over global state. Use Zustand or Context only when necessary.
+
+## 🔐 Environment Security
+- **Strict Requirement**: Use \`.env\` files for ALL credentials, API keys, and environment-specific configurations.
+- **No Hardcoding**: NEVER hardcode secrets in the codebase.
+- **Validation**: Validate environment variables at runtime to ensure they are present.
+
+## 🛣️ Routing & Layouts (App Router)
+- **Layout Consistency**: A \`layout.tsx\` file is REQUIRED in every path/page directory to ensure structural consistency.
+- **Error Handling**: Implement \`error.tsx\` and a custom \`not-found.tsx\` (404 page) for a polished user experience.
+- **Server Components**: Use React Server Components (RSC) by default. Only use 'use client' when necessary.
+
+## 📝 Writing & Formatting
+- **Consistency**: Follow a consistent naming convention (e.g., PascalCase for components, camelCase for functions/variables).
+- **Format**: Use Prettier and ESLint for automated code formatting and linting.
+
+## 🚀 Performance Optimization
+- **Data Fetching**: Prefer Server-side fetching over client-side useEffect.
+- **Image Optimization**: Use next/image with proper priority and sizes.
+- **Dynamic Imports**: Use lazy loading for heavy client components.
+
+## 🤖 AI Assistance Standards
+- Always provide full context when requesting refactors.
+- Prefer modern patterns (App Router) over legacy ones.
+`;
+
+  fs.writeFileSync(skillsFile, content);
+  console.log('Successfully created .claude/SKILLS.md');
+}
+
+async function main() {
+  rl.question('Press enter to install in current folder or give a name: ', (folderName) => {
+    const targetDir = folderName.trim() || '.';
+    const isCurrentDir = targetDir === '.';
+
+    console.log(`Running: npx create-next-app@latest ${targetDir}`);
+
+    const args = ['create-next-app@latest', targetDir];
+    if (isCurrentDir) {
+      args.push('--yes'); // Auto-confirm for current directory
+    }
+
+    const child = spawn('npx', args, {
+      stdio: 'inherit',
+      shell: true
+    });
+
+    child.on('close', (code) => {
+      rl.close();
+      if (code === 0) {
+        console.log('Next.js app created successfully!');
+        createSkillsFile(targetDir);
+        createProjectFolders(targetDir);
+      } else {
+        console.error(`create-next-app failed with code ${code}`);
+        process.exit(code || 1);
+      }
+    });
+  });
+}
+
+function createProjectFolders(targetDir) {
+  const projectPath = path.join(process.cwd(), targetDir);
+  const appDir = path.join(projectPath, 'app');
+  const pagesDir = path.join(projectPath, 'pages');
+
+  // Check if it's an App Router project
+  if (fs.existsSync(appDir) && !fs.existsSync(pagesDir)) {
+    console.log('App Router setup detected. Creating additional folders...');
+    const foldersToCreate = ['components', 'lib', 'utils'];
+    foldersToCreate.forEach(folder => {
+      const folderPath = path.join(projectPath, folder);
+      if (!fs.existsSync(folderPath)) {
+        fs.mkdirSync(folderPath, { recursive: true });
+        console.log(`Created folder: ${folder}`);
+      }
+    });
+  }
+
+  // Create .env and .env.local files
+  const envFiles = ['.env', '.env.local'];
+  envFiles.forEach(file => {
+    const filePath = path.join(projectPath, file);
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, '');
+      console.log(`Created file: ${file}`);
+    }
+  });
+}
+
+if (require.main === module) {
+  main();
+} else {
+  module.exports = {
+    createSkillsFile,
+    createProjectFolders,
+    main
+  };
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "next-skill",
+  "version": "1.0.0",
+  "description": "Create a Next.js app with .claude/SKILLS.md",
+  "main": "index.js",
+  "bin": {
+    "next-skill": "./index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {}
+}