Tips for Prompting LLMs with Etch

I did a quick test this morning and was able to create an accessible tabs component in about 3 minutes with Grok. This kind of thing showcases the true power of Etch, given the user's ability to paste HTML, Etch's ability to parse selectors from pasted HTML, and the ability to attach JS directly to an element.

It's pretty wild how easy this is.

With that said, here are some quick tips for making the process as easy as possible:

---

Example: Accessible Tabs Component CSS

.tabs {
  max-width: 600px;
  margin: 0 auto;

  .tabs__list {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
  }

  .tabs__trigger {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;

    &:hover {
      color: #111827;
    }

    &[aria-selected='true'] {
      color: #111827;
      border-bottom: 2px solid #2563eb;
    }

    &[tabindex='-1'] {
      outline: none;
    }
  }

  .tabs__content {
    padding: 16px;
    display: none;

    &[aria-hidden='false'] {
      display: block;
    }
  }
}

---

Best Practices for Prompting LLMs with Etch

• Use a clear initial prompt and include links to specific documentation that the LLM can use as its technical guide. For example, include the link to the shadcn tabs page as well as the link to the tabs documentation.

• In your initial prompt, tell the LLM that you have the following additional requirements:

  • Only provide necessary code for the component and nothing else.
  • Use vanilla JS.
  • Comment the JS for clarity.
  • Retain all accessibility features.
  • Add any accessibility features that may be missing.
  • Use a minimal amount of styling — no opinionated CSS.
  • Use BEM structure for class names.
  • Use vanilla CSS nesting techniques.

• Always add the HTML first and make sure you only extract the necessary HTML that is returned. It'll almost always create HTML for a full page. You don't need that. Find the HTML for your component and copy that out.

• For CSS: Since you asked it to use nesting, you can copy all the CSS starting from the FIRST PROPERTY LINE (the parent selector is already in Etch by default) to the FINAL NESTED BRACKET and then paste it in Etch on the parent selector.

• Once the component is working, label everything in the structure panel for proper organization. When you select an element just look at the class name and use that for the labeling. (We're going to try and engineer auto-labeling for BEM on pasted HTML as part of Auto-BEM in the future).

• If you run into a situation where the HTML has to change, but you've already labeled everything and attached JS, etc., it's VERY IMPORTANT (if you don't want to lose your labels) that you copy the HTML out of Etch (which should now have Etch's metadata in it) and paste it back into the LLM and tell the LLM to make the necessary changes, but to retain all attributes from the provided HTML. This will ensure that all the HTML the LLM gives you moving forward retains your Etch label data as you continue to iterate.

---

Have fun!