9 posts tagged with "developer-tools"

Building an AI agent with Azure Cosmos DB is easy to demonstrate. Building the secure, observable, and deployable application around that agent is the difficult part.

A real customer-facing agent needs more than a prompt and a model endpoint. It needs durable memory, tenant isolation, authentication, citations, diagnostics, tests, deployment infrastructure, and a safe way to move from a local prototype to production.

I wanted to see how much of that work could be removed from the critical path, so I tried the create-cosmos-agent starter from beginning to end. I generated a customer-support agent, ran it against the Azure Cosmos DB Linux emulator, stored a customer preference, retrieved it through the chat experience, verified user isolation, inspected diagnostics, and ran the complete validation suite.

The result was a working full-stack application without an Azure subscription, model API key, or cloud resource.

Finding a developer by name is easy. Finding the right developer for a problem is much harder.

A GitHub profile can show repositories. Stack Overflow can show answers. A professional network can show job titles. But none of those views, on their own, answer questions such as:

• Who has recent evidence of working with a specific technology?
• Which developers match the needs of an open-source repository?
• Who is active in a particular region or community?
• Can an AI agent discover a relevant expert without exposing private contact details?

Those questions led me to build DevGlobe, an open-source talent graph for humans and AI agents. What started as an interactive 3D map became a search, data, and consent problem—and Azure Cosmos DB became the foundation that connected those pieces.

Explore DevGlobe and discover developers, contribution opportunities, live coding activity, and agent-ready tools →

The final weekend of September took me to two cities, two developer communities, and two stages with a shared question:

What does it take to move AI agents from impressive demos to experiences developers can trust every day?

On September 26, I spoke at MCP Community Connect in Bengaluru about designing MCP tools around trust and consent. The next day, I joined the Global AI Conference in Chennai to share how we can build an agent-first experience for Azure Cosmos DB.

The talks approached the question from different directions, but they arrived at the same conclusion: an agent is only as useful as the context, boundaries, and developer experience we build around it.

I've spent the last six months writing skills for AI coding agents. Somewhere around month three, I started noticing something uncomfortable: some of our best-intentioned guidance was making things worse. Not on every task — just on enough tasks to make me question whether we were actually helping.

I couldn't prove it. I had gut feelings and a few suspicious eval runs, but nothing concrete enough to point at and say "this is why."

Then I read this paper.

Over the past few months, one prompting pattern has consistently produced better AI agents for me.

Not bigger prompts.

Not more skills.

Just a better separation of responsibilities.

Back in January, I started building skills for AI coding agents — domain-specific guidance that helps agents like GitHub Copilot, Claude, and others produce better code in areas they'd otherwise struggle with. My domain happened to be Azure Cosmos DB, but the lessons apply to anyone writing skills for any technology.

Six months later, what I learned about how to write for AI agents turned out to be far more interesting than the domain knowledge itself.

I recently had the incredible opportunity to join Scott Hanselman on the Azure Developers Show to talk about something I've been deeply passionate about — turning coding agents into Azure Cosmos DB experts with the Agent Kit.

This session was special to me, not just because of the topic, but because of the person I got to share the stage with.

Overview:

I'm excited to announce the release of Angular Agent Kit - a collection of AI coding agent skills designed specifically for Angular developers. This toolkit extends the capabilities of AI coding assistants like GitHub Copilot, Claude Code, Cursor, and Gemini CLI with deep Angular expertise.

What is Angular Agent Kit?​

Angular Agent Kit is a collection of skills that follow the Agent Skills specification. These skills are packaged instructions and scripts that extend AI agent capabilities, enabling them to provide expert-level guidance on Angular development.

The Problem It Solves​

As Angular applications grow in complexity, maintaining performance becomes increasingly challenging. Developers often struggle with:

• Change detection optimization - Understanding when to use OnPush strategy
• Bundle size management - Identifying and eliminating bloat
• Template performance - Writing efficient templates that don't cause unnecessary re-renders
• RxJS patterns - Avoiding memory leaks and implementing efficient async operations

While AI coding assistants are powerful, they sometimes lack the specialized Angular knowledge needed to provide optimal recommendations. Angular Agent Kit bridges this gap.

Available Skills​

angular-best-practices​

The flagship skill contains 45+ rules across 8 categories, prioritized by their impact on application performance:

Installation​

Getting started is simple with a single command:

npx skills add sajeetharan/angular-agent-kit

Usage Examples​

Once installed, skills are automatically available. Simply ask your AI assistant:

Review my Angular component for performance issues

Help me optimize change detection in this component

Optimize this Angular template for better performance

The AI agent will automatically leverage the Angular best practices rules to provide expert-level recommendations.

Compatibility​

Angular Agent Kit works with all major AI coding tools:

