NeuroUX SDK

Adaptive User Experience Framework for Cognitive Diversity

---

🌐 Overview

NeuroUX SDK is an open, framework-agnostic toolkit designed to make digital experiences more adaptable, inclusive, and comfortable for people with diverse cognitive and sensory processing styles.

Instead of enforcing a one-size-fits-all interface, NeuroUX enables dynamic UI adjustments that respect attention patterns, reading styles, sensory thresholds, and cognitive load — without diagnosing, tracking, or labeling users.

Built with TypeScript, Web Components, and optional wrappers for React, Vue, Angular, Svelte, Next and vanilla JavaScript, the SDK can run anywhere: from enterprise platforms to static HTML pages.

---

✨ Key Features

🔸 Universal Compatibility

Runs in:

• React
• Vue
• Svelte
• Angular
• HTML/vanilla JavaScript
• Next
• CMS platforms (WordPress, Shopify, etc.)

🔸 Evidence-Based Adaptive Engine

Behavioral signals detect when users may benefit from:

• Reduced visual noise
• Increased focus
• Enhanced readability
• Lower cognitive load
• Simplified interactions

All adaptations are optional, transparent, and opt-in.

🔸 Web Components UI (NeuroAssist)

A universal widget that allows users to adjust:

• Motion reduction
• Focus mode
• Typography tuning
• Contrast
• Spacing
• Reading aids
• Highlighting features

🔸 Framework Wrappers (Optional)

Lightweight bindings for popular frameworks:

• @adapt-ux/neuro-react - React wrapper
• @adapt-ux/neuro-vue - Vue wrapper
• @adapt-ux/neuro-angular - Angular wrapper
• @adapt-ux/neuro-svelte - Svelte wrapper
• @adapt-ux/neuro-js - Vanilla JavaScript loader
• @adapt-ux/neuro-next - Next wrapper

🔸 Zero Diagnosis, Zero Tracking

The SDK does not:

• infer medical conditions
• store cognitive profiles
• track identity
• require accounts

It only adapts based on interaction patterns and user preference.

---

📦 Packages

The monorepo contains:

libs/
  core/          # @adapt-ux/neuro-core - Adaptive engine (TS)
  assist/        # @adapt-ux/neuro-assist - Web Components UI
  styles/        # @adapt-ux/neuro-styles - Tokens, themes, SCSS utilities
  signals/       # @adapt-ux/neuro-signals - Behavioral detection logic
  utils/         # @adapt-ux/neuro-utils - Shared utilities

  neuro-react/   # @adapt-ux/neuro-react - React wrapper
  neuro-vue/     # @adapt-ux/neuro-vue - Vue wrapper
  neuro-angular/ # @adapt-ux/neuro-angular - Angular wrapper
  neuro-svelte/  # @adapt-ux/neuro-svelte - Svelte wrapper
  neuro-js/      # @adapt-ux/neuro-js - Vanilla JavaScript loader
  neuro-next/    # @adapt-ux/neuro-next - Next wrapper
apps/
  demo/          # Example app for testing
docs/            # Internal documentation

---

🚀 Getting Started

Install the universal SDK

npm install @adapt-ux/neuro-core @adapt-ux/neuro-assist

Using the NeuroAssist Web Component (HTML/Vanilla JS)

<script type="module" src="https://cdn.adaptux.dev/neuro-assist.js"></script>

<neuro-assist></neuro-assist>

Or install via npm:

npm install @adapt-ux/neuro-assist @adapt-ux/neuro-core

import '@adapt-ux/neuro-assist';

---

🧩 Framework Examples

React

npm install @adapt-ux/neuro-react

import { NeuroAssist } from '@adapt-ux/neuro-react';

export default function Page() {
  return <NeuroAssist />;
}

---

Next.js

npm install @adapt-ux/neuro-next

app/layout.tsx (Root Layout):

import { NeuroUXProvider } from '@adapt-ux/neuro-next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <NeuroUXProvider>
      {children}
    </NeuroUXProvider>
  );
}

app/page.tsx (Client Component):

'use client';

import { NeuroUXToggle } from '@adapt-ux/neuro-next';

export default function Page() {
  return (
    <div>
      <h1>My Next.js App</h1>
      <NeuroUXToggle />
    </div>
  );
}

---

Vue

npm install @adapt-ux/neuro-vue

<template>
  <neuro-assist />
</template>

<script setup>
import '@adapt-ux/neuro-vue';
</script>

---

Angular

npm install @adapt-ux/neuro-angular

// app.module.ts or standalone component
import { Component } from '@angular/core';
import '@adapt-ux/neuro-assist';

@Component({
  selector: 'app-root',
  template: '<neuro-assist></neuro-assist>'
})
export class AppComponent {}

---

Svelte

npm install @adapt-ux/neuro-svelte

<script>
  import '@adapt-ux/neuro-svelte';
</script>

<neuro-assist />

---

Vanilla JavaScript

npm install @adapt-ux/neuro-js

import '@adapt-ux/neuro-js';

// Or via CDN
// <script type="module" src="https://cdn.adaptux.dev/neuro-js.js"></script>

// The component will be available as a custom element
document.body.innerHTML = '<neuro-assist></neuro-assist>';

---

🛠 Development

Run the demo app:

nx serve demo

Build all packages:

nx run-many --target=build --all

Test:

nx test core
nx test assist
nx test signals
nx test styles
nx test utils

Build a specific package:

nx build core
nx build assist
nx build react
# ... etc

---

🗺️ Roadmap

Our development plans, research milestones, and long-term goals are documented in the roadmap.

👉 Open ROADMAP.md
This document is frequently updated as the project evolves.

---

🔬 Vision & Philosophy

NeuroUX is guided by these principles:

• Adaptation over standardization
• Inclusion without identification
• Respect by default
• Evidence-driven design
• Framework-agnostic architecture
• Developer-first ergonomics

Our goal is simple:

Make the web more comfortable for everyone — without assumptions, labels, or friction.

---

🤝 Contributing

We welcome contributions in:

• Accessibility research
• UI/UX behavior experiments
• New adaptive patterns
• Code improvements
• Documentation
• Testing & QA

Please open a discussion or pull request.

---

📜 License

MIT License — freely usable and modifiable for personal or commercial purposes.