Using llms.txt Files to Make Copilot in VS Code Smarter

Let me start off here by saying that I avoid hype trains as much as I possibly can. I don’t “vibe code” but I also don’t sit around making snarky comments about new technologies just because it has flaws. I’m an old coder, but I love it whenever something comes along that makes my life easier.

ChatGPT and Copilot in VS Code often make my life much easier, especially when it comes to learning new things. But it has its flaws.

LLM Flaws

I struggled recently while building a static websiteut. I am not a web developer, but I wanted full control over my site and, after some research, I chose a combination of DaisyUI 5 and Astro 5 with Decap CMS.

The trouble came before I even started. Astro uses tailwindcss which had a recent major update (v3 to v4) that changed how a lot of things worked. Claude 3.7 Sonnet had been trained on a lot of information out in the wild on the previous version, and it just couldn't sort things out for itself.

I will typically "remind" Copilot of the stacks I'm using and their versions, but for something like DaisyUI and Astro which, while gaining in popularity, aren't as ubiquitous as, say, React, it will still skew its answers away from my stack and make a mess of the code base.

llms.txt

At some point, I stumbled across DaisyUI's LLM setup and it made all the different in the world. DaisyUI publishes a full llms.txt file that Copilot can ingest and use to serve answers to my questions. Copilot was suddenly a DaisyUI ninja.

So, I did what one does and started looking around for llms.txt files for tailwindcss and Astro. Astro has one, but it wasn't complete, and tailwindcss had none at all.

So, I did what one does and figured out how to scrape their website documentation so I could make one of my own. Turns out to be a lot of work.

So, I did what one does and looked around for a tool that already does it. I found firecrawl.dev's LLMs.txt generator and it worked flawlessly!

I generated llms.txt files for both Astro and tailwindcss and committed them here: https://github.com/seanodell/llms_txts

... and Now, a Demo

Before: asking Copilot to make us an avatar component

As you might expect, it assumes we're using React. We're not, and I'm too lazy to explain everything again.

After: with llms.txt files fetched

It goes on for a bit about these stacks, which we don't care too much about at this point, so let's halt the output and ask the same question we asked before.

Exactly what I wanted! Copilot suddenly so much smarter. So much less confused!

The Code

Fetching the llms.txt files in the Copilot Ask chat:

#fetch https://raw.githubusercontent.com/seanodell/llms_txts/refs/heads/main/tailwindcss_4_llms_full.txt

#fetch https://raw.githubusercontent.com/seanodell/llms_txts/refs/heads/main/astro_5_llms_full.txt

#fetch https://daisyui.com/llms.txt

The Enhanced Avatar Component:

---
interface Props {
  src?: string;
  alt?: string;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  status?: 'online' | 'offline' | 'away' | 'busy' | null;
  placeholder?: boolean;
  name?: string;
}

const {
  src,
  alt = "User avatar",
  size = "md",
  status = null,
  placeholder = false,
  name = "User"
} = Astro.props;

// Size mapping
const sizeClasses = {
  xs: "w-8",
  sm: "w-16",
  md: "w-24",
  lg: "w-32",
  xl: "w-40"
};

// Status color mapping
const statusClasses = {
  online: "bg-success",
  offline: "bg-neutral-content",
  away: "bg-warning",
  busy: "bg-error"
};

// Get initials from name
const getInitials = (name: string) => {
  return name
    .split(' ')
    .map(word => word[0])
    .join('')
    .toUpperCase()
    .substring(0, 2);
};
---

<div class="avatar relative">
  <div class={`${sizeClasses[size]} rounded-full ring ring-primary ring-offset-base-100 ring-offset-2 overflow-hidden`}>
    {placeholder || !src ? (
      <div class="bg-neutral text-neutral-content flex items-center justify-center w-full h-full">
        {getInitials(name)}
      </div>
    ) : (
      <img src={src} alt={alt} />
    )}
  </div>

  {status && (
    <span class={`absolute bottom-0 right-0 ${sizeClasses[size] === 'w-8' ? 'w-2 h-2' : 'w-3 h-3'} ${statusClasses[status]} border-2 border-base-100 rounded-full`}></span>
  )}
</div>