메뉴
admin/ui — 99 abstractions.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Building a New Entry Wizard for the Headless CMS. Use this skill when the developer wants to show a custom wizard UI before the entry form when creating new CMS entries -- collecting fields like title, slug, or category upfront, then pre-filling the entry form. Covers ContentEntryEditorConfig.NewEntryWizard, createFeature, FormModelFactory, createReactiveComponent, useContentEntryFormPresenter, and the dirty-flag on setData.
Building forms with the FormModel system — field types, renderers, layout, validation, conditional rules, computed fields, and dynamic zones. Use this skill when the developer needs to define form fields with the builder API, choose renderers, build layouts with tabs/rows/separators, add validation (Zod or imperative), use conditional visibility/disable rules, create computed fields, or work with object fields and templates (dynamic zones).
api — 21 abstractions.
api/webhooks — 15 abstractions.
Admin-side architecture patterns for Webiny extensions. Use this skill when building frontend features with headless features (UseCase/Repository/Gateway), presentation features (Presenter/ViewModel/hooks/components), MobX-based presenters, RegisterFeature, and Admin BuildParams. Covers the admin/ directory structure for both features/ and presentation/ layers.
Covers the PreviewUrlModifier extension point in Website Builder. Use when a user wants to inject custom query parameters into live preview URLs — e.g. signed tokens, tenant identifiers, feature flags — from their Webiny project. Handles the full registration pattern: implementing the interface, wiring via createFeature + RegisterFeature, and registering via webiny.config.tsx. Supports async modifier methods (e.g. remote token fetch).
| name | webiny-admin-ui-catalog |
| context | webiny-api |
| description | admin/ui — 99 abstractions. |
import { Name } from "<importPath>";Name: Accordion
Import: import { Accordion } from "webiny/admin/ui"
Source: @webiny/admin-ui/Accordion/index.ts
Name: AdminLayout
Import: import { AdminLayout } from "webiny/admin/ui"
Source: @webiny/app-admin/components/AdminLayout.tsx
Name: Alert
Import: import { Alert } from "webiny/admin/ui"
Source: @webiny/admin-ui/Alert/index.ts
Name: AutoComplete
Import: import { AutoComplete } from "webiny/admin/ui"
Source: @webiny/admin-ui/AutoComplete/index.ts
Name: Avatar
Import: import { Avatar } from "webiny/admin/ui"
Source: @webiny/admin-ui/Avatar/index.ts
Name: Button
Import: import { Button } from "webiny/admin/ui"
Source: @webiny/admin-ui/Button/index.ts
Name: Card
Import: import { Card } from "webiny/admin/ui"
Source: @webiny/admin-ui/Card/index.ts
Name: Checkbox
Import: import { Checkbox } from "webiny/admin/ui"
Source: @webiny/admin-ui/Checkbox/index.ts
Name: CheckboxGroup
Import: import { CheckboxGroup } from "webiny/admin/ui"
Source: @webiny/admin-ui/CheckboxGroup/index.ts
Name: CloneIcon
Import: import { CloneIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: cn
Import: import { cn } from "webiny/admin/ui"
Source: @webiny/admin-ui/utils.tsx
Name: CodeEditor
Import: import { CodeEditor } from "webiny/admin/ui"
Source: @webiny/admin-ui/CodeEditor/index.ts
Name: ColorPicker
Import: import { ColorPicker } from "webiny/admin/ui"
Source: @webiny/admin-ui/ColorPicker/index.ts
Name: CopyButton
Import: import { CopyButton } from "webiny/admin/ui"
Source: @webiny/admin-ui/Button/index.ts
Name: CreateIcon
Import: import { CreateIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: cva
Import: import { cva } from "webiny/admin/ui"
Source: @webiny/admin-ui/utils.tsx
Name: DataList
Import: import { DataList } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: DataListModal
Import: import { DataListModal } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: DataListWithSections
Import: import { DataListWithSections } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: DataTable
Import: import { DataTable } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataTable/index.ts
Name: DelayedOnChange
Import: import { DelayedOnChange } from "webiny/admin/ui"
Source: @webiny/admin-ui/DelayedOnChange/index.ts
Name: DeleteIcon
Import: import { DeleteIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: Dialog
Import: import { Dialog } from "webiny/admin/ui"
Source: @webiny/admin-ui/Dialog/index.ts
Name: DownloadIcon
Import: import { DownloadIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: Drawer
Import: import { Drawer } from "webiny/admin/ui"
Source: @webiny/admin-ui/Drawer/index.ts
Name: DropdownMenu
Import: import { DropdownMenu } from "webiny/admin/ui"
Source: @webiny/admin-ui/DropdownMenu/index.ts
Name: DynamicFieldset
Import: import { DynamicFieldset } from "webiny/admin/ui"
Source: @webiny/admin-ui/DynamicFieldset/index.ts
Name: EditIcon
Import: import { EditIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: FilePicker
Import: import { FilePicker } from "webiny/admin/ui"
Source: @webiny/admin-ui/FilePicker/index.ts
Name: FilterIcon
Import: import { FilterIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: FolderPicker
Import: import { FolderPicker } from "webiny/admin/ui"
Source: @webiny/app-aco/components/FolderPicker/FolderPicker.tsx
Name: FolderTree
Import: import { FolderTree } from "webiny/admin/ui"
Source: @webiny/app-aco/components/FolderTree/index.tsx
Name: FormComponentDescription
Import: import { FormComponentDescription } from "webiny/admin/ui"
Source: @webiny/admin-ui/FormComponent/index.ts
Name: FormComponentErrorMessage
Import: import { FormComponentErrorMessage } from "webiny/admin/ui"
Source: @webiny/admin-ui/FormComponent/index.ts
Name: FormComponentLabel
Import: import { FormComponentLabel } from "webiny/admin/ui"
Source: @webiny/admin-ui/FormComponent/index.ts
Name: FormComponentNote
Import: import { FormComponentNote } from "webiny/admin/ui"
Source: @webiny/admin-ui/FormComponent/index.ts
Name: generateId
Import: import { generateId } from "webiny/admin/ui"
Source: @webiny/admin-ui/utils.tsx
Name: Grid
Import: import { Grid } from "webiny/admin/ui"
Source: @webiny/admin-ui/Grid/index.ts
Name: HeaderBar
Import: import { HeaderBar } from "webiny/admin/ui"
Source: @webiny/admin-ui/HeaderBar/index.ts
Name: Heading
Import: import { Heading } from "webiny/admin/ui"
Source: @webiny/admin-ui/Heading/index.ts
Name: Icon
Import: import { Icon } from "webiny/admin/ui"
Source: @webiny/admin-ui/Icon/index.ts
Name: IconButton
Import: import { IconButton } from "webiny/admin/ui"
Source: @webiny/admin-ui/Button/index.ts
Name: IconPicker
Import: import { IconPicker } from "webiny/admin/ui"
Source: @webiny/admin-ui/IconPicker/index.ts
Name: Image
Import: import { Image } from "webiny/admin/ui"
Source: @webiny/admin-ui/Image/index.ts
Name: Input
Import: import { Input } from "webiny/admin/ui"
Source: @webiny/admin-ui/Input/index.ts
Name: Label
Import: import { Label } from "webiny/admin/ui"
Source: @webiny/admin-ui/Label/index.ts
Name: LexicalEditor
Import: import { LexicalEditor } from "webiny/admin/ui"
Source: @webiny/app-admin/components/LexicalEditor/LexicalEditor.tsx
Name: Link
Import: import { Link } from "webiny/admin/ui"
Source: @webiny/admin-ui/Link/index.ts
Name: List
Import: import { List } from "webiny/admin/ui"
Source: @webiny/admin-ui/List/index.ts
Name: ListIcon
Import: import { ListIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: Loader
Import: import { Loader } from "webiny/admin/ui"
Source: @webiny/admin-ui/Loader/index.ts
Name: LoginIcon
Import: import { LoginIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: Logo
Import: import { Logo } from "webiny/admin/ui"
Source: @webiny/app-admin/base/ui/Logo.tsx
Name: MultiAutoComplete
Import: import { MultiAutoComplete } from "webiny/admin/ui"
Source: @webiny/admin-ui/MultiAutoComplete/index.ts
Name: MultiFilePicker
Import: import { MultiFilePicker } from "webiny/admin/ui"
Source: @webiny/admin-ui/MultiFilePicker/index.ts
Name: NextPageIcon
Import: import { NextPageIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: OptionsIcon
Import: import { OptionsIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: OverlayLoader
Import: import { OverlayLoader } from "webiny/admin/ui"
Source: @webiny/admin-ui/Loader/index.ts
Name: Popover
Import: import { Popover } from "webiny/admin/ui"
Source: @webiny/admin-ui/Popover/index.ts
Name: Portal
Import: import { Portal } from "webiny/admin/ui"
Source: @webiny/admin-ui/Portal/index.ts
Name: PreviousPageIcon
Import: import { PreviousPageIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: ProgressBar
Import: import { ProgressBar } from "webiny/admin/ui"
Source: @webiny/admin-ui/ProgressBar/index.ts
Name: Radio
Import: import { Radio } from "webiny/admin/ui"
Source: @webiny/admin-ui/RadioGroup/index.ts
Name: RadioGroup
Import: import { RadioGroup } from "webiny/admin/ui"
Source: @webiny/admin-ui/RadioGroup/index.ts
Name: RangeSlider
Import: import { RangeSlider } from "webiny/admin/ui"
Source: @webiny/admin-ui/RangeSlider/index.ts
Name: RefreshIcon
Import: import { RefreshIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: ScrollArea
Import: import { ScrollArea } from "webiny/admin/ui"
Source: @webiny/admin-ui/ScrollArea/index.ts
Name: Scrollbar
Import: import { Scrollbar } from "webiny/admin/ui"
Source: @webiny/admin-ui/Scrollbar/index.ts
Name: ScrollBar
Import: import { ScrollBar } from "webiny/admin/ui"
Source: @webiny/admin-ui/ScrollArea/index.ts
Name: SegmentedControl
Import: import { SegmentedControl } from "webiny/admin/ui"
Source: @webiny/admin-ui/SegmentedControl/index.ts
Name: Select
Import: import { Select } from "webiny/admin/ui"
Source: @webiny/admin-ui/Select/index.ts
Name: Separator
Import: import { Separator } from "webiny/admin/ui"
Source: @webiny/admin-ui/Separator/index.ts
Name: Sidebar
Import: import { Sidebar } from "webiny/admin/ui"
Source: @webiny/admin-ui/Sidebar/index.ts
Name: SidebarProvider
Import: import { SidebarProvider } from "webiny/admin/ui"
Source: @webiny/admin-ui/Sidebar/index.ts
Name: Skeleton
Import: import { Skeleton } from "webiny/admin/ui"
Source: @webiny/admin-ui/Skeleton/index.ts
Name: Slider
Import: import { Slider } from "webiny/admin/ui"
Source: @webiny/admin-ui/Slider/index.ts
Name: SortIcon
Import: import { SortIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: SteppedProgress
Import: import { SteppedProgress } from "webiny/admin/ui"
Source: @webiny/admin-ui/SteppedProgress/index.ts
Name: Switch
Import: import { Switch } from "webiny/admin/ui"
Source: @webiny/admin-ui/Switch/index.ts
Name: Table
Import: import { Table } from "webiny/admin/ui"
Source: @webiny/admin-ui/Table/index.ts
Name: Tabs
Import: import { Tabs } from "webiny/admin/ui"
Source: @webiny/admin-ui/Tabs/index.ts
Name: Tag
Import: import { Tag } from "webiny/admin/ui"
Source: @webiny/admin-ui/Tag/index.ts
Name: Tags
Import: import { Tags } from "webiny/admin/ui"
Source: @webiny/admin-ui/Tags/index.ts
Name: TenantSelector
Import: import { TenantSelector } from "webiny/admin/ui"
Source: @webiny/app-admin/base/ui/TenantSelector.tsx
Name: Text
Import: import { Text } from "webiny/admin/ui"
Source: @webiny/admin-ui/Text/index.ts
Name: Textarea
Import: import { Textarea } from "webiny/admin/ui"
Source: @webiny/admin-ui/Textarea/index.ts
Name: TimeAgo
Import: import { TimeAgo } from "webiny/admin/ui"
Source: @webiny/admin-ui/TimeAgo/index.ts
Name: Toast
Import: import { Toast } from "webiny/admin/ui"
Source: @webiny/admin-ui/Toast/index.ts
Name: Tooltip
Import: import { Tooltip } from "webiny/admin/ui"
Source: @webiny/admin-ui/Tooltip/index.ts
Name: Tree
Import: import { Tree } from "webiny/admin/ui"
Source: @webiny/admin-ui/Tree/index.ts
Name: UploadIcon
Import: import { UploadIcon } from "webiny/admin/ui"
Source: @webiny/admin-ui/DataList/index.ts
Name: useDialog
Import: import { useDialog } from "webiny/admin/ui"
Source: @webiny/app-admin/hooks/index.ts
Name: useDialogs
Import: import { useDialogs } from "webiny/admin/ui"
Source: @webiny/app-admin/components/Dialogs/useDialogs.ts
Name: useDisclosure
Import: import { useDisclosure } from "webiny/admin/ui"
Source: @webiny/admin-ui/hooks/index.ts
Name: useHotkeys
Import: import { useHotkeys } from "webiny/admin/ui"
Source: @webiny/app-admin/hooks/useHotkeys.ts
Name: useOpenDialog
Import: import { useOpenDialog } from "webiny/admin/ui"
Source: @webiny/app-admin/hooks/index.ts
Name: useSidebar
Import: import { useSidebar } from "webiny/admin/ui"
Source: @webiny/admin-ui/Sidebar/index.ts
Name: useToast
Import: import { useToast } from "webiny/admin/ui"
Source: @webiny/admin-ui/Toast/index.ts
Name: Widget
Import: import { Widget } from "webiny/admin/ui"
Source: @webiny/admin-ui/Widget/index.ts