Art Blocks Gallery Development

This skill provides expert guidance for developing and maintaining an immersive Art Blocks NFT gallery and slideshow experience built with Next.js 15.

Overview

The application creates a gallery and slideshow experience for Art Blocks generative NFTs with comprehensive search, ENS integration, and a selection-based slideshow builder.

Development Commands

When working with this codebase, use these commands:

`npm run dev` - Start development server with Turbopack

`npm run build` - Create production build

`npm start` - Serve production build

`npm run lint` - Run ESLint checks

Architecture Components

1. Core Data Layer (lib/ab.ts)

The data layer provides all Art Blocks API interactions:

**GraphQL Integration**: All queries use `https://data.artblocks.io/v1/graphql`

**Search Functions**: Search for artists, collections, collectors, and tokens

**URL Parsing**: Extract token information from Art Blocks URLs

**ENS Integration**: Resolve ENS names with 24-hour caching

**URL Composition**: Generate Art Blocks API endpoints (token, generator, media)

**Selection System**: Handle multi-type selections (artist:name, project:name, collector:address, token:id)

When modifying data layer:

All GraphQL queries must target the Art Blocks endpoint

Maintain ENS caching to avoid rate limits

Selection types must be colon-separated (type:value)

Generator URLs come from Art Blocks token API

2. Application Routes

**Home (app/page.tsx)**

Clean search interface

Type selection: Token URL, Artist, Collection, Collector

Minimal, gallery-inspired design

**Search Results (app/search/page.tsx)**

Display results based on search type

Infinite scrolling for large result sets

Shopping cart-style selection system

Metadata fetching from Art Blocks token API

LocalStorage persistence for selections

**Slideshow Player (app/slideshow/player/page.tsx)**

Full-screen immersive experience

Art Blocks generator URLs in iframes

Auto-advance with configurable timing

Collapsible sidebar with token information

Keyboard navigation: arrows, space, escape, cmd+i

URL parameters: selection, duration, autoPlay, showInfo, randomOrder, showBorder

3. UI Framework

**Technology Stack**

**shadcn/ui**: "new-york" style variant with Radix UI

**Tailwind CSS**: Version 4 with neutral colors

**Components**: Pre-built in `components/ui/`

**Styling Conventions**

Minimal, clean aesthetic inspired by gallery spaces

Use `font-light` for typography

Use `rounded-none` for sharp edges

Neutral color palette (grays and whites)

Full-screen experiences on slideshow pages

Key Features to Maintain

1. **Art Blocks API Integration**

- GraphQL for search and metadata

- Token API for live generator URLs

- Direct links to Art Blocks pages

2. **ENS Support**

- Resolve all Ethereum addresses to ENS names

- 24-hour cache to prevent rate limiting

- Display ENS names in UI when available

3. **Selection-based Slideshows**

- Users select artists, collections, collectors, or tokens

- Selections stored in localStorage

- Resolved to token IDs via `resolveSelectionTokenIds()`

- Serialized in URL parameters

4. **Live Generator Display**

- Use Art Blocks generator URLs

- Display in iframes for security

- Full-screen presentation mode

5. **Responsive Design**

- Desktop and mobile support

- Full-screen experiences on slideshow

- Touch and keyboard navigation

Data Flow

When implementing features, follow this data flow:

1. User searches via homepage or search page

2. Query Art Blocks GraphQL API for results

3. Users build selections (stored in localStorage)

4. Slideshow resolves selections to token IDs

5. Player fetches generator URLs and displays in iframes

TypeScript Configuration

Next.js 15 with React 19

Path mapping: `@/*` maps to project root

Strict mode enabled

Incremental compilation for faster builds

Development Guidelines

**When Adding Features**

Maintain minimal gallery aesthetic

Ensure mobile responsiveness

Use existing UI components from `components/ui/`

Follow Art Blocks API patterns from `lib/ab.ts`

Persist user preferences in localStorage

Add keyboard shortcuts for power users

**When Fixing Bugs**

Check Art Blocks API response format

Verify ENS caching is working

Test iframe security and loading

Validate URL parameter serialization

Test infinite scroll performance

**When Refactoring**

Keep data layer pure and testable

Maintain separation between search and slideshow

Preserve localStorage schema for backward compatibility

Keep styling conventions consistent

Common Tasks

**Adding a New Search Type**

1. Add GraphQL query to `lib/ab.ts`

2. Add search function with proper typing

3. Update search page to handle new type

4. Add selection support if needed

**Modifying Slideshow Controls**

1. Update URL parameter interface

2. Modify player page to handle new parameter

3. Add UI controls in sidebar

4. Update keyboard shortcuts if applicable

**Changing UI Components**

1. Locate component in `components/ui/`

2. Maintain "new-york" style variant

3. Use Tailwind utility classes

4. Test in both light and dark modes

**API Integration Changes**

1. Update GraphQL queries in `lib/ab.ts`

2. Update TypeScript interfaces

3. Test with Art Blocks staging/production

4. Handle error cases gracefully

Important Notes

Always use Art Blocks official APIs - never scrape

Respect rate limits on ENS resolution

Generator URLs must be in iframes for security

Selection format is critical: `type:value`

LocalStorage is used for cart persistence

Full-screen mode requires careful CSS handling

Art Blocks Gallery Development

Art Blocks Gallery Development

Overview

Development Commands

Architecture Components

1. Core Data Layer (lib/ab.ts)

2. Application Routes

3. UI Framework

Key Features to Maintain

Data Flow

TypeScript Configuration

Development Guidelines

Common Tasks

Important Notes

Reviews (0)