DEV Community: Jasmin Virdi

VibeBurst: Chrome extension to redesign website vibe!

Jasmin Virdi — Wed, 04 Mar 2026 08:23:16 +0000

DEV Weekend Challenge: Community

Jasmin Virdi

Mar 1

VibeBurst: I Built a Chrome Extension That Lets AI Redesign Any Website's Vibe

#showdev #devchallenge #weekendchallenge

Comments 9

3 min read

VibeBurst: I Built a Chrome Extension That Lets AI Redesign Any Website's Vibe

Jasmin Virdi — Sun, 01 Mar 2026 23:03:37 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

You know that feeling when you've been staring at GitHub for 6 hours straight and everything just looks... the same? Every site, same vibe, same boring UI. Dark mode if you're lucky. Maybe someone made a theme extension for that one specific site. Cool.

But what if you could just throw a whole aesthetic onto any site? Like, cyberpunk GitHub at 2am because why not. Glassmorphism on your docs. Brutalist Hacker News — which honestly already looks like that anyway.

Yeah, that's what I built.

What I Built

VibeBurst is a Chrome extension. You click it, pick a theme, and AI restyles the entire page with custom CSS. Not some generic stylesheet that breaks everything — it actually reads the page and generates CSS that makes sense for that specific site.

The four themes:

⚡ Cyberpunk — dark backgrounds, neon cyan and magenta glows, monospace fonts
🔮 Glassmorphism — frosted glass aesthetic, soft purple and teal, airy and light
🧱 Brutalist — maximum contrast, pure black and white, bold red accents, zero ornamentation
🌅 Retro Wave — warm 80s sunset gradients, neon pink and sky blue, synthwave nostalgia

Hit Regenerate to get a fresh take. Hit Reset to go back to normal. That's it.

Demo

Here's is simple demo and screenshots of how this works on different websites.

Same View in different views:

Code

Github repository link - https://github.com/Jasmin2895/VibeBurst

How I Built It

Stack: Plasmo + TypeScript + React for the extension, Groq API with llama-3.3-70b-versatile for generating CSS. Nothing fancy.
The AI part was honestly the easy bit. The hard part? Making the CSS not destroy the page.

Early versions were a mess. * selector wrecks everything. Touch width/height and the layout's gone. Bad contrast and you can't read anything. Took a lot of trial and error — ended up building a sanitizeCSS function to strip out anything that could break layouts before injecting.

Then there's the fact that most sites barely use semantic HTML. It's all divs and class names. Targeting header or nav does almost nothing on sites like Google. So I had to scan the site's actual stylesheets, find every class setting a background-color, and catch the JS-injected ones too.

Biggest thing that clicked: don't let the AI pick colors for class selectors. Let it style body, h1, button — the semantic stuff. Then grab the body background-color and apply it to all site-specific classes programmatically. That's when things finally stopped looking patchy.

No JS touched. Page works the same. Just looks different.
Weekend project that taught me CSS specificity is painful and theming the web is harder than it should be. 😅

It was an overall great learning experience. Thanks Dev Team for organising this short weekend challenge! 👩‍💻

VibeBurst: I Built a Chrome Extension That Lets AI Redesign Any Website's Vibe

Jasmin Virdi — Sun, 01 Mar 2026 23:03:37 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Yeah, that's what I built.

What I Built

The four themes:

⚡ Cyberpunk — dark backgrounds, neon cyan and magenta glows, monospace fonts
🔮 Glassmorphism — frosted glass aesthetic, soft purple and teal, airy and light
🧱 Brutalist — maximum contrast, pure black and white, bold red accents, zero ornamentation
🌅 Retro Wave — warm 80s sunset gradients, neon pink and sky blue, synthwave nostalgia

Hit Regenerate to get a fresh take. Hit Reset to go back to normal. That's it.

Demo

Here's is simple demo and screenshots of how this works on different websites.

Same View in different views:

Code

Github repository link - https://github.com/Jasmin2895/VibeBurst

How I Built It

No JS touched. Page works the same. Just looks different.
Weekend project that taught me CSS specificity is painful and theming the web is harder than it should be. 😅

It was an overall great learning experience. Thanks Dev Team for organising this short weekend challenge! 👩‍💻

VibeBurst: I Built a Chrome Extension That Lets AI Redesign Any Website's Vibe

Jasmin Virdi — Sun, 01 Mar 2026 23:03:37 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Yeah, that's what I built.

