Agent Instructions and Bootstrap Components

Hello,

We started using AI tools intensively about 1.5 years ago. Initially, we used Gemini and Claude for creating specifications, generating concept mocks and UI mocks. That was an OK experience. Then we subscribed to Claude Code (Pro plan) and started building applications. Quite quickly, we realized that Claude (or Gemini or Codex) are quite adept at creating a lot of code quickly but they aren’t always consistent. They don’t seem to modularize well, nor do they always remember past decisions. Playing around with Claude and Gemini on a number of projects, we incrementally created instructions over time to address the shortcomings we observed. Every time, we ran into a situation where a coding agent didn’t output code, solve a problem or apply a common pattern in a way we expected, we added new instructions.

These instructions are now in the repository:

https://github.com/priyavijaikalyan2007/instructions

Please fork, tune, modify, combine and use to your benefit. This repository is set up as a template repository, so, if you are starting a new project, you can use this repository to create your own.

One side benefit of our tinkering is a set of reusable UI components based on Bootstrap 5. This is an outcome of coding agents not being consistent. We found for example that, across four different sub-apps in the same project, toolbars would be ordered differently, or UI code would be reimplemented (each time differently), behaviors would be inconsistent and subtle bugs would persist despite repeated attempts to fix them. At that point, we embarked on an effort to create a complete set of standalone, reusable components.

These components are now in the repository:

https://github.com/priyavijaikalyan2007/b2btheme

Please fork, tune, modify, combine and use to your benefit. The built outputs are published to a Cloudflare hosted CDN. Please see the README in the repository for additional details.

A word of caution: The components & instructions are living and evolving. Each commit is auto-built and auto-pushed to the CDN. If you do want to take a production dependency, we can look into creating a separate production copy that evolves more slowly. That might take more time.

A note on DiagramEngine / Shape Studio: The DiagramEngine component has not yet been tested in an actual application (except the demos). Consequently, we are not yet sure about how well it works. There is more work to be done there. It is full featured and was written as a replacement to maxGraph. One of the apps we built encountered a number of missing capabilities which had to be hacked around or patched to build a diagramming + drawing application using maxGraph. DiagramEngine is meant to be a cleaner replacement for maxGraph in that application but as yet untested. Due to that, Shape Studio, which uses the Diagram Engine is not fully tested yet.