generatestockvisualizerwebassets

Creates the HTML and CSS files for the stock visualization app. The HTML provides the structure for the side-by-side layout (bubble chart and table), while the CSS handles styling, scrolling, and highlighting logic.

Zur Installation springen

Repository: cxcscmu/SkillLearnBench
Letzte Quellaktivität: 24. April 2026 um 05:14
Erkannte Sprache von SKILL.md: Englisch
Sterne: 77
Forks: 4

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/cxcscmu/SkillLearnBench --skill generatestockvisualizerwebassets

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

docx-handler

Handles reading, populating, and saving .docx files using the python-docx library. Use this skill for any tasks involving template filling or modifying Word documents.

2026-06-12

13f-analyzer

Perform various data analysis on SEC 13-F and obtain some insights of fund activities such as number of holdings, AUM, and change of holdings between two quarters.

2026-06-12

fuzzy-name-search

This skill includes search capability in 13F, such as fuzzy search a fund information using possibly inaccurate name, or fuzzy search a stock cusip info using its name.

2026-06-12

Alle aus diesem Repository ansehen

# Write HTML to /root/output/index.html cat << 'EOF' > /root/output/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Stock Market Visualization</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="app-container"> <div id="viz-container"> <div id="bubble-chart"></div> <div id="legend-container"></div> </div> <div id="table-container"> <table id="stock-table"> <thead> <tr> <th>Ticker</th> <th>Name</th> <th>Sector</th> <th>Market Cap</th> </tr> </thead> <tbody id="table-body"></tbody> </table> </div> </div> <div id="tooltip" class="hidden"> <p><strong id="tooltip-ticker"></strong></p> <p id="tooltip-name"></p> <p id="tooltip-sector"></p> </div> <script src="js/d3.v6.min.js"></script> <script src="js/visualization.js"></script> </body> </html> EOF # Write CSS to /root/output/css/style.css cat << 'EOF' > /root/output/css/style.css body { font-family: sans-serif; margin: 0; padding: 20px; } #app-container { display: flex; gap: 20px; height: 90vh; } #viz-container { flex: 2; display: flex; flex-direction: column; border: 1px solid #ddd; } #bubble-chart { flex-grow: 1; } #legend-container { padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; } #table-container { flex: 1; overflow-y: auto; border: 1px solid #ddd; } table { width: 100%; border-collapse: collapse; } th { position: sticky; top: 0; background: #f4f4f4; padding: 8px; text-align: left; border-bottom: 2px solid #ccc; } td { padding: 8px; border-bottom: 1px solid #eee; font-size: 13px; } .highlight { background-color: #ffff99 !important; transition: background-color 0.3s; } .bubble { cursor: pointer; stroke: #fff; stroke-width: 1.5px; } .bubble:hover { stroke: #333; } .label { pointer-events: none; text-anchor: middle; font-size: 10px; fill: #333; font-weight: bold; } #tooltip { position: absolute; padding: 10px; background: white; border: 1px solid #ccc; border-radius: 4px; pointer-events: none; box-shadow: 2px 2px 6px rgba(0,0,0,0.1); font-size: 12px; } .hidden { display: none; } .legend-item { display: flex; align-items: center; gap: 5px; } .legend-box { width: 12px; height: 12px; } EOF

name	GenerateStockVisualizerWebAssets
description	Creates the HTML and CSS files for the stock visualization app. The HTML provides the structure for the side-by-side layout (bubble chart and table), while the CSS handles styling, scrolling, and highlighting logic.

generatestockvisualizerwebassets

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository