# Project Overview HTML
> Creates interactive HTML visualizations of project structure, dependencies, and statistics. Use when the user asks to visualize the project, create a project overview, or generate an HTML dashboard of the codebase.
- Skill: `majiayu000/project-overview-html` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/project-overview-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/project-overview-html/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/project-overview-html
---
# Project Overview HTML Generator
Generate beautiful, interactive HTML visualizations of project structure and statistics.
## Instructions
When creating a project overview HTML:
1. **Gather project information:**
- Run `git log --oneline -10` for recent commits
- Use `find . -type f | head -100` or Glob to understand project structure
- Check for package.json, requirements.txt, Cargo.toml, etc. for dependencies
- Read README.md if it exists
- Get file type statistics with: `find . -type f | sed 's/.*\.//' | sort | uniq -c | sort -rn | head -20`
2. **Create an interactive HTML file** with these sections:
- **Header**: Project name and description
- **Quick Stats**: Total files, directories, lines of code, contributors
- **Directory Tree**: Visual tree structure (collapsible)
- **File Type Breakdown**: Chart showing language/file type distribution
- **Dependencies**: List of main dependencies if applicable
- **Recent Activity**: Git commit timeline
- **README Content**: Rendered markdown from README
3. **Styling and interactivity:**
- Use modern CSS with gradients, shadows, and smooth transitions
- Include Chart.js or similar for data visualization
- Make tree view collapsible with JavaScript
- Use a dark/light theme toggle
- Responsive design for mobile and desktop
- Add smooth scroll animations
4. **Technical requirements:**
- Single self-contained HTML file (inline CSS and JS)
- No external dependencies required to view
- Works offline
- Fast loading with optimized code
## HTML Template Structure
```html
Project Overview - [PROJECT_NAME]
```
## Data Visualization
Use Chart.js for:
- **Pie chart**: File type distribution
- **Bar chart**: Lines of code by language
- **Line chart**: Commit activity over time
- **Doughnut chart**: Test coverage or other metrics
## Best Practices
1. **Performance**: Limit tree depth to avoid overwhelming the page
2. **Accessibility**: Use semantic HTML and ARIA labels
3. **Mobile-friendly**: Test on different screen sizes
4. **Color scheme**: Use consistent, professional colors
5. **Error handling**: Gracefully handle missing data
## Example Output
The generated HTML should save as `project-overview.html` in the project root and include:
- Clear visual hierarchy
- Interactive elements that respond to clicks
- Smooth animations
- Professional appearance suitable for documentation or presentations
## Additional Features
Consider adding:
- Search functionality for the file tree
- Filter by file type
- Export data as JSON
- Print-friendly CSS
- Shareable link generator
- Code snippets from key files
- Architecture diagrams if detectable
- Performance metrics if available