docs: 초기 파일 추가 및 기본 설정 구성
- .git-commit-template.txt: 커밋 메시지 템플릿 추가 - .gitignore: OS 및 데이터베이스 관련 파일 무시 설정 추가 - .mcp.json: MCP 서버 설정 추가 - CLAUDE.md: SuperClaude 엔트리 포인트 문서 추가 - README.md: 프로젝트 템플릿 설명 추가 - .claude/COMMANDS.md: 명령어 실행 프레임워크 문서 추가 - .claude/FLAGS.md: 플래그 시스템 문서 추가 - .claude/MCP.md: MCP 서버 통합 문서 추가 - .claude/MODES.md: 운영 모드 문서 추가 - .claude/ORCHESTRATOR.md: 지능형 라우팅 시스템 문서 추가 - .claude/PERSONAS.md: 페르소나 시스템 문서 추가 - .claude/PRINCIPLES.md: 핵심 원칙 문서 추가 - .claude/RULES.md: 실행 가능한 규칙 문서 추가 - .claude/settings.json: 권한 설정 추가 - .claude/commands 디렉토리: 다양한 명령어 문서 추가 - .taskmaster/config.json: 기본 설정 파일 추가 - .taskmaster/docs 디렉토리: 문서 파일 추가 - .taskmaster/tasks/tasks.json: 기본 작업 파일 추가
This commit is contained in:
227
.claude/commands/canvas/create_from_dir.md
Normal file
227
.claude/commands/canvas/create_from_dir.md
Normal file
@ -0,0 +1,227 @@
|
||||
---
|
||||
allowed-tools: [Read, Glob, Grep, Write, MultiEdit, LS]
|
||||
description: Analyzes markdown files in a specified directory, groups related content, and generates a JSON Canvas with nodes and edges.
|
||||
---
|
||||
|
||||
# Create JSON Canvas from Directory
|
||||
|
||||
## Context
|
||||
- Project root: !`pwd`
|
||||
- User-specified directory: $ARGUMENTS (e.g., path to directory like ".claude/commands/planning")
|
||||
- Existing canvas example: @.claude/commands/index.canvas
|
||||
|
||||
## Goal
|
||||
Generate a JSON Canvas file that visually represents the structure of markdown files in the given directory, grouping related files into nodes, creating groups for subdirectories or related topics, and connecting them with edges based on logical relationships.
|
||||
|
||||
## Process
|
||||
|
||||
### 1. Validate Input
|
||||
- Ensure $ARGUMENTS provides a valid directory path relative to the project root.
|
||||
- If no directory is provided, ask the user: "Please specify the directory path to analyze (e.g., .claude/commands/planning)."
|
||||
- Use LS or Glob to verify the directory exists and contains markdown files.
|
||||
|
||||
### 2. Analyze Directory Structure
|
||||
- List all markdown files (*.md) in the directory and subdirectories using Glob or LS.
|
||||
- For each markdown file, read its content using Read or ReadFile.
|
||||
- **Think deeply** about the file names, paths, and content to identify relationships:
|
||||
- Group files by subdirectory (e.g., all files in "1-mrd" under one group).
|
||||
- Identify thematic relationships (e.g., sequential files like "1-start-session.md" and "2-analyze-research-data.md").
|
||||
- Use Grep to search for keywords, headers, or references between files to determine edges (e.g., if one file references another).
|
||||
|
||||
### 3. Generate Nodes
|
||||
- Create nodes for each markdown file:
|
||||
- Type: "file"
|
||||
- File: the relative path to the markdown file.
|
||||
- Position (x, y), width, height: Calculate based on structure (e.g., arrange in a grid or hierarchical layout).
|
||||
- Create group nodes for subdirectories or logical groupings:
|
||||
- Type: "group"
|
||||
- Label: the subdirectory name or group theme.
|
||||
- Position and size to encompass child nodes.
|
||||
|
||||
### 4. Generate Edges
|
||||
- Create edges between related nodes:
|
||||
- From one file to the next in a sequence (e.g., from "1-start-session.md" to "2-analyze-research-data.md").
|
||||
- From groups to contained nodes if needed.
|
||||
- Use sides like "right" to "left" for horizontal connections.
|
||||
- Add labels if relationships are specific (e.g., "next step").
|
||||
- Ensure edges follow the JSON Canvas spec (fromNode, toNode, fromSide, toSide, etc.).
|
||||
|
||||
### 5. Assemble JSON Canvas
|
||||
- Compile nodes and edges into a JSON object following the JSON Canvas Spec.
|
||||
- Nodes in z-index order (background groups first).
|
||||
- **CRITICAL:** Validate the JSON structure against the spec (e.g., required fields like id, type, x, y, width, height).
|
||||
|
||||
### 6. Output the Canvas
|
||||
- Write the JSON to a new .canvas file in the specified directory or a default location (e.g., "<directory>/index.canvas").
|
||||
- If the file exists, use MultiEdit to update it carefully.
|
||||
|
||||
## Templates & Structures
|
||||
The output JSON should strictly follow this structure:
|
||||
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
// Group node example
|
||||
{
|
||||
"type": "group",
|
||||
"id": "group1",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 500,
|
||||
"height": 300,
|
||||
"label": "Group Label"
|
||||
},
|
||||
// File node example
|
||||
{
|
||||
"type": "file",
|
||||
"id": "file1",
|
||||
"x": 100,
|
||||
"y": 100,
|
||||
"width": 200,
|
||||
"height": 100,
|
||||
"file": "path/to/file.md"
|
||||
}
|
||||
],
|
||||
"edges": [
|
||||
{
|
||||
"id": "edge1",
|
||||
"fromNode": "file1",
|
||||
"fromSide": "right",
|
||||
"toNode": "file2",
|
||||
"toSide": "left",
|
||||
"toEnd": "arrow",
|
||||
"label": "Connection"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices / DO & DON'T
|
||||
|
||||
### ✅ DO: Maintain Hierarchical Structure
|
||||
- Reflect directory hierarchy in group nodes.
|
||||
- **Why:** Preserves the original organization for intuitive visualization.
|
||||
|
||||
### ✅ DO: Use Meaningful Layout
|
||||
- Position nodes logically (e.g., left-to-right for sequences).
|
||||
- **Why:** Improves readability and understanding of relationships.
|
||||
|
||||
### ❌ DON'T: Overlap Nodes
|
||||
- Ensure calculated positions prevent overlaps.
|
||||
- **Why:** Avoids visual clutter in the canvas.
|
||||
|
||||
### ❌ DON'T: Ignore Spec Requirements
|
||||
- Always include required fields like id, type, x, y, width, height.
|
||||
- **Why:** Ensures compatibility with JSON Canvas viewers.
|
||||
|
||||
## Output
|
||||
- **Format:** JSON file conforming to JSON Canvas Spec.
|
||||
- **Location:** In the analyzed directory (e.g., "<input_dir>/index.canvas") or user-specified.
|
||||
- **Filename:** "index.canvas" by default, or based on directory name.
|
||||
|
||||
## Example Usage
|
||||
/claude:canvas:create_from_dir .claude/commands/planning
|
||||
|
||||
|
||||
## JSON Canvas Spec
|
||||
|
||||
<small>Version 1.0 — 2024-03-11</small>
|
||||
|
||||
### Top level
|
||||
|
||||
The top level of JSON Canvas contains two arrays:
|
||||
|
||||
- `nodes` (optional, array of nodes)
|
||||
- `edges` (optional, array of edges)
|
||||
|
||||
### Nodes
|
||||
|
||||
Nodes are objects within the canvas. Nodes may be text, files, links, or groups.
|
||||
|
||||
Nodes are placed in the array in ascending order by z-index. The first node in the array should be displayed below all other nodes, and the last node in the array should be displayed on top of all other nodes.
|
||||
|
||||
#### Generic node
|
||||
|
||||
All nodes include the following attributes:
|
||||
|
||||
- `id` (required, string) is a unique ID for the node.
|
||||
- `type` (required, string) is the node type.
|
||||
- `text`
|
||||
- `file`
|
||||
- `link`
|
||||
- `group`
|
||||
- `x` (required, integer) is the `x` position of the node in pixels.
|
||||
- `y` (required, integer) is the `y` position of the node in pixels.
|
||||
- `width` (required, integer) is the width of the node in pixels.
|
||||
- `height` (required, integer) is the height of the node in pixels.
|
||||
- `color` (optional, `canvasColor`) is the color of the node, see the Color section.
|
||||
|
||||
#### Text type nodes
|
||||
|
||||
Text type nodes store text. Along with generic node attributes, text nodes include the following attribute:
|
||||
|
||||
- `text` (required, string) in plain text with Markdown syntax.
|
||||
|
||||
#### File type nodes
|
||||
|
||||
File type nodes reference other files or attachments, such as images, videos, etc. Along with generic node attributes, file nodes include the following attributes:
|
||||
|
||||
- `file` (required, string) is the path to the file within the system.
|
||||
- `subpath` (optional, string) is a subpath that may link to a heading or a block. Always starts with a `#`.
|
||||
|
||||
#### Link type nodes
|
||||
|
||||
Link type nodes reference a URL. Along with generic node attributes, link nodes include the following attribute:
|
||||
|
||||
- `url` (required, string)
|
||||
|
||||
#### Group type nodes
|
||||
|
||||
Group type nodes are used as a visual container for nodes within it. Along with generic node attributes, group nodes include the following attributes:
|
||||
|
||||
- `label` (optional, string) is a text label for the group.
|
||||
- `background` (optional, string) is the path to the background image.
|
||||
- `backgroundStyle` (optional, string) is the rendering style of the background image. Valid values:
|
||||
- `cover` fills the entire width and height of the node.
|
||||
- `ratio` maintains the aspect ratio of the background image.
|
||||
- `repeat` repeats the image as a pattern in both x/y directions.
|
||||
|
||||
### Edges
|
||||
|
||||
Edges are lines that connect one node to another.
|
||||
|
||||
- `id` (required, string) is a unique ID for the edge.
|
||||
- `fromNode` (required, string) is the node `id` where the connection starts.
|
||||
- `fromSide` (optional, string) is the side where this edge starts. Valid values:
|
||||
- `top`
|
||||
- `right`
|
||||
- `bottom`
|
||||
- `left`
|
||||
- `fromEnd` (optional, string) is the shape of the endpoint at the edge start. Defaults to `none` if not specified. Valid values:
|
||||
- `none`
|
||||
- `arrow`
|
||||
- `toNode` (required, string) is the node `id` where the connection ends.
|
||||
- `toSide` (optional, string) is the side where this edge ends. Valid values:
|
||||
- `top`
|
||||
- `right`
|
||||
- `bottom`
|
||||
- `left`
|
||||
- `toEnd` (optional, string) is the shape of the endpoint at the edge end. Defaults to `arrow` if not specified. Valid values:
|
||||
- `none`
|
||||
- `arrow`
|
||||
- `color` (optional, `canvasColor`) is the color of the line, see the Color section.
|
||||
- `label` (optional, string) is a text label for the edge.
|
||||
|
||||
|
||||
### Color
|
||||
|
||||
The `canvasColor` type is used to encode color data for nodes and edges. Colors attributes expect a string. Colors can be specified in hex format e.g. `"#FF0000"`, or using one of the preset colors, e.g. `"1"` for red. Six preset colors exist, mapped to the following numbers:
|
||||
|
||||
- `"1"` red
|
||||
- `"2"` orange
|
||||
- `"3"` yellow
|
||||
- `"4"` green
|
||||
- `"5"` cyan
|
||||
- `"6"` purple
|
||||
|
||||
Specific values for the preset colors are intentionally not defined so that applications can tailor the presets to their specific brand colors or color scheme.
|
||||
Reference in New Issue
Block a user