菜单
Track personal productivity across GitHub and coding agents. Generates a web dashboard with contribution metrics, repo creation trends, and agent session history. Use when the user wants to analyze their coding output or review past agent conversations.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | self-reflect |
| description | Track personal productivity across GitHub and coding agents. Generates a web dashboard with contribution metrics, repo creation trends, and agent session history. Use when the user wants to analyze their coding output or review past agent conversations. |
A personal productivity tracking tool that aggregates data from GitHub contributions and AI coding agent sessions (Claude Code, Cursor) into a single dashboard.
This skill helps developers understand their productivity patterns by:
cd skills/self-reflect
# Install dependencies
npm install
# Collect all data (GitHub + agent sessions)
node scripts/cli.js sync
# Start the dashboard
node scripts/cli.js serve
Then open http://localhost:3000 in your browser.
syncCollect all data sources at once (GitHub + agents) and backup to the data repo.
node scripts/cli.js sync
If the self-reflect-data repo is cloned as a sibling directory, sync will also:
agents/sessions.json and github/contributions.json to the data repoCLAUDE.md, settings.json, sessions-index.json).jsonl) - the raw chat data.txt)~/.claude/CLAUDE.mdcollect githubFetch GitHub contribution data using the gh CLI.
node scripts/cli.js collect github
node scripts/cli.js collect github --from 2024-01-01 --to 2024-12-31
Options:
--from YYYY-MM-DD - Start date (default: 1 year ago)--to YYYY-MM-DD - End date (default: today)--user USERNAME - GitHub username (default: authenticated user)Requirement: GitHub CLI (gh) must be installed and authenticated.
collect agentsCollect session data from Claude Code and Cursor.
node scripts/cli.js collect agents
This scans:
~/.claude/projects/*/sessions-index.json - Claude Code session metadata~/.cursor/ - Cursor session data (if available)serveStart the local dashboard server.
node scripts/cli.js serve
node scripts/cli.js serve --port 8080
Options:
--port PORT - Port number (default: 3000, auto-increments if busy)j/k or arrows - Navigate between user messages[/] - Switch between sessionsEscape - Close modalData is stored in the data/ directory (gitignored):
data/
├── github/
│ └── contributions.json # GitHub API response with contributions
└── agents/
└── sessions.json # Aggregated session metadata
Session conversations are read directly from:
~/.claude/projects/*/{sessionId}.jsonl~/.cursor/ (conversation files)For persistent backup, clone seflless/self-reflect-data to ~/dev/:
gh repo clone seflless/self-reflect-data ~/dev/self-reflect-data
When you run sync, it will copy data to:
~/dev/self-reflect-data/
├── CLAUDE.md # Global ~/.claude/CLAUDE.md backup
├── agents/sessions.json # Session metadata
├── github/contributions.json # GitHub data
├── claude-projects/ # Claude Code project backups
│ └── {project-name}/
│ ├── CLAUDE.md # Project-specific instructions
│ ├── settings.json # Project settings
│ ├── sessions-index.json # Session metadata
│ └── sessions/ # Raw conversation data
│ └── {sessionId}.jsonl
└── cursor-projects/ # Cursor project backups
└── {project-name}/
└── agent-transcripts/
└── {sessionId}.txt
skills/self-reflect/
├── SKILL.md # This file - skill definition and docs
├── package.json # Dependencies (marked for markdown rendering)
├── scripts/
│ ├── cli.js # Main CLI entry point + HTTP server
│ ├── github-collector.js # GitHub data collection via gh CLI
│ └── agents-collector.js # Agent session scanning
├── web/
│ └── index.html # Single-file dashboard (HTML + CSS + JS)
└── data/ # Collected data (gitignored)
Session loading: Conversations are loaded on-demand when clicking a session (not pre-loaded). The server reads the JSONL file and parses messages, tool calls, and results.
Tool call parsing: Claude Code stores tool calls as tool_use blocks with matching tool_result blocks. The CLI does a two-pass parse: first collecting results by ID, then building the message stream.
Repo name extraction: The getRepoName() function extracts meaningful folder names from project paths, skipping common directories like Users, workspaces, .agents.
To work on this skill:
Start the server in watch mode (manual restart needed for now):
node scripts/cli.js serve
Edit web/index.html - it's a single file with inline CSS and JS
Refresh browser to see changes
The data/ directory is gitignored - run sync to populate it on a fresh clone
Create video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Research what people actually say about any topic in the last 30 days. Pulls posts and engagement from Reddit, X, YouTube, TikTok, Hacker News, Polymarket, GitHub, and the web.
Render inline interactive visuals — SVG diagrams, HTML widgets, charts, and explainers — directly in the conversation. Use this skill whenever the user asks to visualize, diagram, chart, illustrate, or explain something visually, or when an explanation would genuinely benefit from a spatial/interactive diagram rather than text. Also triggers for: flowcharts, architecture diagrams, data visualizations, interactive explainers, comparison layouts, UI mockups, and any request containing 'show me', 'draw', 'map out', 'visualize', or 'diagram'. Even when the user doesn't explicitly ask for a visual, use this skill proactively when the topic has spatial, sequential, or systemic relationships that a diagram would clarify better than prose.
Audit a repo's tooling for coding agent self-verification. Use when the user wants to audit agent tooling, mentions "agent-dx", "agent developer experience", "what testing tools do I need", "set up verification for agents", "how can agents test this", or when onboarding to a new codebase and want to know what verification tools are missing.
Design command-line interface parameters and UX: arguments, flags, subcommands, help text, output formats, error messages, exit codes, prompts, config/env precedence, and safe/dry-run behavior. Use when you're designing a CLI spec (before implementation) or refactoring an existing CLI's surface area for consistency, composability, and discoverability.