@cassiomc1/forgeloop 1.1.0 → 1.1.1

package/ENG/design-code-eng.md

@@ -3,7 +3,7 @@ name: design-code-eng
 language: en
 description: "Visual direction, UX, motion, and perceived performance for premium digital experiences."
 version: "2026.09"
-last-reviewed: "2026-08-10"
+last-reviewed: "2026-08-17"
 guide-id: design
 requires-gates:
   - design
@@ -342,7 +342,7 @@ Select references for a product problem; they do not override project tokens or
 
 - **Technical diagrams and architecture flows**: for polished Mermaid-based architecture and workflow diagrams, use [Beautiful Mermaid by Craft](https://agents.craft.do/mermaid) when relevant; preserve canonical Mermaid source, local versioned SVG assets, and do not treat presentation tooling as a mandatory protocol gate or runtime dependency.
 - **Component source and interaction inspiration**: use [21st.dev](https://21st.dev/) to study components and interactions; inspect each source, dependency, community contribution, and premium-material term before adoption.
-- **Component and motion inspiration**: use [React Bits](https://reactbits.dev/) to study component and motion behavior; distinguish public/free material from React Bits Pro and inspect each source/dependency license.
+- **React component and motion reference**: use [React Bits](https://reactbits.dev/) to discover animated React components and interaction patterns, and inspect the [React Bits source repository](https://github.com/DavidHDev/react-bits) before adopting code. Use it only when the target stack is React or when a deliberate, reviewed adaptation is appropriate. Prefer the smallest component or pattern that solves the product need; do not install or copy the entire library by default. Inspect the exact component source, transitive dependencies, license/usage terms, accessibility behavior, reduced-motion behavior, responsive behavior, and runtime cost before adoption. Adapt tokens, typography, spacing, states, semantics, and motion to the target project's design system instead of preserving React Bits defaults.
 - **Component inspiration**: use [Fancy Components](https://www.fancycomponents.dev/) to study component composition; verify its terms separately from Motion, Tailwind, shadcn, or other dependencies.
 - **Motion primitives**: use [Motion Primitives](https://motion-primitives.com/) to study discrete interaction patterns; distinguish documented open-source material from its Pro offering and verify component/dependency terms.
 - **Component and design-system research**: use [Component Gallery](https://component.gallery/) for comparison, not for license assumptions.
@@ -351,6 +351,41 @@ Select references for a product problem; they do not override project tokens or
 - **Typography discovery**: verify each [UNCUT](https://uncut.wtf/) font's author, license, weights, and hosting rights.
 - **Creative coding and WebGL**: [cables.gl](https://cables.gl/) requires a semantic fallback, pause/offscreen behavior, a performance budget, and asset/operator provenance.
 
+### React Bits — operational use for React interfaces
+
+React Bits is an optional implementation/reference source for high-finish React interfaces. It is not a required ForgeLoop tool, protocol dependency, verification dependency, or design-system replacement.
+
+Use it when:
+
+- the target application uses React;
+- a concrete interaction, text treatment, background, reveal, or UI component would materially improve the product experience;
+- implementing the behavior from scratch would add unnecessary design or engineering cost;
+- the effect fits the selected motion intensity and visual direction.
+
+Do not use it when:
+
+- the target is not React and adaptation would add more complexity than value;
+- the component exists only as decoration without a product or communication purpose;
+- the same result already exists in the target project's design system;
+- the component violates the project's accessibility, performance, security, dependency, or browser-support constraints;
+- a static or simpler CSS/HTML implementation communicates the same result more clearly.
+
+Adoption workflow:
+
+1. **Define the need first.** Identify the concrete UI or communication problem before browsing components.
+2. **Confirm the target stack.** Verify React version, styling strategy, TypeScript/JavaScript choice, SSR/CSR boundary, and existing animation/runtime libraries.
+3. **Inspect the source.** Review the exact component in the [React Bits repository](https://github.com/DavidHDev/react-bits), not only the visual demo.
+4. **Check usage terms.** Verify the current license and any component-specific dependency or attribution requirements before copying or installing code.
+5. **Choose the smallest variant.** Prefer one component/pattern and the variant matching the project (JS/TS and CSS/Tailwind); do not add unrelated components.
+6. **Prefer local adaptation.** Adapt the component into the target project's component structure and semantic tokens rather than importing a visual identity wholesale.
+7. **Preserve semantics.** Text, controls, navigation, forms, focus states, errors, status information, and primary actions must remain semantic and usable without decorative motion.
+8. **Respect reduced motion.** Provide a static or substantially reduced alternative under `prefers-reduced-motion`; essential information must never depend on animation.
+9. **Bound runtime cost.** Lazy-load expensive effects when practical, pause continuous animation outside the viewport or on hidden pages, and avoid adding duplicate animation/runtime libraries without justification.
+10. **Verify the result.** Test keyboard/focus behavior, contrast, 320 CSS px reflow, touch behavior, reduced motion, console/runtime errors, and the project's performance budget.
+11. **Record provenance.** When code or a material implementation pattern is adopted, record React Bits as an external source in the task/project attribution or source record when applicable.
+
+ForgeLoop runtime must not gain a dependency on React Bits as a result of this guidance. Any installation belongs to the target project and remains subject to normal authorization and dependency policy.
+
 ---
 
 ## UX, Accessibility, and Quality

package/ENG/taste-frontend-eng.md

@@ -3,7 +3,7 @@ name: taste-frontend-eng
 language: en
 description: "Contextual visual-taste review for premium frontend and brand-heavy work."
 version: "2026.09"
-last-reviewed: "2026-08-10"
+last-reviewed: "2026-08-17"
 guide-id: taste
 ---
 
@@ -107,8 +107,11 @@ Use the existing product system when one is present. If the target has no
 system, choose a small coherent set of semantic tokens, components, states,
 and usage rules that the team can maintain. A vendor guide, gallery, template,
 or AI output can inform a direction, but it is not evidence of product fit,
-license, accessibility, or performance. Keep any external reference in the
-task's source and attribution records; do not add a network dependency to
+license, accessibility, or performance. For React-specific external component
+or motion references, follow the React Bits adoption rules in
+[`design-code-eng.md`](./design-code-eng.md) rather than treating a gallery
+component as a project design-system default. Keep any external reference in
+the task's source and attribution records; do not add a network dependency to
 ForgeLoop runtime.
 
 ## Visual Pre-Flight

package/README.md

@@ -1,5 +1,9 @@
 # ForgeLoop — Verifiable Engineering Protocol
 
+<p align="center">
+  <img src="./docs/assets/forgeloop-readme-banner.svg" alt="ForgeLoop — Verifiable Engineering Protocol" width="100%">
+</p>
+
 [![Docs quality](https://github.com/cassiomc1/forgeloop/actions/workflows/docs-quality.yml/badge.svg?branch=main)](https://github.com/cassiomc1/forgeloop/actions/workflows/docs-quality.yml)
 
 ForgeLoop is a portable, vendor-neutral protocol for AI-assisted development

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cassiomc1/forgeloop",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Portable, verifiable engineering protocol for AI coding environments and developer workflows",
   "repository": {
     "type": "git",