Component Gallery

Component Gallery — Pattern Research via Local RAG

Research real component implementations before building. The gap between "I'll make a sidebar" and "here's how Atlassian, Shopify, and GitHub each solved sidebar navigation" is the gap between guessing and grounding. This skill bridges it.

Philosophy

Every UI component has been built thousands of times. The best implementations share patterns that no single designer invented—they emerged from convergent problem-solving across design systems with different constraints. Studying these patterns before writing code prevents reinventing solved problems, surfaces accessibility requirements that are easy to miss, and reveals implementation trade-offs that only become visible when comparing multiple approaches side by side.

Pattern research is not copying. It is the equivalent of a literature review before writing a paper. Build with awareness of what exists, then make deliberate choices about what to keep, adapt, or reject.

Quick Reference — Static Indexes

Read these files directly for fast lookup. No RAG query needed.

Counts live in the generated indexes, not here — the builder derives them from the crawl so they can't drift.

For a quick answer to "what is this component called?" or "which design systems use React?"—read the index files. Reserve RAG queries for deeper questions.

RAG Query — Semantic Search

Query the component-gallery RLAMA collection for implementation details, cross-system comparisons, and pattern analysis.

# How do production design systems implement a specific component?
python3 ~/.claude/skills/component-gallery/scripts/query.py "how do design systems implement date picker accessibility"

# Compare implementations across systems
python3 ~/.claude/skills/component-gallery/scripts/query.py "compare sidebar navigation patterns"

# Find components that solve a specific UX problem
python3 ~/.claude/skills/component-gallery/scripts/query.py "components for progressive disclosure of complex forms"

# Search by alternative name (e.g., "flyout" → Drawer)
python3 ~/.claude/skills/component-gallery/scripts/query.py "flyout panel slide from edge"

# Broader queries benefit from more chunks
python3 ~/.claude/skills/component-gallery/scripts/query.py "responsive table patterns" -k 20

# Scope to a component, system, or source kind
python3 ~/.claude/skills/component-gallery/scripts/query.py "focus management" --component modal
python3 ~/.claude/skills/component-gallery/scripts/query.py "token structure" --system polaris
python3 ~/.claude/skills/component-gallery/scripts/query.py "tool call states" --source curated-pattern

Default retrieve-only mode returns raw chunks for Claude to synthesize. This produces stronger analysis than local model generation. When Ollama is unreachable, the query script degrades to a lexical scan over the staged corpus and says so in its output header — the static indexes above always work regardless.

Workflow Protocol — Pairing with minoan-frontend-design

Component Gallery provides the what (pattern research, implementation precedent, accessibility requirements). Minoan Frontend Design provides the how (creative direction, typography, color, spatial composition, craft standards).

Research-then-build sequence

1. Identify components needed. Read references/component-index.md to confirm the component type exists and find its canonical name.
2. Query for implementation patterns. Use RAG to retrieve how 3-5 design systems approach the component—focus on structure, states, accessibility, and responsive behavior.
3. Synthesize findings. Identify convergent patterns (things most systems agree on) and divergent choices (where systems differ based on context).
4. Build with minoan-frontend-design. Apply creative direction from the design skill. The component's structure is informed by research; its aesthetic is informed by the design skill.
5. Verify accessibility. Cross-reference research findings against the implementation. Confirm ARIA roles, keyboard navigation, focus management, and screen reader announcements.

When to skip research

For trivial components (a single button, a text input) where the implementation is well-understood and creative direction is the primary concern, invoke minoan-frontend-design directly. Reserve component-gallery queries for components with meaningful structural complexity: data tables, date pickers, command palettes, multi-step forms, sidebar navigation, filterable lists.

Maintenance

# Full re-crawl and rebuild (run when component.gallery updates)
python3 ~/.claude/skills/component-gallery/scripts/ingest.py --full

# Rebuild RLAMA collection only (from existing scraped files)
python3 ~/.claude/skills/component-gallery/scripts/ingest.py --rebuild-rag

# Rebuild static indexes + index.json from staged data
python3 ~/.claude/skills/component-gallery/scripts/build_indexes.py

# Check design-system URLs for rot (report-only)
python3 ~/.claude/skills/component-gallery/scripts/validate_links.py

Refresh is transactional: the crawl lands in a staging-next snapshot, validates, and builds the new collection before the old one is replaced — a failed rebuild leaves the current data serving. crawl-meta.json records when the source data was actually crawled; the indexes report that date separately from their rebuild date. Deep-dives are discovered from the upstream repo with commit-SHA provenance, not a hardcoded list. The dataset ages — when the crawl date in the indexes is more than a quarter old, run the refresh before leaning on counts or coverage claims.

3D / WebGL Inspiration — mesh3d.gallery

For 3D interactive web experiences, query mesh3d.gallery — a curated directory of 207+ WebGL/Three.js/Spline websites, hand-picked by human curators. Filterable by technology, maker, and tags.

# Fetch and search the directory
python3 ~/.claude/skills/component-gallery/scripts/fetch_mesh3d.py --tech "Three.js"
python3 ~/.claude/skills/component-gallery/scripts/fetch_mesh3d.py --maker "Lusion"
python3 ~/.claude/skills/component-gallery/scripts/fetch_mesh3d.py --search "portfolio"

See references/mesh3d-gallery.md for the full reference. Use component-gallery for 2D UI patterns, mesh3d.gallery for 3D interaction patterns.

Anti-Patterns

Guessing component structure. Never invent a component's ARIA pattern, keyboard behavior, or state machine from first principles when the collection contains documented patterns from production design systems. Query first.

Skipping accessibility review. Every component query should include or be followed by an accessibility check. The most common failure mode is building a visually correct component that is inaccessible to keyboard and screen reader users.

Treating examples as templates. Design system examples document their constraints (Shopify's Polaris serves commerce, Atlassian's ADS serves enterprise collaboration). Extract the structural pattern, not the specific aesthetic. The aesthetic comes from minoan-frontend-design.

Over-querying for simple components. A styled button does not need a five-system comparison. Match query depth to component complexity.

Ignoring responsive behavior. Desktop-only component research misses half the problem. Query explicitly for responsive patterns when the component will appear on mobile.

Related Skills

• minoan-frontend-design — the build arm; this skill researches structure, that one owns aesthetic and craft (division detailed under Workflow Protocol above).
• conductor-motion — the animation arm. Component states researched here (progress, skeleton, toast, streaming) get their behavioral animation from conductor-motion's modes; its streaming-text and top-layer templates implement the ai-components overlay's streaming-status and toast patterns directly.
• overwatch-slidedeck — consumes this research when deck components need precedent (its SocialProofCard, TabGroup, and ProgressBar follow patterns documented in the corpus).
• shadcn — when the build target is shadcn/ui specifically, research patterns here first, then implement there; note the Base UI pivot in the design-system index's currency section.