ebade 0.2.1 → 0.3.0

package/README.md

@@ -8,6 +8,7 @@
 [![MCP Server](https://img.shields.io/badge/MCP-Ready-green.svg)](./packages/mcp-server)
 [![Status](https://img.shields.io/badge/Status-Alpha-orange.svg)](./ROADMAP.md)
 [![Green AI](https://img.shields.io/badge/🌱_Green_AI-70%25_Less_Tokens-brightgreen)](./docs/GREEN-AI.md)
+[![Agent-Native](https://img.shields.io/badge/Agent--Native-Universal_AI_Support-black)](./SYNTAX.md)
 [![Sponsor](https://img.shields.io/badge/Sponsor-ebade-pink.svg?logo=github-sponsors)](https://github.com/sponsors/hasankemaldemirci)
 
 > **The first framework designed for AI agents, readable by humans.**
@@ -16,7 +17,12 @@
 >
 > *Capture the essence of code. Less tokens. Less carbon. Same result.* 🌱
 
+## 🎬 See it in action
+
+![ebade demo](./demo.gif)
+
 ```typescript
+
 // ❌ Before: 100+ lines of boilerplate
 export default function CheckoutPage() {
   const [cart, setCart] = useState([]);
@@ -65,18 +71,27 @@ Then AI agents can use:
 ### For Humans (CLI)
 
 ```bash
-# Scaffold a new project
-npx ebade scaffold --type e-commerce --name my-store
-
-# Compile intents to code
-npx ebade build
+# Scaffold a new project from an ebade file
+npx ebade scaffold examples/saas-dashboard.ebade.yaml ./my-app
 
-# Watch mode
-npx ebade dev
+# See all commands
+npx ebade --help
 ```
 
 ---
 
+## 🤖 Integrated AI Synergy
+
+**ebade** projects automatically configure themselves for AI collaboration. When you scaffold a project, it generates specialized instruction files for major AI agents:
+
+- **Cursor**: `.cursorrules`
+- **Claude / Windsurf**: `.clauderules`
+- **GitHub Copilot**: `.github/copilot-instructions.md`
+
+These files teach the AI agents exactly how to work with ebade intents, ensuring they never "hallucinate" boilerplate and always stay token-efficient.
+
+---
+
 ## 📊 Benchmark: ~70% Fewer Tokens (Tested)
 
 We measured token usage across common development tasks:
@@ -206,8 +221,9 @@ pages:
       - search-bar
       - product-grid
       - pagination
-      
+
   - path: /checkout
+
     intent: checkout-flow
     auth: required
     components:

package/ROADMAP.md

@@ -44,10 +44,10 @@ Replace string templates with actual AST-based compilation.
 - [ ] Code generator (AST → React/Next.js)
 - [ ] Support for multiple framework targets
 
-### 1.5 CLI Improvements
+### 1.5 CLI Improvements ✅
 
-- [ ] `ebade init` - interactive project setup
-- [ ] `ebade dev` - watch mode with local agent sync
+- [x] `ebade init` - interactive project setup
+- [x] `ebade dev` - watch mode with local agent sync
 
 ---
 
@@ -122,7 +122,7 @@ Replace string templates with actual AST-based compilation.
 
 ## Current Status
 
-**Phase 1 - Foundation** ← NEARLY COMPLETE
+### Phase 1 - Foundation (Nearly Complete)
 
 The MCP server is live. CLI has premium UX. Two comprehensive examples (E-commerce + SaaS Dashboard) are ready. AI agents can now use ebade to scaffold full Next.js apps with **~70% fewer tokens**.
 

package/cli/scaffold.js

@@ -11,6 +11,8 @@ import fs from "fs";
 import path from "path";
 import yaml from "yaml";
 import ora from "ora";
+import prompts from "prompts";
+import chokidar from "chokidar";
 
 // ============================================
 // ANSI Renk Kodları (Terminal çıktısı için)
@@ -472,6 +474,38 @@ body {
 `;
 }
 
+function generateAgentRules(config) {
+  return `
+# ebade Agent-First Framework Rules
+
+You are an AI developer working on a project built with the **ebade Agent-First Framework**.
+This project is designed specifically for AI-Human collaboration.
+
+## 🧠 Core Philosophy
+- **Intent > Implementation**: Focus on WHAT the code should do.
+- **Source of Truth**: The structure is defined in \`project.ebade.yaml\`. Always refer to it before making structural changes.
+- **Consistency**: All generated code should match the intents defined in \`app/\`, \`components/\`, and \`api/\`.
+
+## 🛠 Framework Patterns
+
+### 1. Decorators (Comments)
+All files generated by ebade contain semantic decorators in their headers. Keep them intact:
+- @page('/path'): Marks a Next.js Page.
+- @intent('name'): Describes the purpose of the file.
+- @requires(['components']): Lists dependencies.
+
+### 2. Design System
+- Use CSS Variables defined in \`app/globals.css\`.
+- Prefer these tokens: var(--color-primary), var(--color-secondary), var(--radius-default).
+
+## 🤝 AI Collaboration Guidelines
+1. **When adding a new page**: First, suggest updating \`project.ebade.yaml\` if possible.
+2. **When modifying components**: Ensure they remain decoupled and respect the design system props.
+
+Built with ebade - The Agent-First Framework for the next era of development. 🌱
+`;
+}
+
 // ============================================
 // Utility Functions
 // ============================================
@@ -665,6 +699,25 @@ function scaffold(ebadePath, outputDir) {
   );
   log.file("next-env.d.ts");
 
+  // Agent Rules
+  const agentRules = generateAgentRules(config).trim();
+
+  // .cursorrules (Cursor)
+  fs.writeFileSync(path.join(projectDir, ".cursorrules"), agentRules);
+  log.file(".cursorrules");
+
+  // .clauderules (Claude/Windsurf)
+  fs.writeFileSync(path.join(projectDir, ".clauderules"), agentRules);
+  log.file(".clauderules");
+
+  // GitHub Copilot instructions
+  ensureDir(path.join(projectDir, ".github"));
+  fs.writeFileSync(
+    path.join(projectDir, ".github/copilot-instructions.md"),
+    agentRules
+  );
+  log.file(".github/copilot-instructions.md");
+
   // ========== Generate Database Schema ==========
   if (config.data) {
     log.section("Generating database schema");
@@ -740,17 +793,175 @@ ${colors.dim}Usage:${colors.reset}
   npx ebade <command> [options]
 
 ${colors.dim}Commands:${colors.reset}
+  init                       Create a new ebade project interactively
   scaffold <file> [output]   Scaffold a project from ebade file
+  dev <file> [output]        Watch ebade file and re-scaffold on changes
   
 ${colors.dim}Examples:${colors.reset}
-  npx ebade scaffold examples/ecommerce.ebade.yaml ./output
-  npx ebade scaffold my-project.ebade.yaml
+  npx ebade init
+  npx ebade scaffold examples/saas-dashboard.ebade.yaml ./output
+  npx ebade dev my-project.ebade.yaml ./my-app
 
 ${colors.dim}Learn more:${colors.reset}
   https://ebade.dev
 `);
 }
 
+// ============================================
+// Init Command (Interactive Setup)
+// ============================================
+async function init() {
+  console.log(`
+${LOGO}
+`);
+
+  const response = await prompts([
+    {
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: "my-ebade-app",
+    },
+    {
+      type: "select",
+      name: "template",
+      message: "Choose a template:",
+      choices: [
+        { title: "SaaS Dashboard", value: "saas-dashboard" },
+        { title: "E-commerce", value: "ecommerce" },
+        { title: "Landing Page", value: "landing" },
+        { title: "Empty Project", value: "empty" },
+      ],
+    },
+    {
+      type: "text",
+      name: "primaryColor",
+      message: "Primary color (hex):",
+      initial: "#6366f1",
+    },
+    {
+      type: "confirm",
+      name: "autoScaffold",
+      message: "Scaffold project now?",
+      initial: true,
+    },
+  ]);
+
+  if (!response.projectName) {
+    console.log(`${colors.yellow}Cancelled.${colors.reset}`);
+    process.exit(0);
+  }
+
+  const outputDir = `./${response.projectName}`;
+  ensureDir(outputDir);
+
+  let yamlContent;
+  if (response.template === "empty") {
+    yamlContent = `# ebade Project Configuration
+# Generated by ebade init
+
+project:
+  name: ${response.projectName}
+  type: custom
+  version: "1.0.0"
+
+design:
+  style: minimal-modern
+  colors:
+    primary: "${response.primaryColor}"
+    secondary: "#f59e0b"
+  font: Inter
+  borderRadius: md
+
+pages:
+  - path: /
+    intent: landing-page
+    components:
+      - hero-section
+
+api: []
+data: []
+`;
+  } else {
+    // Get the directory of the current script (cli/scaffold.js)
+    const scriptDir = path.dirname(new URL(import.meta.url).pathname);
+    const templatePath = path.join(
+      scriptDir,
+      "..",
+      "examples",
+      response.template === "saas-dashboard"
+        ? "saas-dashboard.ebade.yaml"
+        : "ecommerce.ebade.yaml"
+    );
+    if (fs.existsSync(templatePath)) {
+      yamlContent = fs.readFileSync(templatePath, "utf-8");
+      yamlContent = yamlContent.replace(
+        /name: .*/,
+        `name: ${response.projectName}`
+      );
+    } else {
+      console.error(
+        `${colors.red}Error:${colors.reset} Template not found. Using empty template.`
+      );
+      yamlContent = `project:\n  name: ${response.projectName}\n  type: custom\n`;
+    }
+  }
+
+  const ebadeFilePath = path.join(outputDir, "project.ebade.yaml");
+  fs.writeFileSync(ebadeFilePath, yamlContent);
+
+  console.log(`
+${colors.green}✓${colors.reset} Created ${colors.cyan}${ebadeFilePath}${colors.reset}
+`);
+
+  if (response.autoScaffold) {
+    scaffold(ebadeFilePath, outputDir);
+  } else {
+    console.log(`
+${colors.dim}Next steps:${colors.reset}
+  ${colors.gray}1.${colors.reset} Edit ${colors.cyan}${ebadeFilePath}${colors.reset}
+  ${colors.gray}2.${colors.reset} Run ${colors.cyan}npx ebade scaffold ${ebadeFilePath} ${outputDir}${colors.reset}
+`);
+  }
+}
+
+// ============================================
+// Dev Command (Watch Mode)
+// ============================================
+function dev(ebadeFile, outputDir) {
+  console.log(`
+${LOGO}
+`);
+
+  console.log(
+    `${colors.cyan}👀 Watching${colors.reset} ${colors.bright}${ebadeFile}${colors.reset} for changes...\n`
+  );
+  console.log(`${colors.dim}Press Ctrl+C to stop.${colors.reset}\n`);
+
+  // Initial scaffold
+  scaffold(ebadeFile, outputDir);
+
+  // Watch for changes
+  const watcher = chokidar.watch(ebadeFile, {
+    persistent: true,
+    ignoreInitial: true,
+  });
+
+  watcher.on("change", () => {
+    console.log(
+      `\n${colors.yellow}⚡ Change detected!${colors.reset} Re-scaffolding...\n`
+    );
+    scaffold(ebadeFile, outputDir);
+  });
+
+  watcher.on("error", (error) => {
+    console.error(`${colors.red}Watcher error:${colors.reset}`, error);
+  });
+}
+
+// ============================================
+// Command Router
+// ============================================
 if (
   args.length === 0 ||
   command === "help" ||
@@ -761,7 +972,9 @@ if (
   process.exit(0);
 }
 
-if (command === "scaffold") {
+if (command === "init") {
+  await init();
+} else if (command === "scaffold") {
   const ebadeFile = args[1];
   const outputDir = args[2] || "./output";
 
@@ -783,6 +996,28 @@ if (command === "scaffold") {
   }
 
   scaffold(ebadeFile, outputDir);
+} else if (command === "dev") {
+  const ebadeFile = args[1];
+  const outputDir = args[2] || "./output";
+
+  if (!ebadeFile) {
+    console.error(
+      `${colors.red}Error:${colors.reset} Please provide an ebade file path.`
+    );
+    console.log(
+      `\n${colors.dim}Usage:${colors.reset} npx ebade dev <file.ebade.yaml> [output-dir]\n`
+    );
+    process.exit(1);
+  }
+
+  if (!fs.existsSync(ebadeFile)) {
+    console.error(
+      `${colors.red}Error:${colors.reset} ebade file not found: ${ebadeFile}`
+    );
+    process.exit(1);
+  }
+
+  dev(ebadeFile, outputDir);
 } else {
   console.error(
     `${colors.red}Error:${colors.reset} Unknown command: ${command}`

package/landing/index.html

@@ -226,6 +226,37 @@
     </section>
   </main>
 
+  <footer class="site-footer">
+    <div class="footer-container">
+      <div class="footer-brand">
+        <div class="footer-logo">🧠 ebade</div>
+        <p class="footer-slogan">Capture the essence of code.<br>Less tokens. Less carbon. Same result. 🌱</p>
+      </div>
+      <div class="footer-links">
+        <div class="footer-column">
+          <h4>Product</h4>
+          <a href="#technology">Technology</a>
+          <a href="#benchmarks">Benchmarks</a>
+          <a href="https://github.com/hasankemaldemirci/ebade/tree/main/examples" target="_blank">Examples</a>
+        </div>
+        <div class="footer-column">
+          <h4>Resources</h4>
+          <a href="https://github.com/hasankemaldemirci/ebade" target="_blank">GitHub</a>
+          <a href="https://www.npmjs.com/package/ebade" target="_blank">npm</a>
+          <a href="https://github.com/hasankemaldemirci/ebade/blob/main/ROADMAP.md" target="_blank">Roadmap</a>
+        </div>
+        <div class="footer-column">
+          <h4>Contact</h4>
+          <a href="mailto:hello@ebade.dev">hello@ebade.dev</a>
+          <a href="https://github.com/sponsors/hasankemaldemirci" target="_blank">Sponsor 💜</a>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>© 2026 ebade. The Agent-First Framework.</p>
+      <p class="footer-tagline">Code = f(Intent) // Kind to Earth 🌍</p>
+    </div>
+  </footer>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   <script src="main.js"></script>

package/landing/style.css

@@ -111,22 +111,13 @@ body {
 .nav-github {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.3rem 0.6rem;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-  border: 1px solid transparent;
-}
-
-.nav-github:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: rgba(0, 0, 0, 0.05);
+  gap: 0.4rem;
 }
 
 .nav-github i,
 .nav-github svg {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
 }
 
 .star-icon-nav {
@@ -577,40 +568,318 @@ h1 span {
 }
 
 /* Footer */
-.minimal-footer {
-  padding: 4rem 3rem;
-  border-top: 1px solid var(--border);
+.site-footer {
+  background: #000;
+  color: #fff;
+  padding: 6rem 3rem 2rem;
+  position: relative;
+  z-index: 10;
 }
 
-.footer-content {
+.footer-container {
+  max-width: 1400px;
+  margin: 0 auto;
   display: flex;
   justify-content: space-between;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-dim);
+  gap: 4rem;
+  flex-wrap: wrap;
+}
+
+.footer-brand {
+  max-width: 300px;
+}
+
+.footer-logo {
+  font-size: 1.5rem;
+  font-weight: 900;
+  margin-bottom: 1rem;
+}
+
+.footer-slogan {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.footer-links {
+  display: flex;
+  gap: 5rem;
+}
+
+.footer-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.footer-column h4 {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 0.5rem;
 }
 
-.socials a {
-  margin-left: 2rem;
+.footer-column a {
+  color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
-  color: var(--text);
+  font-size: 0.95rem;
+  transition: color 0.2s;
+}
+
+.footer-column a:hover {
+  color: var(--primary);
+}
+
+.footer-bottom {
+  max-width: 1400px;
+  margin: 4rem auto 0;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.footer-tagline {
+  font-family: var(--font-mono);
+  color: var(--accent-emerald);
 }
 
 @media (max-width: 1024px) {
   h1 {
     font-size: 4rem;
   }
+
   .grid-3 {
     grid-template-columns: 1fr;
   }
+
   .comparison-modern {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    gap: 1rem;
   }
+
+  .transform-arrow {
+    padding: 1rem 0;
+  }
+
   .stats-box {
     flex-direction: column;
-    gap: 4rem;
+    gap: 3rem;
+    padding: 3rem 2rem;
   }
+
   .stat-divider {
     display: none;
   }
 }
+
+@media (max-width: 768px) {
+  /* Nav - Simplified for mobile */
+  .full-nav {
+    padding: 1rem 1.5rem;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .logo {
+    font-size: 1.3rem;
+  }
+
+  .nav-links {
+    width: 100%;
+    justify-content: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .nav-links a {
+    font-size: 0.8rem;
+    padding: 0.4rem 0.6rem;
+  }
+
+  .nav-github span {
+    display: none; /* Hide "GitHub" text, show only icon */
+  }
+
+  .nav-cta {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+  }
+
+  /* Hero */
+  .hero-full {
+    padding: 0 1.5rem;
+    padding-top: 120px; /* Account for stacked nav */
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .hero-description {
+    font-size: 1rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .btn-glow,
+  .btn-minimal {
+    width: 100%;
+    justify-content: center;
+    padding: 1rem 2rem;
+  }
+
+  .scroll-indicator {
+    display: none;
+  }
+
+  /* Sections */
+  .section-dark {
+    border-radius: 30px 30px 0 0;
+  }
+
+  .section-container {
+    padding: 4rem 1.5rem;
+  }
+
+  .section-header h2 {
+    font-size: 2.5rem;
+  }
+
+  .section-header p {
+    font-size: 1rem;
+  }
+
+  /* Transform Arrow - Vertical connecting both cards */
+  .transform-arrow {
+    padding: 1.5rem 0;
+    height: auto;
+    margin: 0;
+    z-index: 0;
+  }
+
+  .transform-arrow::after {
+    /* Reset horizontal positioning */
+    top: -100px;
+    bottom: -100px;
+    left: 50%;
+    right: auto;
+    /* Make it vertical */
+    width: 2px;
+    height: 300px;
+    /* Center and position behind cards */
+    transform: translateX(-50%);
+    z-index: -1;
+    /* Vertical gradient */
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      rgba(79, 70, 229, 0.5),
+      transparent
+    );
+    background-size: 100% 100%;
+    animation: none;
+  }
+
+  .transform-arrow i,
+  .transform-arrow svg {
+    width: 32px;
+    height: 32px;
+    transform: rotate(90deg);
+    animation: none;
+    z-index: 5;
+    position: relative;
+    background: #0d1117;
+    border-radius: 50%;
+    padding: 6px;
+  }
+
+  /* Code Cards - ensure they're above the line */
+  .code-card {
+    position: relative;
+    z-index: 2;
+  }
+
+  /* Code Cards */
+  .code-card pre {
+    padding: 1rem;
+    font-size: 0.75rem;
+    overflow-x: auto;
+  }
+
+  /* Stats */
+  .stat .val {
+    font-size: 3rem;
+  }
+
+  /* Features */
+  .feature-item {
+    padding: 2rem;
+  }
+
+  .feature-item h3 {
+    font-size: 1.4rem;
+  }
+
+  /* Footer */
+  .site-footer {
+    padding: 4rem 1.5rem 2rem;
+  }
+
+  .footer-container {
+    flex-direction: column;
+  }
+
+  .footer-brand {
+    max-width: 100%;
+    text-align: center;
+  }
+
+  .footer-links {
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
+  }
+
+  .footer-column {
+    text-align: center;
+    min-width: 120px;
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo {
+    font-size: 1.25rem;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .badge-modern {
+    font-size: 0.65rem;
+    padding: 0.4rem 0.75rem;
+  }
+
+  .section-header h2 {
+    font-size: 2rem;
+  }
+
+  .stat .val {
+    font-size: 2.5rem;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebade",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "ebade - Agent-First Framework. The first framework designed for AI agents, readable by humans.",
   "type": "module",
   "main": "cli/scaffold.js",
@@ -35,7 +35,9 @@
     "url": "https://github.com/hasankemaldemirci/ebade/issues"
   },
   "dependencies": {
+    "chokidar": "^5.0.0",
     "ora": "^9.0.0",
+    "prompts": "^2.4.2",
     "yaml": "^2.3.4"
   },
   "engines": {

package/packages/vscode-extension/README.md

@@ -0,0 +1,42 @@
+# ebade VS Code Extension
+
+Syntax highlighting, snippets, and language support for `.ebade.yaml` files.
+
+## Features
+
+### 🎨 Syntax Highlighting
+- Keywords: `project`, `pages`, `api`, `data`, `design`
+- Decorators: `@page`, `@intent`, `@requires`
+- Strings, numbers, booleans
+- Comments
+
+### ✨ Snippets
+| Prefix | Description |
+|--------|-------------|
+| `ebade-project` | Full project template |
+| `ebade-page` | New page definition |
+| `ebade-api` | New API endpoint |
+| `ebade-data` | New data model |
+| `ebade-component` | Component reference |
+
+## Installation
+
+### From VSIX (Local)
+```bash
+cd packages/vscode-extension
+npx vsce package
+code --install-extension ebade-*.vsix
+```
+
+### From Marketplace (Coming Soon)
+Search for "ebade" in VS Code Extensions.
+
+## Usage
+
+1. Create a file with `.ebade.yaml` extension
+2. Start typing `ebade-` to see available snippets
+3. Enjoy syntax highlighting! 🎉
+
+---
+
+Built with 💜 by the ebade team.

package/packages/vscode-extension/images/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#4F46E5"/>
+  <text x="50%" y="52%" dominant-baseline="middle" text-anchor="middle" 
+        font-family="system-ui, -apple-system, sans-serif" 
+        font-size="22" font-weight="900" fill="white">e</text>
+</svg>

package/packages/vscode-extension/language-configuration.json

@@ -0,0 +1,24 @@
+{
+  "comments": {
+    "lineComment": "#"
+  },
+  "brackets": [
+    ["{", "}"],
+    ["[", "]"]
+  ],
+  "autoClosingPairs": [
+    { "open": "{", "close": "}" },
+    { "open": "[", "close": "]" },
+    { "open": "\"", "close": "\"" },
+    { "open": "'", "close": "'" }
+  ],
+  "surroundingPairs": [
+    ["{", "}"],
+    ["[", "]"],
+    ["\"", "\""],
+    ["'", "'"]
+  ],
+  "folding": {
+    "offSide": true
+  }
+}

package/packages/vscode-extension/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "ebade",
+  "displayName": "ebade - Agent-First Framework",
+  "description": "Syntax highlighting and snippets for ebade (.ebade.yaml) files",
+  "version": "0.1.0",
+  "publisher": "hasankemaldemirci",
+  "engines": {
+    "vscode": "^1.85.0"
+  },
+  "categories": [
+    "Programming Languages",
+    "Snippets"
+  ],
+  "keywords": [
+    "ebade",
+    "agent-first",
+    "ai",
+    "yaml",
+    "framework"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hasankemaldemirci/ebade"
+  },
+  "contributes": {
+    "languages": [
+      {
+        "id": "ebade",
+        "aliases": [
+          "ebade",
+          "ebade-yaml"
+        ],
+        "extensions": [
+          ".ebade.yaml"
+        ],
+        "configuration": "./language-configuration.json"
+      }
+    ],
+    "grammars": [
+      {
+        "language": "ebade",
+        "scopeName": "source.ebade",
+        "path": "./syntaxes/ebade.tmLanguage.json"
+      }
+    ],
+    "snippets": [
+      {
+        "language": "ebade",
+        "path": "./snippets/ebade.json"
+      }
+    ]
+  }
+}

package/packages/vscode-extension/syntaxes/ebade.tmLanguage.json

@@ -0,0 +1,54 @@
+{
+  "name": "ebade",
+  "scopeName": "source.ebade",
+  "fileTypes": ["ebade.yaml"],
+  "patterns": [
+    { "include": "#comments" },
+    { "include": "#keywords" },
+    { "include": "#decorators" },
+    { "include": "#strings" },
+    { "include": "#numbers" },
+    { "include": "#booleans" },
+    { "include": "#keys" }
+  ],
+  "repository": {
+    "comments": {
+      "match": "#.*$",
+      "name": "comment.line.number-sign.ebade"
+    },
+    "keywords": {
+      "match": "\\b(project|pages|api|data|design|auth|components|intent|path|methods|outcomes|requires|style|colors|font|borderRadius|type|version|name)\\b",
+      "name": "keyword.control.ebade"
+    },
+    "decorators": {
+      "match": "@(page|intent|requires|outcomes|data|validate|style|compose|on|expects)\\b",
+      "name": "entity.name.function.decorator.ebade"
+    },
+    "strings": {
+      "patterns": [
+        {
+          "match": "'[^']*'",
+          "name": "string.quoted.single.ebade"
+        },
+        {
+          "match": "\"[^\"]*\"",
+          "name": "string.quoted.double.ebade"
+        }
+      ]
+    },
+    "numbers": {
+      "match": "\\b[0-9]+\\.?[0-9]*\\b",
+      "name": "constant.numeric.ebade"
+    },
+    "booleans": {
+      "match": "\\b(true|false|required|optional|public|private)\\b",
+      "name": "constant.language.ebade"
+    },
+    "keys": {
+      "match": "^\\s*-?\\s*([a-zA-Z_][a-zA-Z0-9_-]*)\\s*:",
+      "captures": {
+        "1": { "name": "variable.other.key.ebade" }
+      }
+    }
+  }
+}