crafter-stationcrafter-station/elements/CLAUDE.md

elements

CLAUDE.md524 starsChanged 9 months agoMITView on GitHub

Full-stack shadcn/ui components. Registry-based architecture for AI-native and developer tool components. Before modifying code in a subdirectory, read its AGENTS.md first to understand local patterns and invariants. The documentation uses Fumadocs with custom configuration: Uses OKLCH color space for consistent color management across light/dark themes: - Custom CSS variables for theme-aware colors - Tailwind configuration with custom color tokens - Fumadocs integration with shadcn/ui components

We split this CLAUDE.md into the rules it gives an agent

2 rules. About 0 are common, 1 is distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
All components follow shadcn/ui registry schema (registry-item.json)
line 17
Distinctive:
Use OKLCH color system for theming (not hex/hsl)
line 18

≈ “Common” is an estimate: at least 1 in 5 of the 25,680 CLAUDE.md files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

CLAUDE.md

Elements

Full-stack shadcn/ui components. Registry-based architecture for AI-native and developer tool components.

Intent Layer

Before modifying code in a subdirectory, read its AGENTS.md first to understand local patterns and invariants.

Area	Path	Tokens	Purpose
Registry	`registry/AGENTS.md`	~282k	Component definitions, shadcn schema
Components	`src/components/AGENTS.md`	~129k	UI primitives, site components
Content	`src/content/AGENTS.md`	~48k	MDX docs, provider configs

Global Invariants

All components follow shadcn/ui registry schema (registry-item.json)
Use OKLCH color system for theming (not hex/hsl)
Fumadocs with Vesper theme for documentation
Bun for package management (never npm)
Biome for linting/formatting (never ESLint/Prettier)

Component Architecture

registry/default/blocks/{category}/{component-name}/
├── registry-item.json       # Schema, dependencies, metadata
└── components/elements/     # TSX implementation

src/components/ui/           # Base shadcn primitives
src/components/elements/     # Site-specific elements
src/content/components/      # MDX documentation

Project Structure

src/
├── app/
│   ├── docs/                 # Documentation pages
│   │   └── layout.tsx       # Docs layout configuration
│   ├── globals.css          # Global styles and theme configuration
│   └── page.tsx            # Main landing page
├── components/
│   ├── elements-logo.tsx    # Elements brand logo component
│   ├── component-card.tsx   # Component showcase cards
│   └── quickstart-card.tsx  # Quick start guide cards
├── lib/
│   ├── layout.shared.tsx    # Shared layout configuration for fumadocs
│   ├── source.ts           # Documentation source configuration
│   └── utils.ts            # Utility functions
└── content/
    └── docs/               # MDX documentation content

Key Technologies

Next.js 15 - React framework
Fumadocs - Documentation framework with custom Vesper theme
TypeScript - Type safety
Tailwind CSS - Styling with custom OKLCH color system
MDX - Markdown with JSX components

Development Commands

bun dev
bun run build
bun run lint
bun run typecheck

Documentation Configuration

The documentation uses Fumadocs with custom configuration:

Theme: Custom Vesper theme (light/dark variants)
Layout: Custom sidebar with Elements logo
Code Highlighting: Vesper theme for syntax highlighting
Sidebar: Non-collapsible with custom positioning

Styling System

Uses OKLCH color space for consistent color management across light/dark themes:

Custom CSS variables for theme-aware colors
Tailwind configuration with custom color tokens
Fumadocs integration with shadcn/ui components

Custom Components

ElementsLogo: SVG logo component with current color fill
ComponentCard: Showcase cards for component library
QuickstartCard: Interactive cards for getting started guides

Notes

Sidebar toggle positioned to far left via custom CSS overrides
Custom code block styling with Vesper theme integration
Logo integrated into navigation and sidebar banner

Download now (ZIP)

In this repository13 other files it gives its agents.
- registry/AGENTS.mdAGENTS.md
- ai-elementsSkill
- create-elementSkill
- devtools-elementsSkill
- elementsSkill
- github-elementsSkill
- logo-with-variantsSkill
- polar-elementsSkill
- sfx-elementsSkill
- tech-logosSkill
- theme-elementsSkill
- uploadthing-elementsSkill
- upstash-elementsSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free