@uxuiprinciples/principles-data

Shared data layer for UX/UI Principles: the full research-backed principle taxonomy, smells, and flows.

Installation

npm install @uxuiprinciples/principles-data
# or
pnpm add @uxuiprinciples/principles-data

Usage

Load Principles

import {
  loadPrinciples,
  getPrinciple,
  searchPrinciples,
  getPrincipleSummaries
} from '@uxuiprinciples/principles-data';

// Get all principles (metadata only)
const principles = loadPrinciples('en'); // or 'es' for Spanish

// Get a specific principle with full content
const cognitiveLoad = getPrinciple('cognitive-load', 'en');
console.log(cognitiveLoad?.title); // "Cognitive Load Theory"
console.log(cognitiveLoad?.content); // MDX content

// Search principles
const results = searchPrinciples({
  search: 'navigation',
  difficulty: 'beginner',
  part: 'part-1'
});

// Get summaries for listing
const summaries = getPrincipleSummaries('en');

Load Smells (Anti-patterns)

import { loadSmells, getSmell, searchSmells } from '@uxuiprinciples/principles-data';

// Get all smells
const smells = loadSmells();

// Get a specific smell
const overloaded = getSmell('overloaded-screen');
console.log(overloaded?.name); // "Overloaded Screen"
console.log(overloaded?.recipe.steps); // Fix steps

// Search smells
const efficiencySmells = searchSmells({ category: 'efficiency' });

Load Flows (User Journey Checklists)

import { loadFlows, getFlow, searchFlows } from '@uxuiprinciples/principles-data';

// Get all flows
const flows = loadFlows();

// Get a specific flow
const onboarding = getFlow('onboarding');
console.log(onboarding?.preflight.items); // Pre-design questions
console.log(onboarding?.postflight.items); // Pre-ship checklist

// Search flows
const activationFlows = searchFlows({ metricTarget: 'activation' });

Types

import type {
  Principle,
  PrincipleWithContent,
  PrincipleSummary,
  Smell,
  Flow,
  Locale,
  Difficulty
} from '@uxuiprinciples/principles-data';

Data Contents

| Data | Count | Description | |------|-------|-------------| | Principles | 195 | Research-backed UX/UI principles | | Citations | 2,098 | Academic citations | | Smells | 8 | Anti-patterns with fix recipes | | Flows | 5 | User journey checklists | | Locales | 2 | English and Spanish |

For Package Development

Sync Data

After modifying data in src/data/ or src/content/, run:

npm run sync-data

This copies JSON files and creates symlinks to the MDX content.

Build

npm run build

Development

npm run dev  # Watch mode

License

MIT © UX/UI Principles