crow-agent
v0.6.5TypeScript
Automatically add dark/light mode functionality to Tailwind CSS projects through natural language commands
0/weekUpdated 4 months agoMITUnpacked: 1.1 MB
Published by Alex McKee
npm install crow-agent🌙 Crow Agent
<<<<<<< HEAD
Add dark/light mode support to any Tailwind project using natural language - all from your terminal.
Transform your project with simple commands like crow "add dark mode" without leaving your development environment.
=======
Automatically add dark/light mode functionality to Tailwind CSS projects through natural language commands.
>>>>>>> a59fd3b0031fe6d080643e4644e6d64b4da19efa
✨ Features
- 🗣️ Natural Language Interface: Use plain English commands like crow "add dark mode" or crow "enable theme switching"
- 🖥️ Never Leave Terminal: Complete theme integration without opening browsers, editors, or external tools
- 🎯 One Command Setup: Automatically transforms classes, updates config, and generates components
- 🏗️ Framework Support: React, Vue, Next.js, Nuxt.js, and vanilla HTML - works with any Tailwind project
- ⚡ Tailwind v3 & v4 Compatible: Supports both traditional config files and new CSS-based configuration
- 🧠 Intelligent Analysis: Scans your project and transforms existing Tailwind classes automatically
- 🔧 Component Generation: Creates theme toggle components that integrate seamlessly with your framework
- 📝 Git Integration: Automatically commits changes with descriptive messages
- 🎨 Interactive Mode: Run crow alone for a guided, menu-driven experience
- ♿ Accessibility: Generated components follow WCAG AA guidelines
🚀 Quick Start
Transform any Tailwind project with natural language commands:
``bashInstall globally
npm install -g crow-agent
Navigate to your Tailwind project (any framework!)
cd my-tailwind-project
Use natural language to add theme switching
crow "add dark mode"
or
crow "enable theme switching"
or
crow "add light dark mode support"
`
That's it! Your project now has complete theme switching support - all without leaving your terminal.
> 🎯 The Terminal-First Approach
> No context switching. No GUI tools. No manual configuration.
> Just natural language commands that understand what you want to do.
$3
For a guided experience, just run:
bash
crow
`
Get a beautiful dashboard that analyzes your project and walks you through the setup process.📦 Installation
$3
bash
npm install -g crow-agent
`$3
bash
npm
npm install --save-dev crow-agentyarn
yarn add -D crow-agentpnpm
pnpm add -D crow-agent
`🎯 Usage
$3
Work entirely from your terminal using intuitive commands:
bash
Basic theme switching setup
crow "add dark mode"
crow "add theme switching"
crow "enable light dark mode"
crow "add night mode support"Interactive guided setup
crowPreview changes before applying
crow "add dark mode --dry-run"
crow "add theme switching --backup"Analysis and status commands
crow "scan project"
crow "check status"
crow "help"
`The beauty: Never open a browser, never leave your terminal, never manually edit config files.
$3
bash
Preview changes without applying
crow "add dark mode --dry-run"Create backup before changes
crow "add dark mode --backup"Force overwrite existing setup
crow "add dark mode --force"Skip git commit
crow "add dark mode --no-commit"Specify framework manually
crow "add dark mode --framework react"Custom component name and output
crow "add dark mode --component MyThemeToggle --output ./components"Verbose output
crow "add dark mode --verbose"
`$3
typescript
import {
analyzeProject,
transformFiles,
generateThemeToggleComponent
} from 'crow-agent';// Analyze project
const analysis = await analyzeProject('./my-project');
// Transform components
const results = await transformFiles(analysis.componentFiles);
// Generate theme toggle
const component = await generateThemeToggleComponent({
framework: 'react',
outputPath: './src/components',
typescript: true
});
`🏗️ What It Does (Without You Lifting a Finger!)
Run one command and Crow Agent automatically handles everything:
$3
Converts existing Tailwind classes to include dark mode variants:diff
-
+ -
$3
Tailwind v3: Updates your tailwind.config.js to enable dark mode:
`diff
module.exports = {
+ darkMode: 'class',
content: ['./src/*/.{js,jsx,ts,tsx}'],
// ...
}
`
Tailwind v4: Adds CSS custom variant to your stylesheets:
`diff
@import "tailwindcss";
+ @custom-variant dark (&:where(.dark, .dark *));
`
$3
#### React/Next.js
`jsx
import { ThemeToggle } from './components/ThemeToggle';
function Header() {
return (
My App
);
}
`
#### Vue/Nuxt.js
`vue
My App
`
#### HTML
`html
`
🎨 Supported Transformations
Crow Agent intelligently transforms these Tailwind utility classes:
$3
- bg-white → bg-white dark:bg-gray-900
- → bg-gray-50 dark:bg-gray-800
- → bg-gray-100 dark:bg-gray-800$3
- → text-gray-900 dark:text-gray-100
- → text-gray-700 dark:text-gray-300
- → text-black dark:text-white$3
- → border-gray-200 dark:border-gray-700
- → border-gray-300 dark:border-gray-600$3
The tool includes comprehensive mappings for gray, slate, zinc, and neutral color scales.🛠️ Framework Support
| Framework | Status | Features |
|-----------|--------|----------|
| React | ✅ | JSX transformation, TypeScript support, hook-based toggle |
| Next.js | ✅ | App Router support, SSR compatibility, hydration handling |
| Vue 3 | ✅ | SFC parsing, Composition API, TypeScript support |
| Nuxt.js | ✅ | Auto-imports, SSR compatibility |
| HTML | ✅ | Vanilla JS toggle, CDN compatibility |
📊 Project Analysis
Use the scan command to analyze your project:
bash
crow "scan project --verbose"
`Output:
🔍 Crow Agent - Project Analysis✅ Project validation completed
📊 Project Analysis Results
Framework Detection:
Framework: react
Package.json: ✓
Tailwind Config: ✓
Dark Mode Status:
Currently Enabled: ✗
Component Analysis:
Total Components: 12
Transformable: 8 (67%)
Estimated Changes: 45
💡 Recommendations:
✓ Ready for dark mode implementation
Run: crow "add dark mode" to proceed
⚙️ Configuration
$3
You can extend the default color mappings by creating a file:`javascript
module.exports = {
colorMappings: {
'bg-custom': 'bg-custom dark:bg-custom-dark',
'text-brand': 'text-brand dark:text-brand-light',
},
ignore: ['.test.js', 'node_modules/*'],
typescript: true,
};
`$3
Crow Agent automatically detects your framework, but you can override it:bash
Force React treatment
crow "add dark mode --framework react"Force Vue treatment
crow "add dark mode --framework vue"
`🔧 Advanced Usage
$3
Preview changes before applying them:bash
crow "add dark mode --dry-run"
`$3
Create automatic backups:bash
crow "add dark mode --backup"
`$3
bash
crow "add dark mode --component DarkModeToggle"
`$3
bash
crow "add dark mode --no-commit"
`🎯 Examples
directory:- React + TypeScript
- Next.js App Router
- Vue 3 + Vite
- Nuxt.js
- Vanilla HTML
🖥️ Why Terminal-First?
Focus on coding, not clicking:
- ✅ Stay in your development flow
- ✅ Natural language that just works
- ✅ One command replaces hours of manual work
- ✅ No GUI tools or browser tabs required
- ✅ Perfect for SSH/remote development
- ✅ Scriptable and automatable
Traditional approach: Open docs → Copy config → Edit files → Test → Debug → Repeat
Crow approach:
crow "add dark mode" → Done ✨🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
$3
`bash
Clone the repository
git clone https://github.com/alexmckee/crow-agent.git
cd crow-agentInstall dependencies
npm installBuild the project
npm run buildTest locally
npm link
crow "help"
``📝 License
MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Tailwind CSS for the amazing utility-first framework
- Commander.js for CLI functionality
- Babel for JavaScript AST parsing
- Vue.js for SFC parsing utilities
🐛 Issues & Support
---
Made with 🌙 by Alex McKee
<<<<<<< HEAD
Transform your Tailwind projects with natural language commands - no GUI required! 🚀
=======
>>>>>>> a59fd3b0031fe6d080643e4644e6d64b4da19efa