Render image galleries with synchronized thumbnails and carousel for React/Next.js apps.
npx skills add https://github.com/TechsioCZ/new-engine --skill gallery-usage
Please help me install this Agent Skill. Skill: gallery-usage Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/gallery-usage Command: npx skills add https://github.com/TechsioCZ/new-engine --skill gallery-usage
Use after component-usage-ux when an app needs @techsio/ui-kit Gallery for product or media image galleries with Carousel integration, thumbnails, controlled page, orientation, thumbnail image adapters, thumbnail aria labels, empty state, and NextImage support.
Create a Gallery with Main, Thumbnails, and Carousel to render a functional image gallery.
High-intent search queries and answers about installing and using this skill.
To implement an image gallery with synchronized thumbnails in React, coordinate Gallery.Main, Gallery.Carousel, and Gallery.Thumbnails components. This integration synchronizes image navigation across the main view and thumbnail strip, supporting responsive layouts and controlled page states for product or media galleries.
To add custom aria-labels to thumbnail navigation in Next.js galleries, use the thumbnail labeling support within the Gallery component. Accessible thumbnail labeling allows you to define specific aria-label attributes, ensuring screen readers properly announce individual images during carousel navigation.
Yes, the UI kit gallery component supports NextImage adapters. You can configure thumbnail image adapters to use NextImage, enabling optimized image loading and responsive delivery within the gallery carousel and thumbnail navigation workflow in Next.js applications.
Yes, you can change the orientation of a carousel and thumbnail gallery layout. The gallery component supports flexible orientation settings, allowing you to configure the display direction for the main carousel and synchronized thumbnails to fit responsive layout requirements.
The best way to handle an empty state in a product image gallery is to utilize the built-in empty state support within the Gallery component. This feature manages the UI rendering when no images are available, ensuring the layout remains visually consistent without manual conditional logic.
You need the @techsio/ui-kit to build a media gallery with controlled page navigation. The kit provides the required Gallery components to manage synchronized thumbnail navigation, carousel behavior, and controlled page state for React and Next.js applications.
LimaTechnologiesImplement shadcn/ui components in React and Next.js projects.
Camilo8902Generate page layouts and shells for dashboards, authentication, settings, and CRUD interfaces.
BigPapiCBIdentify and enforce WCAG compliance, ARIA patterns, and keyboard operability in UI components.
hasnaAdapt @xstate/store atoms to json-render's StateStore interface.
