Ingesting into LLMs | Cynosure Design System

Why provide context

LLMs trained on public code have seen Bootstrap 5 and Handlebars, but they have not seen Cynosure's specific conventions — the c- BEM prefix, the @shared annotation pattern, the two-layer JavaScript architecture, the Cynosure brand token names, or the WordPress block compilation workflow. Without context, an LLM produces generic output that requires significant correction.

With the right context injected upfront, an LLM can:

Generate correctly structured Handoff components (four files, correct property schema)
Use Bootstrap 5 utility classes instead of writing custom CSS
Reference Cynosure brand tokens (var(--color-primary-orange)) instead of hardcoded hex
Write script.js files that follow the @shared annotation and multi-instance patterns
Generate WordPress-compatible property schemas for use with handoff-wordpress

Recommended context files

File	When to use
`AGENTS.md`	Creating or modifying components; working in an AI coding tool (Cursor, Copilot)
`llms.txt`	Quick reference prompting in ChatGPT or Claude; includes token values and block list
Specific doc pages	When working on a specific concern (selects, popups, WordPress blocks)

Prompt patterns

Creating a new block component

Code

Context: [paste contents of AGENTS.md]

Task: Create a new Handoff block component called "content-two-column" that displays
two columns of rich text with an optional image in one column. Properties needed:
- headline (text)
- left_content (richtext)
- right_content (richtext)
- image (image, optional)
- image_side (select: left | right, default: right)

Follow the component conventions in AGENTS.md exactly:
- Use Bootstrap 5 utility classes in the Handlebars template
- Use CSS custom properties from the token system for any colors
- Write a script.js with @shared annotations if JavaScript is needed
- Support the c- BEM prefix for any custom SCSS classes

Modifying an existing block

Code

Context: [paste contents of AGENTS.md]
Component files: [paste {name}.js, template.hbs, style.scss, script.js]

Task: Update the hero-basic block to add an optional video background property.
When video_url is set, render an autoplay muted looping <video> element behind
the hero content. Add a .c-hero-basic--video modifier to the section element.
Use prefers-reduced-motion to pause the video when reduced motion is preferred.

Working with WordPress blocks

Code

Context: [paste contents of AGENTS.md]
Context: [paste contents of guidelines/ai/wordpress]

Task: I have a Handoff component called "downloads-list" that uses selects.js and
popup.js. Generate the handoff-wp.config.json entry for this block that maps its
'downloads' array property to a WordPress post type query pulling from the
'download' post type. Use the renderMode: "mapped" with fieldMapping for title,
file_url, and category taxonomy.

Asking about architecture

Code

Context: [paste llms.txt]

Question: How should I add a new slider block to the Cynosure Design System?
What files do I need to create, what Slick configuration should I use, and how do
I make sure the slider is accessible?

Effective context strategies

Include AGENTS.md at the start of a conversation

Paste AGENTS.md as your first message or attach it as a context file. Do not summarize it — the specific class names, file paths, and code examples are what enable correct output.

Be explicit about the stack

If you cannot provide context, state the stack explicitly:

Bootstrap 5 utility classes (not Tailwind, not inline styles)
Handlebars .hbs templates (not React, not Vue)
jQuery + vanilla JavaScript (not jQuery alone, not React hooks)
var(--color-*) CSS custom properties from the Cynosure token system (not hardcoded hex)
c- BEM prefix for all component class names

Provide an existing component as example

For complex blocks, paste the files of an existing similar block alongside your request. The LLM will pattern-match the structure rather than inventing its own.

Iterate in small steps

Break component creation into steps:

"Write the .js config file with the property schema"
"Write the Handlebars template.hbs using those properties"
"Write the minimal style.scss using CSS custom property tokens"
"Write the script.js with @shared annotations for shared utilities"

Common LLM mistakes to watch for

Mistake	Correct approach
Hardcodes `#ff4713`	Use `var(--color-primary-orange)`
Uses Tailwind classes (`text-sm`, `font-semibold`)	Use Bootstrap 5 utilities (`small`, `fw-semibold`)
Writes React or JSX	Write Handlebars `.hbs` templates
Queries `document.getElementById`	Use `block.querySelector('.js-*')` scoped to the current instance
Initializes a component once globally	Wrap in `querySelectorAll().forEach(block => { ... })`
Adds `@import 'main.scss'` to component SCSS	Never import the shared stylesheet — Handoff injects it automatically
Uses `id="..."` on JavaScript hook elements	Use `class="js-*"`
Leaves a bare import in `script.js`	Add a JSDoc header with `@shared` annotation and `@see` links
Generates BEM classes without the `c-` prefix	All component classes must start with `c-{component-name}`

Tool-specific tips

Cursor

Place AGENTS.md at the root of your implementation project. Cursor reads it automatically for @AGENTS.md references. You can also pin it in .cursor/rules/:

Markdown

<!-- .cursor/rules/cynosure.md -->
---
globs: ["**/*.hbs", "**/script.js", "**/style.scss"]
---
@AGENTS.md

GitHub Copilot

Use @workspace to include repo context, then reference AGENTS.md explicitly in your prompt. Copilot Chat in agent mode reads AGENTS.md from the project root automatically.

Claude Projects / ChatGPT Projects

Add AGENTS.md and llms.txt as project knowledge files. They will be included automatically in every conversation.