Skip to content

Skills Directory

Skills Learn Security Categories Docs Blog Pro Advertise

Claude Skills by reaviz

github.com/reaviz

114 skillsA× 1140 installs185 views

ReablocksAUse when building UI in React with the reablocks component library (Button, Dialog, Drawer, Select, Calendar, CommandPalette, Tabs, Tree, Tooltip, etc.). Covers ThemeProvider setup, extendTheme, custom variants, mergeThemeClasses, useComponentTheme/useTheme hooks, and the 50+ component index.data-aitypescriptbashVotes: 0GitHub stars: 4
DataAUtility components for formatting, displaying, and managing data presentation. Most are renderless or minimal — they format values and return text.data-aiVotes: 0GitHub stars: 4
Data SizeAFormats byte values into human-readable sizes (B, KiB, MiB, GiB, etc.) using binary scale (1024). Also exports `formatSize` utility function.data-aiVotes: 0GitHub stars: 4
Date FormatAFormats dates using date-fns patterns. Supports relative time ("3 hours ago"), toggling between relative and absolute display, and auto-refreshing relative times.developmenttypescriptgoVotes: 0GitHub stars: 4
DurationAFormats millisecond values into human-readable durations (ms, s, min, hr, day, month). Auto-pluralizes units. Also exports `formatDuration` utility function.data-aiVotes: 0GitHub stars: 4
EllipsisATruncates text with expandable "..." toggle. Supports character limit and line-based truncation with responsive re-measurement.developmenttypescriptVotes: 0GitHub stars: 4
Skills DirectorySkills Directory Look up any of 103,619 scanned skills — grade, score, and every finding. Free.Check a skill
Infinity ListAProgressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports `useInfinityList` hook for custom implementations.data-aireactnodeVotes: 0GitHub stars: 4
PagerAPagination controls with page numbers, navigation arrows, and items range display. Supports three display modes: pages, items, or both.data-aitypescriptreactVotes: 0GitHub stars: 4
PluralizeAPluralizes text based on count. Wraps the `pluralize` library. Also exports a `pluralize` utility function.data-aiVotes: 0GitHub stars: 4
RedactAMasks sensitive content with a configurable character, keeping first and last characters visible. Click to toggle visibility.developmenttypescriptapiVotes: 0GitHub stars: 4
SortASortable column header utility with animated direction indicators. Cycles through `asc` → `desc` → `null` (unsorted). Built on Framer Motion.developmenttypescriptreactVotes: 0GitHub stars: 4
ElementsABasic UI building blocks for constructing interfaces. These are the foundational interactive and display components.data-aiVotes: 0GitHub stars: 4
AvatarADisplays a user avatar with image, auto-generated initials, or icon fallback. Supports color generation, variants, and click interaction.data-aitypescriptreactVotes: 0GitHub stars: 4
BadgeASmall status indicator or count label positioned relative to its child element. Animated on appearance using Framer Motion.data-aitypescriptVotes: 0GitHub stars: 4
ButtonAA versatile action trigger component built on Framer Motion with support for variants, colors, sizes, icons, and full theme customization.developmenttypescriptreactVotes: 0GitHub stars: 4
ChipACompact element for tags, filters, labels, or selections. Supports colors, variants, sizes, adornments, and interactive states (clickable, selectable). Uses `forwardRef` and keyboard accessibility (Enter/Space).data-aitypescriptreactVotes: 0GitHub stars: 4
Command PaletteASearchable command menu with keyboard navigation, sections, hotkey support, and animated items. Typically used inside a Dialog for modal access.developmenttypescriptgoVotes: 0GitHub stars: 4
Icon ButtonAA button optimized for icon-only actions. Wraps the Button component with square padding and removes `fullWidth`, `start`, and `end` props.developmenttypescriptreactVotes: 0GitHub stars: 4
KbdADisplays keyboard shortcuts with platform-aware modifier key symbols. Splits key combinations by `+` and renders each key as a styled Chip inside a `<kbd>` element.data-aitypescriptVotes: 0GitHub stars: 4
LoaderAAnimated loading indicator with three pulsing dots. Each dot animates opacity and scale with staggered timing using Framer Motion.data-aitypescriptVotes: 0GitHub stars: 4
NavigationANavigation system with two components: **NavigationBar** (container) and **NavigationButton** (items). Supports vertical/horizontal layout, animated active indicators, and `start`/`end` slot props for non-button content.developmenttypescriptgoVotes: 0GitHub stars: 4
SkeletonAPlaceholder loading skeleton for content areas. Supports predefined shape variants and an optional shimmer animation.data-aitypescriptVotes: 0GitHub stars: 4
FormAInput and control components for building forms and capturing user data. Includes text inputs, selects, date pickers, checkboxes, radios, toggles, and range sliders.data-aiVotes: 0GitHub stars: 4
CalendarADate picker calendar with day/month/year views, range selection, time picker, presets, min/max constraints, and animated transitions. Built on date-fns and Framer Motion.data-aireactnodeVotes: 0GitHub stars: 4
CheckboxAAnimated checkbox with SVG check/intermediate marks, label support, and keyboard accessibility. Built on Framer Motion with customizable SVG paths.data-aitypescriptreactVotes: 0GitHub stars: 4
Date InputAText input with calendar popup for date selection. Supports single dates and date ranges with optional preset quick filters. Built on Input, Calendar, and Menu components.data-aireactVotes: 0GitHub stars: 4
InputAText input with start/end adornments, error state, sizes, and imperative ref API. Also includes DebouncedInput and InlineInput variants.data-aitypescriptreactVotes: 0GitHub stars: 4
RadioARadio button with animated indicator and label. Use standalone or inside RadioGroup for managed selection.data-aitypescriptreactVotes: 0GitHub stars: 4
RangeASlider components for single value or dual-handle range selection. Draggable handles with tooltip display using Framer Motion.developmenttypescriptVotes: 0GitHub stars: 4
SelectAFeature-rich dropdown select with search filtering, keyboard navigation, multi-select, creatable options, and paste support. Uses Fuse.js for fuzzy search. Renders via ConnectedOverlay (Floating UI).data-aireactnodeVotes: 0GitHub stars: 4
TextareaAAuto-resizing multi-line text input built on `react-textarea-autosize`. Supports sizes, error state, and imperative ref API.data-aitypescriptreactVotes: 0GitHub stars: 4
ToggleAOn/off switch component with animated handle using Framer Motion spring animation. Supports sizes and custom animation configuration.developmenttypescriptnodeVotes: 0GitHub stars: 4
LayersAOverlay, modal, and popup components that render above the main content. Built on Floating UI for positioning and Framer Motion for animations. Most use focus trapping and backdrop support.data-aiVotes: 0GitHub stars: 4
BackdropAAnimated overlay backdrop for modals, dialogs, and drawers. Fades in/out with Framer Motion. Typically used internally by Dialog and Drawer.data-aitypescriptVotes: 0GitHub stars: 4
CalloutAInline alert/notification banner with icon and variant colors. Also exports pre-configured variants: SuccessCallout, ErrorCallout, WarningCallout, InfoCallout.data-aitypescriptreactVotes: 0GitHub stars: 4
Confirm DialogAConfirmation dialog with accept/reject actions. Built on Dialog. Also exports `useConfirmDialog` hook for imperative usage.data-aireactnodeVotes: 0GitHub stars: 4
Context MenuARight-click context menu using ConnectedOverlay (Floating UI). Supports focus trapping, global menu state (only one open at a time), and auto-close on click.developmenttypescriptreactVotes: 0GitHub stars: 4
DialogAModal dialog with backdrop, focus trapping, animated entrance/exit, and slot-based content. Built on GlobalOverlay and Framer Motion. Also exports `useDialog` hook.developmenttypescriptreactVotes: 0GitHub stars: 4
DrawerASlide-in side panel with backdrop, focus trapping, position variants, and slot-based content. Built on GlobalOverlay and Framer Motion. Also exports `useDrawer` hook.developmenttypescriptreactVotes: 0GitHub stars: 4
MenuADropdown menu positioned via ConnectedOverlay (Floating UI). Supports focus trapping, auto-width matching, and animated entrance/exit.data-aitypescriptreactVotes: 0GitHub stars: 4
NotificationAToast notification system with variants, auto-dismiss, flood prevention, and custom components. Wrap your app in `<Notifications>` and use `useNotification` hook to trigger.developmenttypescriptreactVotes: 0GitHub stars: 4
PopoverAContent popover anchored to an element. Built on Tooltip with focus trapping and click trigger. Supports all Tooltip positioning options.data-aitypescriptreactVotes: 0GitHub stars: 4
TooltipAHover tooltip with Floating UI positioning, animated entrance/exit, enter/leave delays, and follow-cursor mode. Global state ensures only one tooltip is visible at a time.developmenttypescriptreactVotes: 0GitHub stars: 4
LayoutAStructural and container components for organizing page content and navigation flow. Includes content containers, collapsible sections, dividers, form fields, lists, tabs, trees, and animation wrappers.data-ainodeVotes: 0GitHub stars: 4
BreadcrumbsANavigation breadcrumb trail built with composable sub-components: Breadcrumbs, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, and BreadcrumbPage.data-aitypescriptVotes: 0GitHub stars: 4
CardAContent container with optional header section. Renders as a `<section>` with border, background, rounded corners, and padding.data-aitypescriptVotes: 0GitHub stars: 4
CollapseAExpandable/collapsible content panel with animated height transition. Uses Framer Motion AnimatePresence for smooth open/close.developmenttypescriptreactVotes: 0GitHub stars: 4
DividerAVisual separator line. Renders as `<hr>`. Supports horizontal/vertical orientation and variant colors.data-aitypescriptVotes: 0GitHub stars: 4
FieldAForm field wrapper with label, hint text, error state, required indicator, and horizontal/vertical layout. Use to wrap any form input.data-aitypescriptreactVotes: 0GitHub stars: 4
ListAStructured list display with items, headers, adornments, and interactive states. Composed of List, ListItem, and ListHeader.data-aitypescriptreactVotes: 0GitHub stars: 4

Skills Directory

Security-tested agent skills for Claude, coding agents, and AI workflows.

Stay in the loop

Get weekly updates on the best new skills and tutorials.

Email address

Directory

Browse skills
All skills A–Z
Claude skills
Claude Code skills
Agent skills
Categories
Authors
Submit a skill

Learn and security

Learn hub
Install Claude skills
Write SKILL.md
Skills vs MCP
Directories compared
Security
Security methodology
Secure Claude skills
Security badges

Company

About
Pro
Blog
API docs
Chrome extension
Skill Manager
Advertise
Terms
Privacy
Refunds

© 2026 Skills Directory. All rights reserved.