Agent skill

Uui Data Sources

Helps work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable, FiltersPanel, and other data-driven components.

MITAuto-check passedFrontend & Design

Install Uui Data Sources

skills CLI

$ npx skills add epam/UUI --skill uui-data-sources -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-data-sources --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/data-sources .claude/skills/uui-data-sources && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "uui-data-sources" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources into .claude/skills/uui-data-sources/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-data-sources", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add epam/UUI --skill uui-data-sources -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-data-sources --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/data-sources .agents/skills/uui-data-sources && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "uui-data-sources" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources into .agents/skills/uui-data-sources/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-data-sources", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add epam/UUI --skill uui-data-sources -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-data-sources --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/data-sources .cursor/skills/uui-data-sources && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "uui-data-sources" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources into .cursor/skills/uui-data-sources/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-data-sources", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/epam/UUI.git --path .cursor/skills/data-sources

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add epam/UUI --skill uui-data-sources -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-data-sources --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/data-sources .gemini/skills/uui-data-sources && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "uui-data-sources" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources into .gemini/skills/uui-data-sources/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-data-sources", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install epam/UUI uui-data-sources

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add epam/UUI --skill uui-data-sources -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/data-sources .github/skills/uui-data-sources && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "uui-data-sources" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources into .github/skills/uui-data-sources/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-data-sources", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add epam/UUI --skill uui-data-sources -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install epam/UUI uui-data-sources --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/epam/UUI.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/data-sources .opencode/skills/uui-data-sources && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "uui-data-sources" agent skill from https://github.com/epam/UUI/tree/develop/.cursor/skills/data-sources into .opencode/skills/uui-data-sources/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "uui-data-sources", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: uui-data-sources
GitHub stars: 248
Token cost: ~1.5k tokens
SKILL.md length: 317 words
Files: 1
Skills in repo: 10
Repo updated: Sep 29, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Helps work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable, FiltersPanel, and other data-driven components.

Fixing features that load
SKILL.md covers Location, DataSource Types, Hooks (Recommended Usage) and useView and DataSourceState, plus 4 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Display lists of data

What it does

Uui Data Sources is an agent skill from epam/UUI. Helps work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable, FiltersPanel, and other data-driven components. Use when implementing or fixing features that load, filter, sort, or display lists of data.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: React-based components and accelerators library built by EPAM Systems. The licence is MIT.

When your agent uses it

Fixing features that load
Display lists of data

Example prompts

“Use the uui-data-sources skill to help work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable…”
“/uui-data-sources”

What it can do on your machine

Read from SKILL.md and the folder at commit fd11393. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Uui Data Sources loads about 1.5k tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 317 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~68
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from epam/UUI at commit fd11393, republished under its MIT licence (© epam). 317 words, ~1,478 tokens.

