Skills

Give your AI coding assistant full knowledge of Shelf UI — so it installs, composes, and customizes components correctly on the first try.

Skills are context files that give your AI coding assistant knowledge of Shelf UI's component APIs, install commands, and composition patterns. With a skill installed, your assistant knows how to find the right component, add it to your project, and compose it correctly — without hallucinating props or making up import paths.

What you can ask

Once installed, prompt your assistant naturally:

"Add a drag-and-drop file upload zone that accepts images only and shows a preview grid."

"Build a file manager with a tree sidebar, breadcrumb navigation, and a grid view."

"Show me how to connect the Dropzone to Supabase Storage."

The skill gives your assistant the exact component APIs and shadcn registry commands, so it generates working code on the first try.

Supported editors

Cursor

Rules file or MDC skill

Claude Code

CLAUDE.md context file

Windsurf

Cascade config

GitHub Copilot

Copilot instructions

Install

Cursor

Add Shelf UI as a documentation source in Cursor's settings so it can be indexed and referenced inline.

Open Cursor Settings → Features → Docs

Click Add new doc and enter:

https://shelf-ui.vercel.app/llms-full.txt

Cursor will index the full Shelf UI documentation. Use @shelf-ui in any prompt to scope your question to Shelf UI.

Alternative: Rules file

Add the skill file directly to your .cursorrules or a .cursor/rules/*.mdc file:

terminal

curl -o .cursor/rules/shelf-ui.mdc https://shelf-ui.vercel.app/skills/shelf-ui.md

The rule will be applied automatically to every Cursor conversation in your project.

Claude Code

In your project root, create or open CLAUDE.md

Add an import reference to the Shelf UI skill:

CLAUDE.md

## UI Components

This project uses Shelf UI for file-related components.

@https://shelf-ui.vercel.app/skills/shelf-ui.md

Claude Code will automatically load the skill on every session in this project.

You can also paste the raw skill content directly into CLAUDE.md if you prefer to version-control it without an external reference.

Windsurf

Open Windsurf Settings → Cascade → Knowledge

Add a new knowledge entry with source URL:

https://shelf-ui.vercel.app/llms-full.txt

Cascade will index Shelf UI and apply it automatically to relevant conversations.

Alternative: Global rules

terminal

curl -o ~/.codeium/windsurf/memories/shelf-ui.md https://shelf-ui.vercel.app/skills/shelf-ui.md

GitHub Copilot

In your repo root, create .github/copilot-instructions.md if it doesn't exist

Add the Shelf UI context:

.github/copilot-instructions.md

## File UI Components

This project uses Shelf UI. Component docs and registry:
https://shelf-ui.vercel.app/llms.txt

Copilot will use this as workspace context in all conversations.

What the skill contains

The skill file at /skills/shelf-ui.md (repo root) includes:

Full component list — every component name, category, and one-line description
Install commands — shadcn CLI commands for npm, pnpm, yarn, and bun
Prop reference — key props for every component with types and defaults
Composition patterns — how to combine components (e.g., Dropzone + UploadQueue + StorageQuota)
Hook APIs — useFileUpload, useUploadQueue, useFileTree, useStorageProvider
Storage adapter setup — Supabase, S3, and Cloudinary config snippets

Raw skill file

The machine-readable skill file is available at:

GitHub: /skills/shelf-ui/shelf-ui.md
Direct URL: https://shelf-ui.vercel.app/skills/shelf-ui.md

You can reference it in any AI tool that supports URL-based knowledge sources.

Cursor

Claude Code

Windsurf

GitHub Copilot

On this page