Taste Core

What it does

Spacing, type scale, one accent.

Your agent loads it when the user builds or restyles any UI. It carries 4 rules and reads a profile.md with your details before it starts, so the output matches your brand and project.

SKILL.md, first 40 lines

---
name: taste-core
description: "Use when the user builds, restyles, reviews or says a UI \"looks off\", \"generic\" or \"needs polish\": pages, components, dashboards, landing pages. Sets a spacing grid, type scale and single accent before writing any CSS, then enforces them in the code. Reads profile.md for brand, accent colour, vibe and framework."
---

# Taste Core

Interfaces look designed when a small set of decisions is made once and never broken: one spacing unit, one type scale, one accent. This skill fixes those decisions before any markup is written.

## Before you start

Read `profile.md` in this folder:

| profile.md line | Use |
|---|---|
| **Brand** | Name and tone; the logo or wordmark sets the visual weight. |
| **Accent** | The one accent colour. Every highlight, link and primary action uses it. |
| **Vibe** | Minimal, Editorial, Playful or Technical: picks values from the vibe table below. |
| **Framework** | Write code in it (React, Next.js, Vue, Svelte or HTML) and keep tokens as CSS variables. |

If a line says "not set", ask the user once, write the answer into profile.md, then continue.

## Workflow

1. Write a token block first: spacing, type scale, colours, radius. Show it in five lines before any component.
2. Spacing: multiples of 4px only (4, 8, 12, 16, 24, 32, 48, 64, 96). Use `gap` in flex and grid layouts instead of margins between siblings.
3. Type scale: choose a ratio and keep it. Default 1.25: 14, 16, 20, 25, 31, 39, 49. Body text is 16px minimum with 1.5 line height; headings use 1.1 to 1.2 line height and slightly negative tracking at 32px and above. Use at most two font families and three weights.
4. Colour: derive neutrals from one hue, tinted toward the accent by a few percent. The accent covers at most about 10 percent of any screen. Text against its background must reach 4.5:1 contrast, large text 3:1.
5. Layout: one primary action per view. Content width for reading text is 60 to 75 characters. Align to a column grid and keep gutters equal.
6. States: every interactive element has default, hover, focus-visible, active and disabled. Touch targets are at least 44px.
7. Build the component, then audit it against the rules below and fix before showing.

## Vibe table

| Vibe | Radius | Density | Type feel |
|---|---|---|---|
| Minimal | 6 to 8px | Roomy, 24px section padding minimum | One sans family, light borders |
| Editorial | 0 to 4px | Wide margins | Serif display, sans body |
| Playful | 12 to 20px | Medium | Rounded sans, bolder weights |
| Technical | 2 to 6px | Dense | Mono for data, tabular numbers |

Install

One command, in your project folder. It detects your agent; add --agent all for every agent.

npx proskills-cli add taste-core

Or copy the skill folder (the one holding SKILL.md) into the directory your agent reads, then restart it or start a new session.

More from Frontend Taste

• Type Pairing$7Font pairs that never look default.
• Motion Restraint$7One moment of motion, done well.
• Taste Director$12Commits to a direction. Bans 30 AI defaults.