---
id: serejaris/personal-corp-skills/design-minimal
version: "e0f23197"
license: MIT
install: manual
updated: 2026-07-19
---
# design-minimal — Design Minimal creates a single self-contained HTML file with a restrained visual system—clear hierarchy, strong spacing, and limited palette—ideal for reading-focused dashboards, briefs, handouts, and internal reports. It uses Tailwind CDN for layout and design tokens as CSS variables, with no decorative effects, responsive prefixes, or external dependencies.
Publisher: serejaris · Stars: 208 · Updated: 2026-07-19
Install (manual): `git clone https://github.com/serejaris/personal-corp-skills`
## SKILL.md
# 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.
## Language
- Match the visible interface language to the user's language and artifact context.
- For Russian pages, write visible UI labels, headings, section names, status explanations, and footer copy in Russian.
- Keep English only for file paths, commands, code identifiers, schema fields, API names, model/tool names, and literal values that must remain copyable.
- If an English technical term is useful for teaching, pair it with a plain-language local label once, then use the local label in the interface.
## Hard Contract
1. Use one self-contained HTML file.
2. Use Tailwind CDN only for layout and component styling.
3. Do not write custom CSS rules for components, layout, typography, states, cards, grids, buttons, headers, or sections.
4. The only allowed CSS is design tokens as CSS variables in `:root`.
5. Do not add mobile adaptation: no responsive Tailwind prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`), no media queries, no alternate mobile layout.
6. Do not use external fonts, JavaScript frameworks, icon libraries, SVG icons, gradients, shadows, rounded corners, or accent colors.
7. Use typography, color, spacing, and layout through Tailwind classes plus token variables.
Allowed `
```
Forbidden CSS shape:
```css
.card { ... }
@media (...) { ... }
body { ... }
button:hover { ... }
```
## Tailwind Usage
Use Tailwind classes directly on elements. Reference tokens through arbitrary values:
```html
BRIEF 042 · INTERNAL
Page Title
```
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.
## Visual Vocabulary
| 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 | `[ MAIN ]` |
| 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)]` |
## Skeleton
```html
Design Minimal
──── entries ──────────────────────────────
[ 01 / 05 ] signal
Section Title
...
```
## Common Mistakes
- Adding component selectors in `