Download SKILL.mdSave it as .claude/skills/uui-data-sources/SKILL.md (or your agent's skills folder).

name: uui-data-sources
description: Helps work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable, FiltersPanel, and other data-driven components. Use when implementing or fixing features that load, filter, sort, or display lists of data.

UUI Data Sources

UUI DataSources are the core infrastructure for data-driven components like PickerInput, DataTable, FiltersPanel, and PickerModal. They handle loading, filtering, sorting, selection, and tree hierarchies.

Location

Package: @epam/uui-core
Path: uui-core/src/data/processing/
Types: uui-core/src/types/dataSources.ts

DataSource Types

Type	Use Case	Data Flow
ArrayDataSource	In-memory, synchronous list. Items already loaded.	Pass `items` array. Filtering/search/sorting done client-side.
LazyDataSource	Server-driven, lazy loading. Large or remote data.	`api(request, context)` fetches on demand. Supports pagination, search, tree.
AsyncDataSource	Fetches once via API, then caches.	`api(options)` called once; results cached and reused across views.

Hooks (Recommended Usage)

Use hooks instead of instantiating classes directly — they handle lifecycle and prop updates:

typescript

import { useArrayDataSource, useLazyDataSource, useAsyncDataSource } from '@epam/uui-core';

useArrayDataSource

For in-memory data:

typescript

const dataSource = useArrayDataSource(
    {
        items: myItems,
        getId: (item) => item.id,
        getParentId: (item) => item.parentId, // optional, for tree
    },
    [myItems]
);

useLazyDataSource

For server-driven lazy loading:

typescript

const dataSource = useLazyDataSource<TItem, TId, TFilter>(
    {
        api: (request, context) => {
            // request: { filter, sorting, search, range, ids, cursor }
            // context: { parentId, parent } for tree children
            return myApi.fetchItems(request, context);
        },
        getId: (item) => item.id,
        getParentId: (item) => item.parentId,
    },
    []
);

API must return { items: TItem[], count?: number, from?: number, cursor?: any }.

useAsyncDataSource

Fetches once, then caches. Good for dropdowns with fixed options:

typescript

const dataSource = useAsyncDataSource(
    {
        api: (options) => svc.api.demo.countries({}, options).then((r) => r.items),
        getId: (item) => item.id,
    },
    []
);

useView and DataSourceState

Components consume DataSources via useView:

typescript

const [dataSourceState, setDataSourceState] = useState<DataSourceState>({});
const view = dataSource.useView(dataSourceState, setDataSourceState);

const rows = view.getVisibleRows();
const listProps = view.getListProps();
view.reload();

DataSourceState (uui-core/src/types/dataSources.ts) includes:

search — search string
filter — filter object (passed to LazyDataSource API)
sorting — sort options
checked — checked item IDs (multi-select)
selectedId — single selected item
folded — tree node fold state
page, pageSize — pagination
focusedIndex, scrollTo — list position

SetDataSourceState is (update: (prev) => DataSourceState) => void — functional update pattern.

Key Config Options

getId(item) — Required. Returns unique ID.
getParentId(item) — Optional. For tree hierarchy. LazyDataSource uses it to load parent chain.
complexIds — Set true if IDs are objects/arrays (internally JSON.stringified).
rowOptions / getRowOptions(item) — Row-level options (selectable, checkable, editable).
cascadeSelection — true | 'explicit' | 'implicit' for parent-child selection behavior.
isFoldedByDefault(item, state) — Default fold state for tree nodes.
selectAll — Enable/disable select-all. Default true.

LazyDataSource API Contract

typescript

type LazyDataSourceApi<TItem, TId, TFilter> = (
    request: LazyDataSourceApiRequest<TItem, TId, TFilter>,
    context: LazyDataSourceApiRequestContext<TItem, TId>
) => Promise<LazyDataSourceApiResponse<TItem>>;

Request: filter, sorting, search, range: { from, count }, ids (for specific IDs), cursor (pagination).
Context: parentId, parent when loading tree children.
Response: { items, count?, from?, cursor?, totalCount? }.

Common Patterns

PickerInput with DataSource

typescript

const dataSource = useArrayDataSource({ items, getId: (i) => i.id }, [items]);
<PickerInput
    dataSource={ dataSource }
    value={ value }
    onValueChange={ setValue }
    getName={ (item) => item.name }
    entityName="Item"
/>

DataTable with DataSource

typescript

const dataSource = useArrayDataSource({ items, getId: (i) => i.id }, [items]);
const [tableState, setTableState] = useState<DataTableState>({});
const view = dataSource.useView(tableState, setTableState);
<DataTable
    getRows={ () => view.getVisibleRows() }
    columns={ columns }
    value={ tableState }
    onValueChange={ setTableState }
/>

Tree with getParentId

typescript

const dataSource = useArrayDataSource({
    items,
    getId: (i) => i.id,
    getParentId: (i) => i.parentId,
}, [items]);

LazyDataSource clearCache

When data changes on the server, call dataSource.clearCache() (LazyDataSource only) to force reload.

References

Data source types: uui-core/src/types/dataSources.ts
ArrayDataSource: uui-core/src/data/processing/ArrayDataSource.tsx
LazyDataSource: uui-core/src/data/processing/LazyDataSource.tsx
AsyncDataSource: uui-core/src/data/processing/AsyncDataSource.tsx
Hooks: uui-core/src/data/processing/hooks/
Examples: app/src/docs/_examples/dataSources/, app/src/docs/_examples/pickerInput/, app/src/docs/_examples/tables/

Files

Just SKILL.md in .cursor/skills/data-sources of epam/UUI.

Open the folder on GitHubat commit fd11393

Compare with similar skills

Uui Data Sources next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Uui Data Sources compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Uui Data Sources this skillepam/UUI	248	—	~1.5k	Automated safety check: Pass	MIT	9 days ago
Web Artifacts Builderanthropics/skills	180k	41 repos	~769	Automated safety check: Pass	Apache-2.0	3 days ago
React Doctormakeplane/plane	61k	12 repos	~657	Automated safety check: Pass	AGPL-3.0	today
Impeccablebestofjs/bestofjs	3.1k	27 repos	~2.6k	Automated safety check: Pass	MIT	3 days ago
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Web Interface Guidelines Reviewervercel-labs/openreview	1.7k	98 repos	~308	Automated safety check: Pass	None	7 mo ago

Similar skills

Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 41 repos~769 tokens
Frontend & DesignAuto-check passed
React Doctor
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
61k GitHub starsUsed in 12 repos~657 tokens
Frontend & DesignAuto-check passed
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 27 repos~2.6k tokens
Frontend & DesignAuto-check passed
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
65k GitHub starsUsed in 2 repos~4.4k tokens
Frontend & DesignAuto-check passed
Web Interface Guidelines Reviewer
vercel-labs/openreview
Official
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
1.7k GitHub starsUsed in 98 repos~308 tokens
Frontend & DesignAuto-check passed
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
4.9k GitHub starsUsed in 10 repos~865 tokens
Frontend & DesignAuto-check passed

Questions about Uui Data Sources

What does Uui Data Sources do?

Helps work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable, FiltersPanel, and other data-driven components. Uui Data Sources is an agent skill from epam/UUI. Helps work with UUI DataSources (ArrayDataSource, LazyDataSource, AsyncDataSource) powering PickerInput, DataTable, FiltersPanel, and other data-driven components.

When should I use Uui Data Sources?

Uui Data Sources fits situations like: fixing features that load; display lists of data.

How do I install Uui Data Sources in Claude Code?

Run `npx skills add epam/UUI --skill uui-data-sources -a claude-code`. Or copy the skill folder (.cursor/skills/data-sources in epam/UUI) into .claude/skills/uui-data-sources in your project. Claude Code loads it when a task matches its description.

How do I install Uui Data Sources in Codex?

Run `npx skills add epam/UUI --skill uui-data-sources -a codex`. Or copy the skill folder (.cursor/skills/data-sources in epam/UUI) into .agents/skills/uui-data-sources in your project. Codex loads it when a task matches its description.

Can I use Uui Data Sources in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add epam/UUI --skill uui-data-sources -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/uui-data-sources, .gemini/skills/uui-data-sources, .github/skills/uui-data-sources and .opencode/skills/uui-data-sources in your project.

What does Uui Data Sources need to run?

SKILL.md names no scripts, command-line tools or credentials: Uui Data Sources is instructions for the agent only.

Does Uui Data Sources access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Uui Data Sources safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Uui Data Sources use?

Uui Data Sources is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Uui Data Sources use?

About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Uui Data Sources?

Skills that share tags, products or a category with Uui Data Sources: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Uui Data Sources?

epam (a GitHub organization) maintains it in epam/UUI, which has 248 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on September 29, 2026.

Source: epam/UUI on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Uui Data Sources

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

UUI Data Sources

Location

DataSource Types

Hooks (Recommended Usage)

useArrayDataSource

useLazyDataSource

useAsyncDataSource

useView and DataSourceState

Key Config Options

LazyDataSource API Contract

Common Patterns

PickerInput with DataSource

DataTable with DataSource

Tree with getParentId

LazyDataSource clearCache

References

Files

Compare with similar skills

Similar skills

More from epam/UUI

Related

Questions about Uui Data Sources