Skip to content

AGENTS.md

Latest commit

 

History

History
73 lines (54 loc) · 1.95 KB

AGENTS.md

File metadata and controls

73 lines (54 loc) · 1.95 KB

Vue Scroll Area - Agent Guide

Vue 3 custom scroll area component library with DOM-level custom scrollbar.

Tech Stack

  • Vue 3.5+ / TypeScript 5.8+ / Vite 7.0+
  • pnpm 10.13.1 + workspaces
  • dprint (formatting) / oxlint (linting)
  • husky + lint-staged (Git Hooks)

Project Structure

packages/
├── scroll-area/          # Main library (vue-scroll-area)
│   ├── src/components/   # Vue components and core logic
│   │   ├── ScrollArea.vue      # Main component
│   │   ├── setup-scroll.ts     # Core scroll logic
│   │   ├── public-types.ts     # Public types
│   │   └── index.css           # Component styles
│   └── dist/             # Build output
└── playground/           # Dev/demo app

Common Commands

# Development
pnpm dev              # Run both lib and playground
pnpm dev:lib          # Library only (watch mode)
pnpm dev:playground   # Playground only

# Build
pnpm build            # Build library

# Code quality
pnpm format           # Format files (use first)
pnpm lint:fix         # Auto-fix lint errors (use first)
pnpm lint             # Check lint

Code Style

Fixing Lint/Format Errors

Always try auto-fix first, do not manually edit:

pnpm lint:fix
pnpm format

Language Rules

Context Language
User interaction Chinese
Documentation, code comments English
Source code English
Commit messages English

Dev Conventions

  • Use <script setup lang="ts">
  • Styles in index.css (not scoped), BEM naming .scroll-area-*
  • Use CSS variables for dynamic values, not inline styles

Notes

  • If playground doesn't see changes, ensure lib is built (pnpm dev:lib)
  • If types don't resolve, run pnpm build to generate declarations
  • No need to kill and restart the dev server — this project supports HMR