Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 161 additions & 0 deletions .agents/skills/codeviz/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
```markdown
# codeviz Development Patterns

> Auto-generated skill from repository analysis

## Overview

This skill teaches you how to contribute to the `codeviz` codebase, a TypeScript project focused on code analysis and visualization. You'll learn the project's coding conventions, how to extend language support, develop new analysis features (including cross-file/project-level analysis), and enhance the diagram UI. The guide covers commit patterns, file organization, and practical workflows with step-by-step instructions and code examples.

## Coding Conventions

- **Language:** TypeScript
- **Framework:** None detected
- **File Naming:** camelCase (e.g., `analyzersRegistry.ts`)
- **Import Style:** Relative imports

```typescript
import { analyzeFile } from './analyzeFile';
```

- **Export Style:** Named exports

```typescript
// Good
export function analyzeFile() { ... }

// Also good
export { analyzeFile, analyzeProject };
```

- **Commit Messages:** Conventional commits, using the `feat` prefix for features.

```
feat: add cross-file class detection for TypeScript analyzer
```

## Workflows

### Extend Language Support

**Trigger:** When you want to add or improve support for a programming language in the code analysis engine (e.g., TypeScript, Go, cross-file analysis, class/method detection).

**Command:** `/add-language-support`

1. **Implement or update the analyzer** for the new/enhanced language in
`src/lib/analysis/analyzers/{language}.ts`.
2. **Update shared logic** if needed in
`src/lib/analysis/analyzers/shared.ts` or `src/lib/analysis/analyzers/jslike.ts`.
3. **Register the analyzer** in
`src/lib/analysis/registry.ts` (if applicable).
4. **Add or update tests** in
`src/lib/analysis/analyzers/analyzers.test.ts`.
5. **Update the API route** if necessary:
`src/app/api/analyze/route.ts`.
6. **Update UI components** to reflect new language options, diagrams, or filtering:
- `src/components/ui/CodeWorkspace.tsx`
- `src/components/ui/Diagram.tsx`
7. **Add WASM grammar files** in `public/wasm/` (e.g., `tree-sitter-{language}.wasm`) if needed.
8. **Update language selector and samples** in the UI.

**Example:**
```typescript
// src/lib/analysis/analyzers/go.ts
export function analyzeGo(source: string) {
// ...Go analysis logic
}
```

```typescript
// src/lib/analysis/registry.ts
import { analyzeGo } from './analyzers/go';
registry['go'] = analyzeGo;
```

### Feature Development with Cross-File Analysis

**Trigger:** When you want to add a new analysis capability, especially one that requires project-level or cross-file features (e.g., project-level graph, class/method detection, inheritance, cross-file calls).

**Command:** `/add-analysis-feature`

1. **Update or extend analysis model/types** in
`src/lib/analysis/types.ts`.
2. **Implement feature logic** in the relevant analyzers:
`src/lib/analysis/analyzers/{language}.ts`, `shared.ts`.
3. **Update the API** to expose the new analysis:
`src/app/api/analyze/route.ts`.
4. **Update UI components** to visualize the new feature:
- `src/components/ui/Diagram.tsx`
- `src/components/ui/CodeWorkspace.tsx`
- `src/components/ui/CodeTool.tsx`
5. **Update i18n dictionaries** if UI text changes:
`src/i18n/dictionaries/en.json`, `src/i18n/dictionaries/es.json`.
6. **Add or update tests** in
`src/lib/analysis/analyzers/analyzers.test.ts`.

**Example:**
```typescript
// src/lib/analysis/types.ts
export interface ClassNode {
name: string;
methods: string[];
file: string;
}
```

```typescript
// src/lib/analysis/analyzers/typescript.ts
export function analyzeTypeScript(source: string, files: Record<string, string>) {
// ...cross-file class/method detection logic
}
```

### Diagram UI Enhancement

**Trigger:** When you want to improve the diagram's layout, add new edge types, or enhance interactivity/filtering in the UI.

**Command:** `/improve-diagram-ui`

1. **Update diagram rendering logic** in
`src/components/ui/Diagram.tsx`.
2. **Update or add legend and filtering features** in the same file.
3. **Update analysis output or types** if new edge/node types are visualized:
- `src/lib/analysis/types.ts`
- relevant analyzers
4. **Update tests** if diagram output is tested:
`src/lib/analysis/analyzers/analyzers.test.ts`.
5. **Update i18n dictionaries** if UI text changes:
`src/i18n/dictionaries/en.json`, `src/i18n/dictionaries/es.json`.

**Example:**
```typescript
// src/components/ui/Diagram.tsx
<Legend items={[{ type: 'inheritance', color: 'blue' }]} />
<Diagram edges={edges} nodes={nodes} filter={filterFn} />
```

## Testing Patterns

- **Test Framework:** Unknown (likely Jest or similar)
- **Test File Pattern:** `*.test.*` (e.g., `analyzers.test.ts`)
- **Test Location:**
`src/lib/analysis/analyzers/analyzers.test.ts`

**Example:**
```typescript
// src/lib/analysis/analyzers/analyzers.test.ts
import { analyzeTypeScript } from './typescript';

