Menu
Data-first visualization design combining Tufte principles with Jobs/Ive simplicity for React + Nivo dashboards.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | design-philosophy |
| description | Data-first visualization design combining Tufte principles with Jobs/Ive simplicity for React + Nivo dashboards. |
| version | 1.1.0 |
| tags | ["design","tufte","data-visualization","philosophy","nivo","react","typography"] |
This skill replaces the prior design-philosphy, nivo-charts, and tufte-visualization aliases as the single canonical guide.
Show the data. Every visual choice must serve comprehension. Remove elements that do not improve clarity.
// ✅ Clean Nivo Line
<ResponsiveLine
data={data}
enableGridX={false}
enableGridY={true}
enableArea={false}
enablePoints={false}
lineWidth={2}
colors={['#1f2937']}
/>
const integrityConfig = {
yScale: { type: 'linear', min: 0, max: 'auto' },
};
Remove:
Prefer small multiples over cramming unrelated series.
function SmallMultiples<T>({ data, renderChart }: {
data: Record<string, T[]>;
renderChart: (data: T[], key: string) => React.ReactNode;
}) {
return (
<div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
{Object.entries(data).map(([key, values]) => (
<div key={key} className="space-y-2">
<div className="text-xs font-medium tracking-wide text-slate-600 uppercase">{key}</div>
<div className="h-32">{renderChart(values, key)}</div>
</div>
))}
</div>
);
}
Use sparklines to show trend and direction inline.
function Sparkline({ data, color = '#0f766e' }: { data: number[]; color?: string }) {
const series = [{ id: 'spark', data: data.map((y, x) => ({ x, y })) }];
return (
<ResponsiveLine
data={series}
width={120}
height={24}
margin={{ top: 2, right: 2, bottom: 2, left: 2 }}
axisLeft={null}
axisBottom={null}
enableGridX={false}
enableGridY={false}
enablePoints={false}
colors={[color]}
lineWidth={1.5}
isInteractive={false}
animate={false}
/>
);
}
"IBM Plex Sans" and "IBM Plex Mono").:root {
--font-sans: "IBM Plex Sans", "Source Sans 3", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
import { Theme } from '@nivo/core';
export const dataFirstTheme: Theme = {
background: 'transparent',
text: {
fontSize: 11,
fontFamily: 'var(--font-sans)',
fill: '#334155',
},
axis: {
domain: { line: { stroke: '#94a3b8', strokeWidth: 1 } },
ticks: {
line: { stroke: 'transparent', strokeWidth: 0 },
text: { fontSize: 10, fill: '#64748b' },
},
legend: {
text: { fontSize: 11, fill: '#334155', fontWeight: 500 },
},
},
grid: {
line: { stroke: '#e2e8f0', strokeWidth: 1 },
},
tooltip: {
container: {
background: '#ffffff',
fontSize: 11,
borderRadius: 4,
boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
padding: '8px 10px',
},
},
};
/tailwind-css-data-viz/react-component-architecture/typescript-financial-data-modelingAutomated agent workflow for reviewing and updating project agent context files when code changes are made.
Create a custom Dagster Component with demo mode support, realistic asset structure, and optional custom scaffolder using the dg CLI. Use this skill if there is no Component included in an existing integration or if Dagster does not have the integration.
Expert guidance for Dagster data orchestration including assets, resources, schedules, sensors, partitions, testing, and ETL patterns. Use when building or extending Dagster projects, writing assets, configuring automation, or integrating with dbt/dlt/Sling.
Expert guidance for working with Dagster and the dg CLI. ALWAYS use before doing any task that requires knowledge specific to Dagster, or that references assets, materialization, components, data tools or data pipelines. Common tasks may include creating a new project, adding new definitions, understanding the current project structure, answering general questions about the codebase (finding asset, schedule, sensor, component or job definitions), debugging issues, or providing deep information about a specific Dagster concept.
Initialize a dagster project using the create-dagster cli. Create a dagster project, uv virtual environment, and everything needed for a user to run dg dev or dg check defs successfully. (project)
Production Python coding standards with automatic version detection (3.10-3.13). Use when writing, reviewing, or refactoring Python to ensure adherence to modern type syntax, LBYL exception handling, pathlib operations, ABC-based interfaces, and production-tested patterns. Not Dagster-specific - applies to any Python project.