--- name: folder description: Display project folder contents in the TriClaude FOLDER panel --- # Folder Browser Skill Displays the current project's file/folder structure in the dedicated FOLDER panel within TriClaude. ## Trigger Phrases - "show folder" - "open folder" - "show files" - "folder view" - "show project files" - "browse folder" ## How It Works 1. Reads the current project directory structure 2. Generates styled HTML with file listing 3. Sends to A2UI sidecar with `` markers 4. Displays in the FOLDER panel (separate from A2UI) ## Execution Steps ### Step 1: Get Project Path Determine the project path from: - Current working directory - Or ask user if unclear ### Step 2: Generate File Listing ```bash # Get directory listing with details ls -la "$PROJECT_PATH" | head -50 ``` ### Step 3: Get A2UI Log Path Find the A2UI log path from the terminal startup message: ``` A2UI VISUALIZATION: Write HTML to /home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals//a2ui_input.log ``` ### Step 4: Generate and Send HTML Write folder HTML with FOLDER markers to the A2UI log file. **Template:** ```bash cat << 'FOLDER_EOF' >> $A2UI_LOG

$PROJECT_PATH

$FILE_ITEMS

FOLDER_EOF ``` ### Step 5: Generate File Items For each file/directory, generate an item: **Directory item:** ```html

dirname/ - Jan 15

``` **File item:** ```html

filename.txt 1.2K Jan 15

``` ### File Type Icon Classes | Extension | Class | |-----------|-------| | Directories | `folder` | | `.js`, `.ts`, `.tsx`, `.py`, `.rs` | `code` | | `.json`, `.yaml`, `.toml`, `.env` | `config` | | `.md`, `.txt`, `.rst` | `doc` | | Everything else | `file` | ## Complete Bash Script Use this script to generate and display the folder: ```bash #!/bin/bash PROJECT_PATH="${1:-$(pwd)}" PROJECT_NAME=$(basename "$PROJECT_PATH") A2UI_LOG="${A2UI_LOG:-/home/yousuf/GoogleDrive/PROJECTS/.triclaude/runtime/terminals/default/a2ui_input.log}" # Generate file items HTML FILE_ITEMS="" while IFS= read -r line; do # Parse ls -la output perms=$(echo "$line" | awk '{print $1}') size=$(echo "$line" | awk '{print $5}') month=$(echo "$line" | awk '{print $6}') day=$(echo "$line" | awk '{print $7}') name=$(echo "$line" | awk '{for(i=9;i<=NF;i++) printf "%s ", $i; print ""}' | xargs) # Skip . and .. and empty [[ "$name" == "." || "$name" == ".." || -z "$name" ]] && continue # Determine if directory if [[ "${perms:0:1}" == "d" ]]; then icon_class="folder" icon_svg='' name_class="folder" name="${name}/" size="-" else # Determine file type ext="${name##*.}" case "$ext" in js|ts|tsx|jsx|py|rs|go|java|c|cpp|h) icon_class="code" ;; json|yaml|yml|toml|env|ini|conf) icon_class="config" ;; md|txt|rst|doc) icon_class="doc" ;; *) icon_class="file" ;; esac icon_svg='' name_class="" # Format size if [[ "$size" -gt 1048576 ]]; then size="$(echo "scale=1; $size/1048576" | bc)M" elif [[ "$size" -gt 1024 ]]; then size="$(echo "scale=1; $size/1024" | bc)K" fi fi FILE_ITEMS+="

$icon_svg

$name$size$month $day

" done < <(ls -la "$PROJECT_PATH" 2>/dev/null | tail -n +2) # Write to A2UI log cat << FOLDER_EOF >> "$A2UI_LOG"

$PROJECT_PATH

$FILE_ITEMS

FOLDER_EOF echo "Folder view sent to FOLDER panel" ``` ## TriClaude Integration This skill requires TriClaude to have the FOLDER panel enabled. The panel: - Uses a separate toggle button (cyan/teal color) - Displays content sent with `` markers - Works independently of the A2UI visualization panel ## Example Session ``` User: show folder Agent: 1. Detects CWD is /home/yousuf/local_workspaces/skills 2. Generates file listing HTML 3. Writes to A2UI log with FOLDER markers 4. Says: "Folder view displayed in FOLDER panel" ``` ## Notes - The folder view is static (generated at time of request) - To refresh, say "show folder" again - Subdirectories can be viewed by specifying the path: "show folder src/"

$PROJECT_NAME

$PROJECT_NAME