test('detects classes across files', () => {
// ...test logic
});
```

## Commands

| Command | Purpose |
|------------------------|-----------------------------------------------------------------|
| /add-language-support | Add or enhance support for a programming language |
| /add-analysis-feature | Implement a new analysis feature (e.g., cross-file analysis) |
| /improve-diagram-ui | Enhance diagram visualization, layout, or interactivity |
```
6 changes: 6 additions & 0 deletions .agents/skills/codeviz/agents/openai.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
interface:
display_name: "Codeviz"
short_description: "Repo-specific patterns and workflows for codeviz"
default_prompt: "Use the codeviz repo skill to follow existing architecture, testing, and workflow conventions."
policy:
allow_implicit_invocation: true
42 changes: 42 additions & 0 deletions .claude/commands/diagram-ui-enhancement.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
name: diagram-ui-enhancement
description: Workflow command scaffold for diagram-ui-enhancement in codeviz.
allowed_tools: ["Bash", "Read", "Write", "Grep", "Glob"]
---

# /diagram-ui-enhancement

Use this workflow when working on **diagram-ui-enhancement** in `codeviz`.

## Goal

Improves or extends the diagram visualization in the UI, including layout, legend, containers, and interactive filtering.

## Common Files

- `src/components/ui/Diagram.tsx`
- `src/lib/analysis/types.ts`
- `src/lib/analysis/analyzers/{language}.ts`
- `src/lib/analysis/analyzers/analyzers.test.ts`
- `src/i18n/dictionaries/en.json`
- `src/i18n/dictionaries/es.json`

## Suggested Sequence

1. Understand the current state and failure mode before editing.
2. Make the smallest coherent change that satisfies the workflow goal.
3. Run the most relevant verification for touched files.
4. Summarize what changed and what still needs review.

## Typical Commit Signals

- Update diagram rendering logic in src/components/ui/Diagram.tsx
- Update or add legend and filtering features in the same file
- Update analysis output or types if new edge/node types are visualized (src/lib/analysis/types.ts, analyzers)
- Update tests if diagram output is tested (src/lib/analysis/analyzers/analyzers.test.ts)
- Update i18n dictionaries if UI text changes (src/i18n/dictionaries/*.json)

## Notes

- Treat this as a scaffold, not a hard-coded script.
- Update the command if the workflow evolves materially.
42 changes: 42 additions & 0 deletions .claude/commands/extend-language-support.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
name: extend-language-support
description: Workflow command scaffold for extend-language-support in codeviz.
allowed_tools: ["Bash", "Read", "Write", "Grep", "Glob"]
---

# /extend-language-support

Use this workflow when working on **extend-language-support** in `codeviz`.

## Goal

Adds or enhances support for a programming language in the code analysis engine, including analyzers, test coverage, UI selectors, and registry integration.

## Common Files

- `src/lib/analysis/analyzers/{language}.ts`
- `src/lib/analysis/analyzers/shared.ts`
- `src/lib/analysis/analyzers/jslike.ts`
- `src/lib/analysis/registry.ts`
- `src/lib/analysis/analyzers/analyzers.test.ts`
- `src/app/api/analyze/route.ts`

## Suggested Sequence

1. Understand the current state and failure mode before editing.
2. Make the smallest coherent change that satisfies the workflow goal.
3. Run the most relevant verification for touched files.
4. Summarize what changed and what still needs review.

## Typical Commit Signals

- Implement or update analyzer for the new or enhanced language in src/lib/analysis/analyzers/{language}.ts
- Update shared analyzer logic in src/lib/analysis/analyzers/shared.ts or src/lib/analysis/analyzers/jslike.ts
- Register the new analyzer in src/lib/analysis/registry.ts (if applicable)
- Add or update tests in src/lib/analysis/analyzers/analyzers.test.ts
- Update API route if necessary (src/app/api/analyze/route.ts)

## Notes

- Treat this as a scaffold, not a hard-coded script.
- Update the command if the workflow evolves materially.
42 changes: 42 additions & 0 deletions .claude/commands/feature-development-with-cross-file-analysis.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
name: feature-development-with-cross-file-analysis
description: Workflow command scaffold for feature-development-with-cross-file-analysis in codeviz.
allowed_tools: ["Bash", "Read", "Write", "Grep", "Glob"]
---

# /feature-development-with-cross-file-analysis

Use this workflow when working on **feature-development-with-cross-file-analysis** in `codeviz`.

## Goal

Implements a new analysis feature that requires changes across analyzers, UI, API, and tests, especially for cross-file/project-level capabilities.

## Common Files

- `src/lib/analysis/types.ts`
- `src/lib/analysis/analyzers/{language}.ts`
- `src/lib/analysis/analyzers/shared.ts`
- `src/app/api/analyze/route.ts`
- `src/components/ui/Diagram.tsx`
- `src/components/ui/CodeWorkspace.tsx`

## Suggested Sequence

1. Understand the current state and failure mode before editing.
2. Make the smallest coherent change that satisfies the workflow goal.
3. Run the most relevant verification for touched files.
4. Summarize what changed and what still needs review.

## Typical Commit Signals

- Update or extend analysis model/types in src/lib/analysis/types.ts
- Implement feature logic in relevant analyzers (src/lib/analysis/analyzers/{language}.ts, shared.ts)
- Update API to expose new analysis (src/app/api/analyze/route.ts)
- Update UI components to visualize new feature (src/components/ui/Diagram.tsx, src/components/ui/CodeWorkspace.tsx, src/components/ui/CodeTool.tsx)
- Update i18n dictionaries if UI text changes (src/i18n/dictionaries/*.json)

## Notes

- Treat this as a scaffold, not a hard-coded script.
- Update the command if the workflow evolves materially.
Loading
Loading