Use this skill when showing read-only content with nuxt-ui-tools display blocks, inside a form (the `info` field with `display` and `props`) or on their own (`UiDisplay`). Covers the 19 kinds (heading, text, alert, facts, stat, breakdown, meter, chart, table, diff, record, person, list, timeline, date, media, code, empty, accordion) and their variants, props that follow form values or load through a promise or TanStack Query options with skeleton and error states, the form api in props callbacks, the label shell, lazy file links, presets, slot classes, and tones, including tones an app registers.
日本語の概要は準備中です。原文の説明を表示しています。
実行スコア 未検証
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
Display blocks draw read-only content: notices, label/value facts, totals, gauges, records, people, lists, timelines, dates, media, code, empty states. Each block is one kind with a few variants, configured by plain props.
Use them in two places:
info field with display and props, where props can read the form values,
load data, and act on the form;UiDisplay component (NutDisplay with the Nut prefix).import { defineFormSchema } from '#ui-tools/form'
defineFormSchema({
fields: [
{ key: 'seats', type: 'number', label: 'Candidates', default: 30 },
{
key: 'quote',
type: 'info',
display: 'breakdown',
dependencies: ['seats'],
props: ({ deps }) => ({
lines: [
{ label: 'Licences', detail: `${deps.get<number>('seats')} × €96`, value: total(deps) },
],
total: { label: 'Total', value: totalWithVat(deps) },
}),
},
],
})
<UiDisplay
display="facts"
:props="{
layout: 'grid',
items: [{ label: 'Status', chip: { label: 'Active', tone: 'success' } }],
}"
/>
skills/consumer/display/references/kinds.md — every kind, its variants and props, with examplesskills/consumer/display/references/info-field.md — the form info field: static, derived and
loaded props, the form api, the label shell, presets, the legacy noticeskills/consumer/display/references/theming.md — tones (built-in and registered), slot classes,
presets, icons, CSS variables, translations| Kind | Variants | For |
|---|---|---|
heading | title (sm, md, lg), eyebrow | titling a group of fields |
text | body, lead, muted, caption, quote, legal, prose | copy, quotes, legal notes |
alert | soft, outline, subtle, solid, callout, inline, banner | notices with items, lists, details, actions |
facts | ledger, grid, inline, columns, tiles | label → value pairs |
stat | hero, price, row, trend | one figure or a row of them |
breakdown | open, collapsible, compare | lines adding up to a total |
meter | bar, segments, split, ring, scale | usage, shares, scores, levels |
chart | bars, line, donut, funnel | small charts in the dashboard palette |
table | — | a light read-only table |
diff | inline, columns | what a change will do |
record | row, card, compact, stack | one entity or a stack of them |
person | user, group, contact | people |
list | bullets, numbered, icons, checks, steps, columns, files, chips | lists |
timeline | vertical, log, pipeline, schedule | history and plans |
date | tile, range, countdown | a moment, a span, a deadline |
media | image, gallery, video, document, link | files and links |
code | block, value, secret | values people copy |
empty | dashed, plain | nothing yet, and how to fix it |
accordion | separated, flush | folded content, nested blocks |
Every kind takes loading (draws its skeleton) and ui (slot classes). Most take some of:
tone: primary, secondary, success, info, warning, error, neutral, or a tone the
app registered (see theming)surface: plain, muted, bordered, elevatedsize: sm, md, lgmax, step, empty on lists: fold after max items with a « Show more · N » button, reveal
step more at a time, and say what is missing when there is nothingactions: UButton props with a lazy labelcopy on facts, people and code valuesText props accept a string, a lazy translation (() => t('key')), a VNode, or a render function.
props is required on an info display field; with a preset, the preset fills the props you
leave out.display.tones entry (its colors) and the
DisplayToneRegistry augmentation (its name in types).Date, ISO strings or epoch milliseconds; blocks format them with the locale.まだレビューはありません。使ってみた感想をお寄せください。
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
Use this skill when working with the nuxt-ui-tools package as a consumer or integrator. It provides the current package overview and routes to table, form, display blocks, dashboard, file preview, query-state, shared responsive helpers, remote option loaders, and i18n usage.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill for internal architecture work around config-driven, registry-driven, and pattern-driven feature design in the nuxt-ui-tools repository. Covers how to organize variant-heavy features, where to put implementations, and how to keep both internals and public APIs standardized.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill when building analytics dashboards with nuxt-ui-tools as a package consumer. Covers schema and view functions (defineDashboardSchema, defineDashboardView) that take their context as typed params, useDashboard with a getter that rebuilds on input change, typed injection (useDashboardView, injectDashboard, InferDashboard, InferDashboardView), filters declared inline with the f builder and synced with the URL, memory, or an external store (one value per key across views), headless filters, filter controls and the shipped UI (UiDashboardPage, UiDashboardFilters, UiDashboardFilter, UiDashboardViewTabs) with slot overrides, remote paginated pickers and remoteTableOptions, staged queries (essential / background / deferred) with select and dependent requires, lazy enabled conditions on views, queries, and filters (blocks of disabled queries hidden, grids closing up), derived values, views (tabs), query-scoped filters, number formats (presets, Intl options, useDashboardFormat), and the dashboard blocks (stats with trends, goals, and comparisons, stat groups, gauges, unovis charts with highlights, value labels, and totals, lists with progress rings, bars, funnel, alerts, activity feeds, sortable tables, custom widgets) with their automatic loading, error, empty, and refresh states, card menus, header and footer actions, row actions, drill-down and selected state, card tabs, split cards, comparison periods, auto-refresh, and data freshness.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill when previewing files with nuxt-ui-tools as a package consumer. Covers mounting UiFilePreviewProvider, opening one file or a gallery with useFilePreview() or useNuxtApp().$filePreview, file descriptors (URL, File/Blob, or a function that returns a signed URL), options (index, mode, gallery, loop, pdf page, callbacks), the returned handle, the built-in renderers (image, video, audio, PDF, text/JSON, CSV, Markdown, Office and archive fallbacks), renditions, download and custom header actions, the markdown render hook, custom renderers with defineFilePreviewRenderer and UiFilePreviewTools, theming tokens, and how the upload field uses the preview.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill when working with the nuxt-ui-tools form runtime as a package consumer. It covers schema-driven forms, the provider-backed form API, inline rendering, overlay rendering, form pages with a section navigation, rich options (icon, avatar, chip, description, suffix, grouped menus, and renderOption/renderValue render functions on select, auto-complete, radio, and checkbox group), choice cards, and typed submit results.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill for internal i18n work in this repository. Covers locale ownership, provider wiring, lazy schema text contracts, and the maintenance surfaces that must stay in sync when package or playground translations change.
日本語の概要は準備中です。原文の説明を表示しています。