Use when the user explicitly asks for a standalone HTML page in a restrained minimal style, especially reading-first dashboards, briefs, handouts, maps, or internal reports. User-invoked only; do not auto-trigger.
npx skills add https://github.com/serejaris/personal-corp-skills --skill design-minimal
Generate one standalone HTML page with a restrained minimal visual system: clear hierarchy, strong spacing, explicit structure, limited palette, and no decorative effects.
:root.sm:, md:, lg:, xl:, 2xl:), no media queries, no alternate mobile layout.Allowed <style> shape:
<style>
:root {
--bg: #f5f4ef;
--ink: #1a1a1a;
--muted: #77736b;
--hair: #d4d2cc;
--paper-soft: #eeece4;
--font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
</style>
Forbidden CSS shape:
.card { ... }
@media (...) { ... }
body { ... }
button:hover { ... }
Use Tailwind classes directly on elements. Reference tokens through arbitrary values:
<body class="m-0 bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55]">
<main class="mx-auto w-[1120px] px-8 py-8 pb-20">
<header class="border-y-2 border-[var(--ink)] py-4">
<p class="text-[11px] uppercase tracking-[0.14em] text-[var(--muted)]">BRIEF 042 · INTERNAL</p>
<h1 class="mt-3 text-[28px] leading-tight font-normal">Page Title</h1>
</header>
</main>
</body>
Use fixed desktop-oriented widths such as w-[960px], w-[1120px], max-w-[1200px], grid-cols-[...], min-h-[...]. Do not add mobile fallbacks. One-column, two-column, and dense multi-panel layouts are allowed when the content benefits from them.
| Element | Tailwind Pattern |
|---|---|
| Page | bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55] |
| Shell | mx-auto w-[1120px] px-8 py-8 pb-20 |
| Grid | grid grid-cols-[1fr_320px] gap-6 or grid grid-cols-3 gap-4 |
| Header | border-y-2 border-[var(--ink)] py-4 |
| Meta | text-[11px] uppercase tracking-[0.14em] text-[var(--muted)] |
| Section label | [ <span class="bg-[var(--ink)] text-[var(--bg)] px-1">MAIN</span> ] |
| Panel | border border-[var(--ink)] p-4 |
| Soft panel | border border-dashed border-[var(--ink)] p-4 |
| Divider | Text dashes inside HTML, styled with muted mono text |
| Entry | border-t border-[var(--hair)] pt-5 mt-5 |
| Link | underline decoration-[var(--hair)] underline-offset-4 hover:bg-[var(--ink)] hover:text-[var(--bg)] |
| Badge | border border-[var(--hair)] px-1 text-[10px] uppercase text-[var(--muted)] |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=900">
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--bg: #f5f4ef;
--ink: #1a1a1a;
--muted: #77736b;
--hair: #d4d2cc;
--paper-soft: #eeece4;
--font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}
</style>
<title>Design Minimal</title>
</head>
<body class="m-0 bg-[var(--bg)] text-[var(--ink)] font-[var(--font-main)] text-[14px] leading-[1.55]">
<main class="mx-auto w-[1120px] px-8 py-8 pb-20">
<header class="border-y-2 border-[var(--ink)] py-4">
<p class="text-[11px] uppercase tracking-[0.14em] text-[var(--muted)]">BRIEF 042 · INTERNAL</p>
<h1 class="mt-3 text-[28px] leading-tight font-normal">Page Title</h1>
<p class="mt-2 text-[var(--muted)]">Short one-line description.</p>
</header>
<div class="mt-6 grid grid-cols-[1fr_320px] gap-6">
<section class="border border-[var(--ink)] p-4">
<div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">
[ <span class="bg-[var(--ink)] text-[var(--bg)] px-1">MAIN</span> ] important
</div>
<p class="mt-3">...</p>
</section>
<aside class="border border-dashed border-[var(--ink)] p-4">
<div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">[ SIDE ]</div>
<p class="mt-3">...</p>
</aside>
</div>
<div class="mt-8 text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">──── entries ──────────────────────────────</div>
<article class="mt-5 border-t border-[var(--hair)] pt-5">
<div class="text-[10px] uppercase tracking-[0.14em] text-[var(--muted)]">[ 01 / 05 ] signal</div>
<h2 class="mt-2 text-[20px] leading-tight font-normal">Section Title</h2>
<p class="mt-3">...</p>
</article>
</main>
</body>
</html>
<style> instead of Tailwind classes.sm: / md: / lg: classes.@media for mobile.Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \"the xlsx in my downloads\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.
Query openFDA API for drugs, devices, adverse events, recalls, regulatory submissions (510k, PMA), substance identification (UNII), for FDA regulatory data analysis and safety research.
MATLAB and GNU Octave numerical computing for matrix operations, data analysis, visualization, and scientific computing. Use when writing MATLAB/Octave scripts for linear algebra, signal processing, image processing, differential equations, optimization, statistics, or creating scientific visualizations. Also use when the user needs help with MATLAB syntax, functions, or wants to convert between MATLAB and Python code. Scripts can be executed with MATLAB or the open-source GNU Octave interpreter.
UMAP dimensionality reduction. Fast nonlinear manifold learning for 2D/3D visualization, clustering preprocessing (HDBSCAN), supervised/parametric UMAP, for high-dimensional data.
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.
Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.
Take serejaris/design-minimal from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.