chore: add Claude files

Author: wangdicoder

.claude/skills/release.md

@@ -0,0 +1,61 @@
+---
+name: release
+description: Create a changeset, commit, push, and open a PR for releasing packages
+user_invocable: true
+---
+
+# Release Skill
+
+When the user invokes `/release`, follow these steps:
+
+## Step 1: Determine the branch
+
+- Run `git branch --show-current` to get the current branch.
+- If on `master`, create a new branch based on the changes:
+  - Check `git diff master --name-only` and `git log master --oneline` to understand what changed.
+  - Create a meaningful branch name like `fix/short-description` or `feat/short-description`.
+  - Run `git checkout -b <branch-name>`.
+- If already on a dev branch, continue on it.
+
+## Step 2: Analyze changes
+
+- Run `git diff master...HEAD --stat` and `git log master...HEAD --oneline` to understand all changes since master.
+- Determine the appropriate bump type:
+  - `patch` for bug fixes
+  - `minor` for new features (backwards compatible)
+  - `major` for breaking changes
+- Identify which packages are affected by checking which `packages/*/` directories have changes.
+
+## Step 3: Create changeset
+
+- Create a markdown file in `.changeset/` with a descriptive kebab-case filename (e.g., `fix-form-useform-hook.md`).
+- Use this format:
+
+```markdown
+---
+"@tiny-design/react": patch
+---
+
+Short description of the change
+```
+
+- Only include packages that actually have code changes (not `@tiny-design/docs` as it's ignored in changeset config).
+- Note: packages `@tiny-design/react`, `@tiny-design/icons`, and `@tiny-design/tokens` are in a fixed version group — they version together.
+
+## Step 4: Commit the changeset
+
+- Stage only the changeset file: `git add .changeset/<filename>.md`
+- Commit with message: `chore: add changeset for <summary>`
+
+## Step 5: Push to remote
+
+- Push the branch: `git push -u origin <branch-name>`
+
+## Step 6: Create a Pull Request
+
+- Use `gh pr create` to open a PR targeting `master`.
+- Title should follow the commit convention: `fix(react): ...` or `feat(react): ...`
+- Body should include:
+  - `## Summary` — bullet points describing the changes
+  - `## Release` — the bump type and affected packages
+  - `## Test plan` — how to verify the changes

.gitignore

@@ -20,7 +20,9 @@ apps/docs/build
 .DS_Store
 
 # Claude
-.claude
+!.claude
+.claude/*
+!.claude/skills/
 
 # Misc
 *.tgz

CLAUDE.md

@@ -0,0 +1,99 @@
+# CLAUDE.md
+
+## Project Overview
+
+Tiny Design is a React component UI library (80+ components) published as `@tiny-design/react`. It's a pnpm monorepo managed with Turborepo.
+
+## Monorepo Layout
+
+```
+packages/react/    → @tiny-design/react (main component library)
+packages/tokens/   → @tiny-design/tokens (design tokens, SCSS variables)
+packages/icons/    → @tiny-design/icons (SVG icon components)
+apps/docs/         → documentation site (Vite + MDX)
+```
+
+All three publishable packages use **fixed versioning** — they always share the same version number.
+
+## Common Commands
+
+```bash
+pnpm install              # Install dependencies
+pnpm dev                  # Start docs dev server
+pnpm build                # Build all packages (turborepo handles dependency order: tokens → react → docs)
+pnpm test                 # Run all tests
+pnpm lint                 # ESLint across all packages
+pnpm lint:style           # Stylelint for SCSS files
+```
+
+### Scoped Commands
+
+```bash
+pnpm --filter @tiny-design/react test -- --testPathPattern=button   # Test a single component
+pnpm --filter @tiny-design/react test:update                        # Update snapshots
+pnpm --filter @tiny-design/react test:coverage                      # Coverage report
+```
+
+## Component Structure
+
+Every component in `packages/react/src/` follows this layout:
+
+```
+component-name/
+├── component-name.tsx       # Implementation (React.forwardRef, function components)
+├── types.ts                 # Props interfaces
+├── index.tsx                # Barrel export
+├── index.md                 # English docs
+├── index.zh_CN.md           # Chinese docs
+├── style/
+│   ├── _index.scss          # Styles (SCSS partial)
+│   └── index.tsx            # Style entry point
+├── demo/
+│   └── basic.tsx            # Usage examples
+└── __tests__/
+    └── component-name.test.tsx
+```
+
+When adding a new component:
+1. Create its directory under `packages/react/src/`
+2. Export it from `packages/react/src/index.ts`
+3. Add a route in `apps/docs/src/routers.tsx`
+
+## Code Conventions
+
+- **TypeScript strict mode** is enabled
+- **CSS class prefix**: `ty-` (e.g., `.ty-btn`, `.ty-modal`), customizable via `ConfigProvider`
+- **BEM-ish naming**: `ty-component`, `ty-component__element`, `ty-component_modifier`
+- **Ref forwarding**: all components use `React.forwardRef`
+- **Props pattern**: extend `BaseProps` (style, className, prefixCls) + intrinsic element props
+- **Formatting**: Prettier — single quotes, semicolons, 100 char width, 2-space indent
+- **Commits**: Conventional Commits — `feat(button): add loading state`, `fix(modal): prevent scroll`
+- **Pre-commit hook**: husky + lint-staged auto-fixes SCSS via stylelint
+
+## Testing
+
+- **Framework**: Jest + @testing-library/react + @testing-library/jest-dom
+- **Config**: `packages/react/jest.config.js` (ts-jest, jsdom environment)
+- Tests live in `__tests__/` within each component directory
+
+## Build Pipeline
+
+The react package build (`packages/react`):
+1. `tsdown` — transpiles TS → JS (ESM in `es/`, CJS in `lib/`), generates `.d.ts`
+2. `build-styles.js` — compiles component SCSS → CSS via Sass + PostCSS
+3. `inject-style-imports.js` — adds CSS imports into JS entry files
+
+## Changesets & Releases
+
+- Use `pnpm changeset` to create a changeset file in `.changeset/`
+- On merge to `master`, CI creates a "Version Packages" PR
+- Merging that PR publishes to npm and deploys the docs site
+- `@tiny-design/docs` is excluded from npm publishing
+
+## Key Dependencies
+
+- React 18.2+, TypeScript 5.4
+- Popper.js (`@popperjs/core`) for positioning (tooltips, dropdowns, popovers)
+- `react-transition-group` for animations
+- `classnames` for conditional class construction
+- Node.js >= 22, pnpm 10.x