What I Built

The four themes:

⚡ Cyberpunk — dark backgrounds, neon cyan and magenta glows, monospace fonts
🔮 Glassmorphism — frosted glass aesthetic, soft purple and teal, airy and light
🧱 Brutalist — maximum contrast, pure black and white, bold red accents, zero ornamentation
🌅 Retro Wave — warm 80s sunset gradients, neon pink and sky blue, synthwave nostalgia

Hit Regenerate to get a fresh take. Hit Reset to go back to normal. That's it.

Demo

Here's is simple demo and screenshots of how this works on different websites.

Same View in different views:

Code

Github repository link - https://github.com/Jasmin2895/VibeBurst

How I Built It

No JS touched. Page works the same. Just looks different.
Weekend project that taught me CSS specificity is painful and theming the web is harder than it should be. 😅

It was an overall great learning experience. Thanks Dev Team for organising this short weekend challenge! 👩‍💻

Rekall — A Context Recovery CLI That Uses GitHub Copilot as Its AI Brain

Jasmin Virdi — Mon, 26 Jan 2026 17:21:05 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Rekall is a zero-config CLI that helps developers recover context after meetings, breaks, and context switches. Instead of piecing together git status, git log, and git stash list every time you sit back down — you type one word: rekall

Rekall collects your entire project state — branch, commits, uncommitted changes, stashes, TODOs, FIXMEs — and sends it to GitHub Copilot CLI as a structured prompt. Copilot acts as the AI analysis engine, synthesizing raw data into a concise summary, suggested next step, and blockers.

Most cases we use Copilot to write code. Rekall uses Copilot to power the product — four commands, each with its own Copilot touchpoint:

rekall context — Copilot synthesizes your project state into summary, next step, and blockers
rekall pr — Copilot analyzes PR changes with risk assessment and review questions
rekall explain — Copilot explains your recent commits in natural language
rekall suggest — Copilot generates commit messages or branch names from your changes
rekall onboard - A quick cheat sheet to understand the project structure and what's new.

The tool is built in TypeScript and works with or without Copilot installed — gracefully falling back to intelligent rule-based analysis.

Demo

GitHub: https://github.com/Jasmin2895/rekall
npm package link: https://www.npmjs.com/package/rekall-cli
npm: npm install -g rekall-cli
Try instantly: npx rekall-cli

Rekall with Github Copilot CLI

Rekall without Github Copilot CLI


$ rekall explain              # Copilot explains your recent work
$ rekall suggest              # AI commit message suggestions
$ rekall pr 1                 # Give summary overview of the PR
$ rekall onboard              # Quick cheat sheet for project
$ rekall suggest "add dark mode" --type branch  # Branch name suggestions
$ rekall --format json | jq '.analysis'         # JSON for scripting

Quick Test

cd any-git-repo
npx rekall-cli
npx rekall-cli explain
npx rekall-cli suggest "your feature idea" --type branch

Requirements: Node.js 18+, Git. Optional: gh CLI for PR mode, gh extension install github/gh-copilot for AI-powered analysis.

My Experience with GitHub Copilot CLI

Rekall doesn't just use Copilot CLI during development — it uses Copilot CLI as the product itself. Every command pipes collected project data into gh copilot and parses what comes back. That's the entire architecture.

When you run rekall, your git state and code issues get packed into a prompt and sent to Copilot CLI via execute command. The response is parsed into sections — SUMMARY, NEXT_STEP, BLOCKERS — and rendered as clean terminal output. All four commands follow this same pipeline.

If Copilot isn't installed, Rekall doesn't break. It falls back to a rule-based engine that prioritizes FIXMEs, scores PR risk by file type, and generates commit messages from conventional patterns. It works — but Copilot's output is noticeably better. The tool tells you which mode you're in so there's no guessing.

Building With Copilot CLI

The most useful part of Copilot CLI during development was testing my own prompts. I'd run gh copilot -p with a rough prompt explain with different prompt structures directly in the terminal, see what came back, tweak the wording, and repeat — before writing any parsing code. That saved me from a lot of trial-and-error.

It also caught a shell escaping issue I would've missed. I was passing raw project data (file paths, commit messages) into the prompt string, and Copilot helped me think through what characters could break the shell command. That's how the escaping logic ended up covering backslashes, quotes, dollar signs, and backticks.

