メニュー
Avatar system with four components: UIAvatar (image or initials), UIAvatarGroup (stacked row with overflow), UIAvatarGroupAddButton (dashed add action), and UIAvatarLabel (avatar with name and supporting text).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when scanning NestJS providers with DiscoveryService-backed utilities.
Use when working with the @wisemen/nestjs-custom-fields package — developer-defined custom fields in NestJS with TypeORM persistence and runtime validation. Covers registering the CustomFieldDefinition entity, authoring definitions with customFieldDefinition(), storing resolved values via @CustomFieldValueColumn(), exposing them through CustomFieldValueDto / @IsCustomFields(), and validating submissions with CustomFieldDefinitionsRepository + validateCustomFieldValues(). Use this whenever a task involves custom field definitions, CustomFieldValue columns, custom-field DTOs, or tenant-scoped field definitions, even if the package is not named explicitly.
Use when defining Typesense collections, collectors, and search queries in NestJS APIs.
Generate PDFs through API2PDF in NestJS. Use when converting HTML or URLs to PDFs in apis.
Use when storing and validating multilingual text in NestJS apis with TypeORM and class-validator.
Use when configuring NATS messaging, subscribers, or the simple NatsClient in NestJS applications.
| name | avatar |
| description | Avatar system with four components: UIAvatar (image or initials), UIAvatarGroup (stacked row with overflow), UIAvatarGroupAddButton (dashed add action), and UIAvatarLabel (avatar with name and supporting text). |
| type | component |
| library | vue-core-design-system |
| category | display |
| exports | ["UIAvatar","UIAvatarGroup","UIAvatarGroupAddButton","UIAvatarLabel"] |
An avatar system for displaying user profile pictures with initials fallback, status indicators, and logo overlays. Includes group and labeled variants.
Use instead: UIBadge with the avatar prop for inline avatar-with-text badges. UILogo for brand/company logos.
import { UIAvatar, UIAvatarGroup, UIAvatarGroupAddButton, UIAvatarLabel } from '@wisemen/vue-core-design-system'
<script setup lang="ts">
import { UIAvatar } from '@wisemen/vue-core-design-system'
</script>
<template>
<UIAvatar name="Olivia Rhye" src="https://example.com/photo.jpg" />
</template>
For full API details, read the props files. For usage examples, read the playground files.
src/ui/avatar/avatar/avatar.props.ts, src/ui/avatar/avatar-group/avatarGroup.props.ts, src/ui/avatar/avatar-label/avatarLabel.props.tssrc/ui/avatar/avatar/Avatar.vue, src/ui/avatar/avatar-group/AvatarGroup.vue, src/ui/avatar/avatar-label/AvatarLabel.vuesrc/ui/avatar/avatar/stories/, src/ui/avatar/avatar-group/stories/, src/ui/avatar/avatar-label/stories/