Move docs/ package mirror into document-navigator plugin

Relocate the ~6k-file docs tree from the repo root into
plugins/document-navigator/docs/ so the plugin is self-contained and
portable. docs/superpowers/ (specs and plans) stays at the repo root.

Moved via cp+rm rather than git mv because directory rename() fails with
EPERM on this WSL /mnt DrvFs mount; git rename-detection pairs the
identical-content files at commit time.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-30 01:10:00 +01:00
parent fe3fedf42e
commit 9bf56a806b
6022 changed files with 12437 additions and 0 deletions

View File

@@ -0,0 +1,5 @@
{
"name": "suaveplan-package-structure",
"version": "1.0.0",
"description": "Library package structure patterns and code organization rules for Suaveplan monorepo"
}

View File

@@ -0,0 +1,232 @@
---
name: package-structure
description: Library package structure patterns, code organization rules, documentation requirements, and Storybook conventions for the Suaveplan monorepo
---
# Package Structure & Code Organization
Use this skill when creating new packages, adding modules to existing packages, or organizing code within the Suaveplan monorepo. Covers architecture principles, file placement, documentation requirements, and component conventions.
## Package Architecture Principles
- **Universal packages** (`packages/<category>/<sub-category>/<pkg>` with no React/DOM imports) must have ZERO browser/React dependencies
- **Browser packages** (`packages/<category>/<sub-category>/<pkg>` that imports React or DOM APIs) can depend on React, DOM APIs, and browser-specific libraries
- **Server packages** (`packages/<category>/<sub-category>/<pkg>` that imports Node.js APIs) can depend on Node.js APIs and server-specific libraries
Place utilities in the appropriate category:
- CSS/Tailwind utilities (cn, clsx, tailwind-merge) belong in `@suaveplan/react-ui`
- React hooks and components belong in browser or react packages
- Platform-agnostic utilities belong in universal packages
## Think Before Write
Before creating any file:
1. Consider WHERE to place it (correct package category)
2. Check existing patterns and structure in the target package
3. Use `tests/` for test files
4. Use `scripts/` for utility scripts
5. Use `claudedocs/` for Claude-generated documentation
## Documentation Requirement
**Every implementation file MUST have a corresponding .md file** co-located in the same directory with the same name (`MyClass.ts` -> `MyClass.md`).
### Exclusions (no .md required)
- `.test.ts` / `.test.tsx` -- test files
- `.spec.ts` -- Playwright E2E files
- `.types.ts` -- types files within a component directory (shared type files in `types/` DO need docs)
- `.stories.tsx` -- Storybook stories
- `constants/index.ts` -- simple constant exports
### Content Requirements
- **Minimum 200 words** of content (excluding code blocks)
- **Both simple AND advanced examples** are mandatory in every doc
- **Code examples must compile** -- use real types and imports from the package
- **No marketing language** -- state capabilities honestly
- **No placeholder text** -- every section must contain real content
- **Update when code changes** -- documentation must stay in sync
### Template
Use standard template from `.claude/templates/module-docs.md`. Required sections:
1. **Purpose** -- What the module does and why it exists (minimum 2 sentences)
2. **Features** -- Bullet list of capabilities
3. **Usage: Basic Example** -- Simple import and usage (the "happy path")
4. **Usage: Advanced Example** -- Composition, configuration, edge cases
5. **API Reference** -- Every public export documented with parameters and return types
6. **Implementation Notes** -- Design decisions, performance considerations, known limitations
### Example Structure
````markdown
# Module Name
## Purpose
Brief description of what this module does and why it exists.
## Features
- Feature 1
- Feature 2
## Usage
### Simple Example
```typescript
import { MyClass } from '@suaveplan/package';
const instance = new MyClass();
```
### Advanced Example
```typescript
import { MyClass } from '@suaveplan/package';
const instance = new MyClass<CustomType>({
onEvent: (data) => transform(data),
strategy: 'optimized',
});
```
## API Reference
### MyClass
#### constructor(options?: Options)
...
## Implementation Notes
- Design decisions
- Performance considerations
````
### Documentation Hierarchy
Three-level linking structure:
```text
packages/<category>/<sub-category>/<package>/
README.md # Level 1: Package overview
src/
<category>/
README.md # Level 2: Category index
<feature>/
<feature>.md # Level 3: Module documentation
```
- Root `README.md` -> Category `README.md` -> Feature `.md`
- Each level links to the next, creating discoverable documentation
## Library Package Structure Pattern
For library packages (especially in `packages/*/*/*`):
### Category Organization
- Group related features into category directories (e.g., `asymmetric/`, `symmetric/`, `core/`)
- Each category directory MUST have a `README.md` index linking to all feature modules
- Feature modules go in subdirectories within categories
### Feature Module Pattern (four files per feature)
```text
category/
README.md # Category index
feature-name/
feature-name.ts # Implementation
feature-name.test.ts # Tests
feature-name.types.ts # Type definitions
feature-name.md # Documentation
```
### Special Directories
- `types/`: Shared types, flat structure (`.ts` + `.md` only, no tests)
- `utils/`: Utilities, flat structure (`.ts` + `.test.ts` + `.md`)
- `constants/`: Just `index.ts` file (no tests or docs required)
### Subpath Exports (for tree-shaking)
Add granular exports in `package.json` for each feature module:
```json
{
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./category/feature/feature": {
"types": "./dist/category/feature/feature.d.ts",
"import": "./dist/category/feature/feature.js"
}
}
}
```
### Full Example (from @suaveplan/crypto-keys)
```text
packages/security-stack/crypto/crypto-keys/
README.md # Package overview
src/
factory/
README.md # Category index
factory.ts
factory.test.ts
factory.md
signer/
signer.ts
signer.test.ts
signer.types.ts
signer.md
hashers/
README.md
raw/
domain/
merkle/
codecs/
README.md
cbor/
tlv/
recursive-ed25519/
types/ # Shared types (flat)
codec.ts
codec.md
hasher.ts
hasher.md
chain-level.ts
chain-level.md
utils/ # Utilities (flat)
utils.ts
utils.test.ts
utils.md
constants/ # Constants (no tests/docs)
index.ts
```
## Storybook Stories Required for Components
Every React component MUST have a corresponding `.stories.tsx` file with:
- A default story
- A playground story with controls
- Key variant stories
Storybook is the primary visual documentation for UI components. Components without stories are considered incomplete.
## Naming Conventions
- Follow language/framework standards (camelCase for JS/TS)
- Files, functions, variables must clearly describe purpose
- No mixed naming conventions within same project
## Clean Workspace
- Remove temporary files when done
- Delete build artifacts and logs
- No artifact pollution (debug.sh, test.log, temp/)