Add proper YAML frontmatter to README

README.md

@@ -1,294 +1,40 @@
-# DevTool Platform Template
+---
+title: devforge
+emoji: 🚀
+colorFrom: gray
+colorTo: gray
+sdk: docker
+pinned: false
+---
 
-A developer tools platform template built with Next.js 15, TypeScript, and @hanzo/ui components for creating modern development utilities.
+# devforge Template
+
+A Hanzo template for building modern applications.
 
 ## Features
+- Built with @hanzo/ui
+- Fully responsive
+- TypeScript support
+- Tailwind CSS styling
+- shadcn/ui components
 
-- ✨ Built with **@hanzo/ui** component library (shadcn/ui based)
-- 🎨 **Monochromatic color scheme** with developer-focused aesthetics
-- 📱 **Fully responsive** design (mobile, tablet, desktop)
-- 🌙 **Dark mode** support with next-themes
-- 🚀 **Next.js 15** App Router with React 19
-- 🛠️ **Developer-centric** components
-- ⚡ **TypeScript strict mode** enabled
-- 🎯 **Performance optimized** for tool interfaces
+## Installation
 
-## Quick Start
+```bash
+npx create-hanzo-app --template devforge
+```
 
-### Installation
+## Development
 
 ```bash
-# Install dependencies
 npm install
-
-# Start development server
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) to view your dev tool platform.
-
-### Production Build
+## Build
 
 ```bash
-# Create production build
 npm run build
-
-# Start production server
-npm start
-```
-
-## Project Structure
-
-```
-devtool/
-├── app/                  # Next.js App Router
-│   ├── layout.tsx       # Root layout with theming
-│   └── page.tsx         # Landing page
-├── components/          # React components
-│   └── sections/        # Page sections
-│       ├── hero.tsx     # Hero with CTA
-│       └── features.tsx # Feature cards
-├── lib/                 # Utilities and config
-│   └── site.ts          # Site configuration
-├── public/              # Static assets
-└── package.json         # Dependencies
-```
-
-## Component Usage
-
-All components are imported from `@hanzo/ui` with developer-friendly styling:
-
-```tsx
-import { Button, Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/components'
-
-// Developer-styled button with monospace font
-<Button size="lg" className="font-mono">
-  npm install @your-tool
-</Button>
-
-// Feature card with technical styling
-<Card className="border-2 hover:border-black dark:hover:border-white">
-  <CardHeader>
-    <CardTitle className="font-mono">Feature Name</CardTitle>
-  </CardHeader>
-  <CardContent>
-    Technical description here
-  </CardContent>
-</Card>
-```
-
-## Customization
-
-### Site Configuration
-
-Edit `lib/site.ts` to customize your dev tool details:
-
-```typescript
-export const siteConfig = {
-  name: "Your Tool Name",
-  tagline: "Your Tool Tagline",
-  description: "What your tool does",
-  url: "https://your-tool.com",
-  features: [
-    "Feature 1",
-    "Feature 2",
-    "Feature 3",
-    "Feature 4"
-  ]
-}
-```
-
-### Styling
-
-The template uses a monochromatic color scheme perfect for developer tools:
-
-- Primary: Black (`#000000`)
-- Secondary: Gray (`#666666`)
-- Accent: Dark gradients for depth
-- Code: Monospace fonts throughout
-- Borders: High contrast for clarity
-
-### Adding Tool Pages
-
-Create new pages for different tools:
-
-```tsx
-// app/editor/page.tsx
-import { Button, Card } from '@hanzo/ui/components'
-
-export default function EditorPage() {
-  return (
-    <div className="container mx-auto py-12">
-      <h1 className="text-4xl font-mono font-bold mb-8">
-        Code Editor
-      </h1>
-      {/* Your editor implementation */}
-    </div>
-  )
-}
-```
-
-## Developer Features
-
-### Code Display Components
-
-```tsx
-// Code block with syntax highlighting
-<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
-  <code className="language-javascript">
-    {codeString}
-  </code>
-</pre>
-
-// Terminal-style output
-<div className="bg-black text-green-400 p-4 font-mono text-sm">
-  $ npm install your-package
-  <br />
-  ✓ Installation complete
-</div>
-```
-
-### API Integration
-
-```tsx
-// Example API endpoint structure
-// app/api/tools/[tool]/route.ts
-export async function POST(request: Request) {
-  const data = await request.json()
-  // Process tool request
-  return Response.json({ result })
-}
 ```
 
-### Keyboard Shortcuts
-
-```tsx
-// Example keyboard shortcut handler
-useEffect(() => {
-  const handleKeyPress = (e: KeyboardEvent) => {
-    if (e.metaKey && e.key === 'k') {
-      // Open command palette
-    }
-  }
-  document.addEventListener('keydown', handleKeyPress)
-  return () => document.removeEventListener('keydown', handleKeyPress)
-}, [])
-```
-
-## Available Scripts
-
-| Command | Description |
-|---------|-------------|
-| `npm run dev` | Start development server |
-| `npm run build` | Build for production |
-| `npm start` | Start production server |
-| `npm run lint` | Run ESLint |
-
-## Tool Categories
-
-### Supported Tool Types
-- **Code Generators**: Templates, boilerplate, snippets
-- **Testing Tools**: Unit tests, integration tests, E2E
-- **Build Tools**: Bundlers, compilers, transpilers
-- **Documentation**: API docs, README generators
-- **Analysis Tools**: Linters, formatters, profilers
-- **Deployment**: CI/CD, containerization, monitoring
-
-## Environment Variables
-
-Create a `.env.local` file for configuration:
-
-```env
-# Example environment variables
-NEXT_PUBLIC_API_URL=https://api.your-tool.com
-NEXT_PUBLIC_GITHUB_TOKEN=ghp_...
-DATABASE_URL=postgresql://...
-REDIS_URL=redis://...
-```
-
-## Responsive Design
-
-The template adapts to different screen sizes:
-
-```tsx
-// Responsive layout
-<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-  {/* Tool cards */}
-</div>
-
-// Responsive navigation
-<nav className="flex flex-col md:flex-row gap-4">
-  {/* Navigation items */}
-</nav>
-```
-
-## TypeScript
-
-Strict mode is enabled for better type safety:
-
-```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
-  }
-}
-```
-
-## Performance Optimization
-
-- Lazy loading for heavy components
-- Code splitting by feature
-- Optimized bundle size
-- Service worker for offline support
-- WebAssembly support for compute-intensive tasks
-
-## Integration Examples
-
-### GitHub Integration
-```tsx
-// Connect to GitHub API
-const octokit = new Octokit({
-  auth: process.env.GITHUB_TOKEN,
-})
-```
-
-### Database Integration
-```tsx
-// Prisma ORM example
-import { PrismaClient } from '@prisma/client'
-const prisma = new PrismaClient()
-```
-
-### Real-time Features
-```tsx
-// WebSocket connection
-const ws = new WebSocket('wss://your-api.com')
-ws.on('message', handleMessage)
-```
-
-## Browser Support
-
-- Chrome 90+
-- Firefox 88+
-- Safari 14+
-- Edge 90+
-
-## Contributing
-
-1. Fork the repository
-2. Create your feature branch
-3. Commit your changes
-4. Push to the branch
-5. Create a Pull Request
-
-## License
-
-MIT
-
-## Support
-
-For questions or issues, visit [github.com/hanzoai/templates](https://github.com/hanzoai/templates)
+Check out the [Hanzo Template Gallery](https://huggingface.co/spaces/hanzoai/gallery) for more templates.