My initial error handling was too optimistic, only checking if Copilot was "not installed." During testing, I hit a variety of edge cases: API quota limits (402), authentication errors, and generic "no quota" messages. Each time, my tool (Rekall) tried to parse the error as a valid response.

Using the CLI, I mapped out every failure mode gh copilot could return. This allowed me to build a comprehensive pattern list that catches these exceptions silently and lets the tool fallback gracefully.

Looking back, the thing that worked best was treating Copilot CLI as a conversation partner I could test ideas against — right there in the terminal, no context switching needed.

It was an overall great learning experience thanks to Dev and Github Team for organising it. 👩‍💻

[Boost]

Jasmin Virdi — Thu, 03 Jul 2025 15:15:56 +0000

Jasmin Virdi

Jul 1 '25

Quizbit: Turn Any Article Into an Engaging Slack Quiz.

#devchallenge #runnerhchallenge #ai #machinelearning

Comments

3 min read

Quizbit: Turn Any Article Into an Engaging Slack Quiz.

Jasmin Virdi — Tue, 01 Jul 2025 22:38:58 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I built an AI-powered "Quiz Master" for Slack using a Runner H workflow. This automation takes any online article and instantly generates an engaging, five-question quiz based on its content. The Quiz Master then posts the quiz directly to a designated Slack channel, one question at a time, creating a fun and interactive learning experience for the team. After a brief pause, it reveals the correct answers with explanations, making it a seamless way to test and reinforce key takeaways from shared reading materials. This solves the problem of "did they actually read it?" by turning passive information consumption into an active and gamified group activity.

Demo

Here is the demo of setting up a Sample Slack Quiz using an article.

Here is the final output view in Slack.

How I Used Runner H

This entire workflow is powered by a single, carefully crafted Runner H prompt. The AI agent handles the content analysis, question generation, formatting, and timed message delivery.

Here is the exact prompt I used:

Based on the article at {source_url}, generate a 5-question quiz that tests the main insights and key data points from the text.

For each question, provide the question in bold using Slack’s mrkdwn format, followed by four answer choices, each prefixed with a number emoji (e.g., :one:, :two:). Structure the quiz so each question and its answer options are sent as a separate message to {slack_channel}. Ask the channel Id and source_url of article from user to post.

After 30 seconds, send a follow-up in the thread of last message listing the correct answers and providing brief explanations for each.

Ensure each message is clearly formatted for Slack and suitable for a gamified experience. If Zapier’s Slack integration supports Block Kit elements, include interactive buttons for answer selection; otherwise, present answer options as plain text

You can view the Runner H session here:

Surfer 2: The Next Generation of Cross-Platform Computer-Use Agents - H Company

We are a frontier AI research company that designs, builds, and deploys cost-efficient agentic AI systems directly into enterprises’ core workflows and processes.

hcompany.ai

Use Case & Impact

This AI Quiz Master has several powerful real-world applications:

Corporate Training & HR: HR and training teams can use this to quickly assess comprehension of training materials, new company policies, or onboarding documents. It makes mandatory reading more engaging.

Content & Marketing Teams: After sharing an important industry report or a new company blog post, marketing teams can use the quiz to reinforce key findings and ensure everyone is aligned on the core message.

Educational Settings: Teachers and study groups can use it to create quick quizzes from articles, research papers, or news items to facilitate discussion and test knowledge.

General Team Engagement: It serves as a great tool for team-building. You can run a weekly quiz on a fun or interesting article to foster a more interactive and connected team environment in Slack.

The primary impact is efficiency and engagement. It saves managers and team leads significant time by automating the creation of learning materials. More importantly, it transforms passive reading into an active, collaborative, and fun experience, which significantly boosts information retention and team participation.

Social Love

// Detect dark theme var iframe = document.getElementById('tweet-1940430429494083615-784'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1940430429494083615&theme=dark" }

Huge thanks to Dev and Runner H Team for this hackathon! I really enjoyed participating. It was a refreshing and different kind of challenge, focusing on the creative art of AI prompting rather than just lines of code.

Subscription Intelligence Hub - Your financial emails Knowledge Hub!

Jasmin Virdi — Wed, 04 Jun 2025 22:33:41 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

We often have come across this problem where we sign up for stuff and later wonder, "Why am I paying for this again?" and also we have so many bills paid via different payments apps and email is the only place where we get notifications from all these app payments. I built the Subscription & Purchase Intelligence Hub to fix that!

Just forward your financial emails such as e-receipts (even PDFs!) and related email chats to one Hub address.

