feat: add comprehensive AI Agent and LLM integration layer#1
Open
KNIGHTABDO wants to merge 2 commits into
Open
feat: add comprehensive AI Agent and LLM integration layer#1KNIGHTABDO wants to merge 2 commits into
KNIGHTABDO wants to merge 2 commits into
Conversation
|
@jip9e is attempting to deploy a commit to the Andrew Peter Prifer's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR adds an “AI Agent & LLM Integration Layer” to the liquid-dom repo via LLM-facing summaries/specs plus IDE/agent instruction files (Cursor MDC rules, GitHub Copilot instructions, and Clack/Claude Code guidelines) to reduce AI hallucinations and speed up onboarding.
Changes:
- Added
llms.txtandllms-full.txtas high-level and detailed AI-readable references for architecture, constraints, APIs, and math. - Added developer-facing guidance docs (
agents.md,AI_AGENT_GUIDE.md) for agent behavior, task decomposition, and usage. - Added tool-specific instruction/config files for Cursor, GitHub Copilot, and Clack/Claude Code.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| llms.txt | Concise AI entrypoint summary of packages, constraints, and links to deeper docs. |
| llms-full.txt | Expanded “full spec” covering package APIs, math formulations, and example usage. |
| AI_AGENT_GUIDE.md | Human-facing guide for how to apply these AI resources in different tools. |
| agents.md | Agent persona + task protocol + invariants reference card. |
| .github/copilot-instructions.md | Workspace-level Copilot guidance for code generation in this repo. |
| .cursor/rules/core-architecture.mdc | Cursor rules for package boundaries, WebGPU constraints, and scene invariants. |
| .cursor/rules/react-components.mdc | Cursor rules for React layout components, Html sizing modes, and R3F integration patterns. |
| .cursor/rules/animation-system.mdc | Cursor rules for spring/easing math and animation/hook APIs. |
| .cursor/rules/adaptive-tint-blur.mdc | Cursor rules for adaptive blur/tint math, constants, and state management. |
| .clack/instructions.md | CLI-agent instructions for builds/tests and “do not change” math/architecture constraints. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+336
to
+353
| {/* Bridge overlays on top of the R3F WebGPURenderer canvas output */} | ||
| <LiquidGlassR3F.Scene> | ||
| <GlassContainer blur={16} thickness={120}> | ||
| <Glass cornerRadius={16} pointerEvents={true}> | ||
| <Padding insets={16}> | ||
| <Html sizing="intrinsic"> | ||
| <div style={{ color: '#fff', fontFamily: 'sans-serif' }}> | ||
| Floating Glass on R3F Canvas | ||
| </div> | ||
| </Html> | ||
| </Padding> | ||
| </Glass> | ||
| </GlassContainer> | ||
| </LiquidGlassR3F.Scene> | ||
|
|
||
| {/* Performs the WebGPU backdrop-render composite pass */} | ||
| <LiquidGlassR3F.Render renderPriority={1} /> | ||
| </> |
Comment on lines
+359
to
+364
| <Canvas | ||
| gl={(canvas) => { | ||
| // Must return THREE.WebGPURenderer context | ||
| const renderer = new THREE.WebGPURenderer({ canvas, antialias: true }); | ||
| return renderer; | ||
| }} |
| ### 3.4 @liquid-dom/three (Three.js WebGPU Context Adapter) | ||
|
|
||
| #### `ThreeGlassRenderer` | ||
| - **Constructor**: `new ThreeGlassRenderer({ renderer: THREE.WebGPURenderer; scene?: Scene; format?: GPUTextureFormat })` |
| - **Layout & Decorator Tags**: `<HStack>`, `<VStack>`, `<ZStack>`, `<Frame>`, `<Padding>`, `<Background>`, `<Overlay>`, `<Transform>`, `<Spacer>`. | ||
| - **Glass Nodes**: `<GlassContainer>`, `<Glass>`, `<Html>`. | ||
| - Props map exactly to core properties. | ||
| - `<Html>` requires `sizing` prop: `'intrinsic' | 'constrained-width' | 'fill'`. |
| When acting as an assistant or code generator within this repository, agents MUST prioritize **visual excellence, performance, and math-driven correctness**: | ||
|
|
||
| 1. **Rich & Curated Aesthetics**: | ||
| - Never write CSS containing generic, plain primary colors (`red`, `blue`, `green`, `#fff`). |
| - All sibling `Glass` children in a container are blended via SDF calculations and share the same container's optical properties. | ||
| - **`Glass`** accepts ONLY `Html` | `Group`. | ||
| - `<Html>` elements are sampled through the bounds of the host glass node. | ||
| - **`Group`** and **`StackingContext`** are layout-neutral and can wrap elements to apply transforms. They do NOT disrupt stacking or validate constraints of their children. |
| ## 2. Code Generation Guidelines | ||
|
|
||
| ### A. General Requirements | ||
| - **WebGPU Target**: Always assume the rendering context supports `navigator.gpu`. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a dedicated AI Agent & LLM Integration Layer to make
liquid-domhighly accessible and easy to build with for developers using AI coding assistants (such as Cursor, Claude Code, GitHub Copilot, and agentic workflows).With these resources, AI tools will instantly understand the monorepo package relationships, SwiftUI-style layout rules, WebGPU constraints, and the core mathematical formulas of the physics-based spring and decimation blurs, drastically reducing hallucinations and accelerating developer velocity.
Why this is valuable
liquid-domis an amazing library with highly specialized layouts, rendering rules, and math behaviors. By providing pre-baked specifications and IDE-specific instruction rules:What's included
llms.txt: High-level entry-point detailing package relationships and core requirements.llms-full.txt: Comprehensive reference containing API signatures, spring physics equations, downsampler configurations, and complete React/Three/R3F code examples.agents.md: Dedicated behavior guidelines, visual/performance priorities, and quick reference cheat sheets for agents.AI_AGENT_GUIDE.md: A user guide explaining how developers can reference and leverage these rules in Cursor, Copilot, and Claude Code..cursor/rules/*.mdc: MDC-formatted rules for Cursor covering core architecture, React layouts, animations, and adaptive blurs/tints..github/copilot-instructions.md: Global workspace prompt guidelines for VS Code / Copilot..clack/instructions.md: Context rules and monorepo build checks for console-based CLI agents.