Claude Code Skills

Guide for using @ug666/react UI component library in React projects. Use this skill when writing React code that imports from @ug666/react — including Button, Input, Card, Modal, Table, Toast, Tabs, Select, Badge, Sidebar, Pagination, Dropdown, Avatar, Tooltip, Alert, Breadcrumb, Switch, Skeleton, Progress, Sheet, EmptyState, Spinner. Also use when the user asks about React UI patterns, component variants, CVA variant system, cn() className merging, useDebounce, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, useToggle, usePagination, useForm, or any @ug666/react hook. Trigger whenever you see: import { Button } from '@ug666/react', bun add @ug666/react, or questions like "如何使用 Button / Input / Modal / Table / Toast 组件".

Guide for using @ug666/utils utility functions in any TypeScript or JavaScript project. Use this skill when writing code that needs: cn() className merger for Tailwind, date/time formatting (formatDate, formatDateTime, formatRelativeTime), file size formatting (formatBytes), number formatting (formatNumber), duration formatting (formatDuration), ID generation (generateUUID, generatePrefixedId, generateRandomHex), string utilities (capitalize, truncate, maskEmail, maskPhone), API client (createApiClient with baseUrl/auth/timeout), validators (isEmail, isPhone, isUrl, isStrongPassword, isEmpty), or safe storage (safeStorage, safeSessionStorage with auto JSON serialization). Trigger whenever you see: import { cn } from '@ug666/utils', import { formatDate } from '@ug666/utils', bun add @ug666/utils, or questions about formatting dates, validating emails, generating IDs, merging Tailwind classnames, or safe localStorage wrappers. Works in React, Vue, Node.js, and any TypeScript environment — no framework dependency.

Guide for using @ug666/vue UI component library in Vue 3 projects. Use this skill when writing Vue SFC code that imports from @ug666/vue — including UButton, UInput, UCard, UModal, UTable, UToaster, UTabs, USelect, UBadge, USidebar, UPagination, UDropdown, UAvatar, UTooltip, UAlert, UBreadcrumb, USwitch, USkeleton, UProgress, USheet, UEmptyState, USpinner, ULabel, UTextarea. Also use when the user asks about Vue 3 UI patterns, v-model binding, defineProps, defineModel, useDebounce, useLocalStorage, useMediaQuery, useClickOutside, useCopyToClipboard, useToggle, usePagination, useForm, useToast composables, or any @ug666/vue composable. Trigger whenever you see: import { UButton } from '@ug666/vue', bun add @ug666/vue, or questions like "如何使用 UButton / UInput / UModal / UTable 组件", "Vue 版本怎么用". Note: Vue components use U prefix (UButton not Button), variants use Record mapping not CVA, and two-way binding uses v-model:xxx / defineModel pattern.