AI figures out the financials: It uses OpenAI to grab the vendor, product, price, and category from your receipts. It also converts receipts uploaded in any currency into USD.
It gets the "vibe": For your discussion emails, it uses NLP to find key comments and even tells you if the sentiment was good (👍), bad (👎), or so-so (😐).
Everything connects: The Hub links your spending to these contextual insights automatically.
Your personal view: Pop in the email you forwarded from (no complicated sign-ups!) and see your finances with the "why" clearly laid out on a simple dashboard.
Basically, it helps you actually understand your spending, not just see the numbers.

Demo

You can access the app live app here

Steps to use the app.

Forward all your bills and reciepts to postmtest06@gmail.com to analyse.
Go to the Dashboard page

You will see your financial summary categorised by month spending and spending by category/vendor

Here we also show the Financial Items containing context of financial discussion or info derived from email.

Detailed financial card item open view.

If the Item is recurring event like monthly or yearly subscription we show the next payable date. There is an Add Renewal to calendar button which generates downloadable .ics file which can be used to create event in calendar.

For reminders I have setup a slack channel where i post regular updates of expenses. This was a feature to showcase that if this is managed by team they can handle or post regular updates of the expenses of teammates in slack channel for subscriptions renewals. Link to slack channel

Code Repository

Link to the Github repo

How I Built It

I really wanted to make financial tracking less about just numbers and more about the story – the 'why' behind what we spend. My goal was to turn that email clutter into actual understanding.

I created a Node.js/Express backend with a PostgreSQL database, and a React frontend. The first, and most crucial, step was email ingestion. This is where Postmark truly shone for me. Setting up the inbound webhook was incredibly straightforward. It just worked, consistently delivering emails as well-structured JSON – even PDF attachments. OpenAI API does the heavy lifting on parsing financial details from all sorts of emails and PDFs. The natural NLP library helps dig out key contextual sentences from discussions and figures out the sentiment.

Here is the backend process preview.

It was a fun challenge to combine these tools to turn messy email data into clear, actionable insights!

I have also thought about enhancing this in future by adding Google calendar integration where the user can directly add reminder in their calendar instead of downloading ics file.

Thank you to PostMark and Dev.to team for bringing this challenge to us.

OpsGaurd - A Smart Access AI-Driven Tenant-Safe.

Jasmin Virdi — Mon, 05 May 2025 06:44:15 +0000

This is a submission for the Permit.io Authorization Challenge: AI Access Control

Note - Updated the demo link url - https://ops-gaurd-x5ha.vercel.app/

What I Built

I created "OpsGaurd - Smart Access AI", a solution that combines AI and automated workflows to simplify document access and approval for teams. It allows users from different tenants (like Product and Engineering) to request access to documents while keeping everything secure and organized. The system uses Permit.io to manage roles and permissions, making sure everyone has the right level of access without needing manual approval at every step.

What Problem Does It Solve?

This tool makes managing access to documents much easier, especially in environments with multiple teams. It takes care of the tricky part—deciding who gets to access what—automatically, saving time and ensuring that everything is compliant with data security rules.

Demo

You can check out the live demo here: View the demo

Happy Path Flow
Approval and denial flow Here’s a quick peek at the app:

Login screen - Users can log in, selecting their team (Product or Engineering). If user entry is not in permit than they will be not allowed to access the portal.
AI Assitant Agent
Request Resource Access

Saved Documents Lis updated by people
Access approval Page

Project Repo

Here is the github project link

My Journey

Building "OpsGaurd - Smart Access AI" was a great learning experience! I had to tackle a few tricky problems along the way—like figuring out how to handle different roles and permissions for users across multiple tenants. Thanks to Permit.io, I was able to automate the approval process and simplify access control.

Authorization for AI Applications with Permit.io

To ensure that access is only granted to the right users, I set up Permit.io to manage fine-grained permissions across different tenants like Product and Engineering. I used Permit.io’s role-based access control (RBAC) to define who can view or update documents. When a user without sufficient access tries to perform a restricted action, the system prompts them to request access. That request is then manually reviewed and approved by an admin from the default tenant. Once approved, the user's role is updated, and they can proceed based on their new permissions.

Here’s a simple flow to show how it all works:

Tale Craft: Where Stories Come to Life, in Every Language.

Jasmin Virdi — Mon, 27 Jan 2025 01:11:28 +0000

This is a submission for the Agent.ai Challenge: Full-Stack Agent (See Details)

