メニュー
Use when the task involves building chart components, stat tables, dashboards, or data display surfaces for sports statistics. Covers Recharts patterns, responsive table layouts, spark charts, leaderboards, and scoreboard UI for college and professional sports.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Read the BSI Conference Power Index correctly. Interpret strength-of-schedule adjusted conference rankings, cross-conference comparisons, and how SOS adjustments change the story. Use when comparing programs across different conferences, explaining why a team's record alone doesn't tell the full story, or when doing postseason bracket projection. Pairs with bsi_get_conference_power_index from the cbb-sabermetrics plugin.
Interpret advanced college baseball metrics (wOBA, wRC+, FIP, ERA-, BABIP, ISO, K%, BB%) correctly in context. Use when explaining a player's or team's advanced stats, when comparing programs, when translating raw numbers into analytical conclusions, or when converting a leaderboard into a scouting takeaway. Pairs with bsi_get_team_sabermetrics, bsi_get_player_stats, and bsi_get_leaderboard from the cbb-sabermetrics plugin.
Texas Longhorns baseball intelligence for scouting reports, game analysis, roster evaluation, SEC positioning, player development, historical comparisons, NIL efficiency, and editorial content. Use when the user wants Texas-specific college baseball analysis that combines program doctrine with live MCP data from the cbb-sabermetrics plugin. For current stats, standings, and performance claims, fetch MCP tools before stating facts.
Use when the task involves ingesting, normalizing, storing, or processing college baseball game data — including box scores, play-by-play events, lineup data, and pitching logs — from NCAA stats, Baseball Reference, BSI's pipeline, or manually entered game sheets.
Use when the task involves constructing or optimizing a college baseball batting order, evaluating lineup balance, building platoon splits for lineup decisions, or generating a lineup card with sabermetric rationale.
Use when the task involves evaluating a college baseball pitcher or pitching staff — including pitch-mix analysis, sequencing strategy, matchup scouting, platoon splits, and role recommendations (starter vs. reliever vs. closer).
| name | stats-visualization |
| description | Use when the task involves building chart components, stat tables, dashboards, or data display surfaces for sports statistics. Covers Recharts patterns, responsive table layouts, spark charts, leaderboards, and scoreboard UI for college and professional sports. |
Use this skill when the task requires building a clear, readable, and sports-appropriate data display. Good sports visualization surfaces the right number at the right size, earns trust with correct labeling, and loads fast even on mobile.
Before building any visualization, establish:
Design the chart to answer the primary question in one glance. If it requires study to decode, simplify.
| Data situation | Recommended chart |
|---|---|
| Comparing players on one metric | Horizontal bar chart |
| Tracking one metric over time | Line chart |
| Two correlated metrics (e.g. FIP vs ERA) | Scatter plot |
| Composition (pitch mix %) | Donut or stacked bar |
| Ranked leaderboard | Sorted table with sparklines |
| Win probability over game time | Area chart |
| Spray chart / field diagram | SVG custom overlay |
Default to the simplest chart that answers the question. Never use a 3D chart.
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data} layout="vertical" margin={{ left: 80 }}>
<XAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="category" dataKey="name" width={80} tick={{ fontSize: 13 }} />
<Tooltip formatter={(value: number) => value.toFixed(3)} />
<Bar dataKey="woba" fill="#BF5700" radius={[0, 4, 4, 0]} />
</BarChart>
</ResponsiveContainer>
#BF5700 (burnt orange), #FFFFFF (white)#22c55e (green-500)#ef4444 (red-500)#94a3b8 (slate-400)Do not use red/green for non-performance contexts — reserve them for "good vs. bad" comparisons only.
function StatTooltip({ active, payload, label }: TooltipProps<number, string>) {
if (!active || !payload?.length) return null;
return (
<div className="bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm text-white shadow-lg">
<p className="font-semibold mb-1">{label}</p>
{payload.map((entry) => (
<p key={entry.name} style={{ color: entry.color }}>
{entry.name}: <span className="font-mono">{Number(entry.value).toFixed(3)}</span>
</p>
))}
</div>
);
}
// components/LeaderboardTable.tsx
interface Column<T> {
key: keyof T;
label: string;
format?: (v: unknown) => string;
sortable?: boolean;
}
// Rules:
// - Sticky first column (player name)
// - Right-align all numeric columns
// - Mono font for numbers: font-mono text-sm tabular-nums
// - Highlight the column being sorted
// - Color-code values above/below league average
Table rules:
tabular-nums for all numeric cells to prevent column-width shifting.function PercentileBar({ value, max = 100 }: { value: number; max?: number }) {
const pct = Math.min((value / max) * 100, 100);
const color = pct >= 75 ? '#22c55e' : pct >= 40 ? '#94a3b8' : '#ef4444';
return (
<div className="flex items-center gap-2">
<div className="w-20 h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div className="h-full rounded-full" style={{ width: `${pct}%`, backgroundColor: color }} />
</div>
<span className="text-xs font-mono text-slate-400">{Math.round(pct)}th</span>
</div>
);
}
Never open a sports dashboard with a table. Lead with a chart or KPI strip.
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* KPI cards */}
</div>
<div className="mt-6">
{/* Primary chart — full width */}
</div>
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Secondary charts */}
</div>
Live scoreboard UI rules:
animate-pulse) only for live/in-progress games, not final scores.