• GitHub Copilot - Works seamlessly in VS Code
• Claude Code - Full support for Claude's coding assistant
• Cursor - Enhanced Angular development experience
• Gemini CLI - Google's AI coding assistant
• Any other Agent Skills-compatible tools

Skill Structure​

Each skill in the kit follows a consistent structure:

• SKILL.md - Instructions that trigger skill activation
• AGENTS.md - Compiled rules that agents read
• rules/ - Individual rule files for easy maintenance
• metadata.json - Version and metadata information

Why I Built This​

As someone who works extensively with Angular and AI development tools, I noticed a gap between generic AI coding assistance and Angular-specific expertise. The rules in this kit are distilled from years of Angular development experience, official Angular documentation, and community best practices.

Acknowledgments​

This project was inspired by:

• Vercel's React Best Practices
• The Agent Skills specification
• Angular team's official documentation

Contributing​

Contributions are welcome! If you have Angular best practices that should be included, or improvements to existing rules, please check out the CONTRIBUTING.md file for guidelines.

Get Started Today​

Ready to supercharge your Angular development with AI-powered best practices?

1. Install the skill: npx skills add sajeetharan/angular-agent-kit
2. Open your Angular project
3. Ask your AI assistant for Angular optimization help

Check out the GitHub repository for more details and to star the project if you find it useful!

Have questions or feedback? Feel free to open an issue on GitHub or reach out to me on Twitter!

Overview:

I'm thrilled to introduce Angular Visual Storybook - an interactive learning resource that transforms complex Angular concepts into easy-to-understand visual infographics. Whether you're a beginner starting your Angular journey or an experienced developer looking for quick reference guides, this comprehensive collection has something for everyone.

What is Angular Visual Storybook?​

Angular Visual Storybook is a static website that provides a comprehensive visual guide to Angular development through 26 beautifully designed infographics. It's built with pure HTML5, CSS3, and JavaScript - no frameworks required! The project is perfect for visual learners and developers who prefer a structured, comprehensive approach to learning Angular.

🔗 Live Demo: sajeetharan.github.io/angular-graphic

🌟 Features​

• 📚 26 Comprehensive Topics - From Angular Overview to AI Integration
• 🎨 Beautiful Design - Modern, responsive UI with smooth animations
• 🔒 Image Protection - Multiple layers of protection to prevent unauthorized downloading
• 📱 Mobile Friendly - Fully responsive design that works on all devices
• ♿ Accessible - WCAG-compliant with keyboard navigation support
• 🚀 Performance Optimized - Fast loading with intersection observers and lazy loading
• 🔍 Search Functionality - Quick search through topics in the sidebar
• 📊 Progress Tracking - Visual progress bar as you scroll through content

Topics Covered​

The storybook covers all major Angular topics from the official Angular documentation:

🛠️ Technologies Used​

What makes this project special is its simplicity:

• Pure HTML5, CSS3, and JavaScript - No frameworks required!
• CSS Grid & Flexbox for responsive layouts
• Intersection Observer API for scroll detection
• Modern ES6+ JavaScript features

Quick Start​

Want to run it locally? It's incredibly simple:

# Clone the repository
git clone https://github.com/sajeetharan/angular-graphic.git
cd angular-graphic

# Using Python
python -m http.server 8000

# Or using Node.js
npx http-server

# Then visit http://localhost:8000

🔒 Image Protection Features​

The website implements multiple layers of image protection:

1. Right-Click Prevention - Context menu disabled on images
2. Drag-and-Drop Blocking - Images cannot be dragged
3. Keyboard Shortcut Blocking - Common save shortcuts are intercepted
4. CSS Protection - User-select and drag properties disabled
5. Visual Feedback - Warning overlay when protection is triggered
6. Mobile Long-Press Protection - Touch events handled to prevent saving

Why I Built This​

Learning Angular can be overwhelming with its extensive documentation and numerous concepts. I wanted to create a resource that:

• Simplifies complex concepts through visual representation
• Provides quick reference for experienced developers
• Offers an engaging learning experience for beginners
• Works offline once loaded - perfect for on-the-go learning

🎨 Customization​

The project is highly customizable. You can easily modify colors by editing CSS variables:

:root {
  --primary-color: #dd0031; /* Angular red */
  --secondary-color: #c3002f; /* Darker red */
  --accent-color: #0066ff; /* Blue accent */
}

Contributing​

Contributions are welcome! If you have ideas for new infographics or improvements:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

🙏 Acknowledgments​

• Content structure inspired by angular.dev
• Infographics created for educational purposes
• Built with ❤️ for the Angular community

Get Started Today​

Ready to learn Angular visually?

• 🌐 Visit the live site: sajeetharan.github.io/angular-graphic
• 📦 Clone the repo: github.com/sajeetharan/angular-graphic

Have feedback or suggestions? Feel free to open an issue on GitHub or reach out to me on Twitter!