What I Built

TaleCraft is your storytelling companion, here to turn your ideas into vivid, engaging tales. Whether you dream of an adventurous quest, a magical fairy tale, or a gripping mystery, TaleCraft brings your imagination to life with rich, descriptive narratives. It’s not just about words, it’s about creating experiences that feel personal and immersive. With the ability to craft stories in multiple language. Just share your theme, details, and preferred language, and let TaleCraft do the rest—creating stories that are as dynamic and diverse as you are.

What are the features of this Agent ?

User selects the theme of the story
Then user is asked to provide a little description as to what they are looking in the story like places, seasons and characters name etc.
User is asked about the language preference in which they want to hear the story.
The story output is generated in audio format in all the languages which user has selected.

In order to achieve the stories in different languages I have used For loop Run process.

Demo

Link to the bot - https://agent.ai/agent/tale_craft

Here is the demo video of agent functionality.

Agent.ai Experience

Agent.ai is very cool platform which provides great ease for the development of Agents. The documentation is really great along with video resources which helped me to ramp up quickly.
The action types provided covers lot of area and invoking agents and connecting them was easy and a smooth process.

In terms of the challenges faced was while playing around with actions I came across calling and deploying serverless functions and could not find a way to debug them from the Agent.ai platform. The hubspot blog does not seems to generate the article.

Apart from the overall experience was great and I learnt a lot during the process.

Huge thanks to Dev Team and Agent.ai team for conducting this hackathon.

MealMate - Your all-in-one meal planner, nutrition guide, and grocery assistant

Jasmin Virdi — Sun, 26 Jan 2025 00:44:10 +0000

This is a submission for the Agent.ai Challenge: Assembly of Agents (See Details)

What I Built

As part of this hackathon I have built MealMate which is like having a personal food assistant that combines three awesome agents —RecipePro, NutriBot, and PantryPal — into one easy agent. In order to acheive this I have used Spoonacular API which helps you find great recipes, check out their nutritional details, and make grocery lists with everything you need. It curates new meal ideas, track meal nutrition, or just figure out what to buy at the store, MealMate makes it all way easier. It’s built to save you time and keep things healthy, so you can enjoy cooking without the stress.

The bot has the following features.

Finds the recipe
Provide nutrition Analysis of the recipe
Find wide variety of packed foods.
Generate the audio support for MealMate article.

Now lets look at the demo.

Demo

In order to built MealMate I have created three small Agents.

RecipePro Agent - https://agent.ai/agent/recipepro-agent (It helps to generate recipes)
NutriBot Agent - https://agent.ai/agent/nutribot (Predicts the nutritions in the requested recipe and generate cumulative summary)
PantryPal Agent - https://agent.ai/agent/pantrypal (It helps to find relevant items on the Grocery store)

My main submission is MealMate - https://agent.ai/agent/mealmate

Here is the demo of the working agent.

Update - You can now listen to Recipe audio in the article instead of downloading it.

Agent.ai Experience

In terms of the challenges faced was while playing around with actions I came across calling serverless functions and could not find a way to debug them from the Agent.ai platform. The hubspot blog does not seems to generate the article.

Apart from the overall experience was great and I learnt a lot during the process.

Huge thanks to Dev Team and Agent.ai team for conducting this hackathon.

Find Jobs Plugin

Jasmin Virdi — Sun, 28 Apr 2024 22:28:19 +0000

This is a submission for the Coze AI Bot Challenge: Trailblazer.

What I Built

Hi Everyone,

As part of this challenge I have worked on creating two plugins to find the list of jobs using different public which are FindWork and Adzunza.

There are a few plugins available on Coze plugin store which helps us get the list of Jobs like Google jobs but the results returned does not contains jobs across the web. I have created a Coze Bot called Job Finder which will help us to find all the jobs listed on these portals.

Demo

You can find the two plugins on the Coze Plugin Store:

The FindJobsAdzuna plugin returns list of job matching the role provided the api key, id and results per page value.

The FindJobFindWork plugin returns list of jobs provided the token.

The fetch_relevant_jobs custom workflow I built for Job Finder bot uses these two plugins.

Journey

Working on plugins helped to understand the integration process and laid a good foundation for building more complex plugin. It helped to understand the entire input and output process specially while using plugins nodes in workflow.

The entire Coze platform is easy to understand the features and steps along with Coze helpbot was a big helping hand for the onboarding process with framework.

Thanks.