Master Skill v1.2.1updated 2026-10-14

Four house skills, one install.

So Master Concept work looks and reads the same, whoever makes it.

master-skill:chart ready

For any chart, dashboard, KPI tile or data table.

Pick and build a chart that matches the house practice instead of reinventing it — a named taxonomy, patterns with working code in three stacks, and the rules that make many charts read as one system.

11 intents41 patterns 19 rules3 renderers see below ↓

master-skill:ui ready

For how a page is put together.

Headers, signed-out states, cards, rows, filters. Chart answers how a number reads; this answers how the page is assembled.

4 kinds12 patterns 10 rulessee below ↓

master-skill:brand ready

For colour, type, logos and dark mode on anything.

Tokens, typography, marks, contrast and delivery rules — the layer chart resolves its palette against, and the one that governs everything with no chart in it: slides, pages, email, documents.

5 referencesmeasured contrastmarks + fallbackssee below ↓

master-skill:grill ready

For discovering requirements by interviewing people.

Structured stakeholder interviews that turn pain points into a prioritised requirements backlog. new grill sets up a project, grill me runs one interview, synthesize merges them. One file, so it imports into claude.ai and Open WebUI too.

3 modes7 phasesrole-basedsee below ↓

Start here — say one of these

Nothing to invoke. Every skill fires from what you ask for.

chart

brand

grill

The gauge one is the interesting test. A skill that just complies is a snippet folder. This one reads its own antipatterns and offers the form that actually fits.

Why one plugin, not two. The palette contract between chart, brand and grill can never be half-satisfied — one install delivers all three. A colleague who wants the house practice runs one command, not three.

master-skill:chart

skill 1 of 3

53 patterns and 19 rules extracted from five existing dashboards, generalised. Every sample below renders live from synthetic data with generic labels — no project, app, table or field name appears anywhere in the vocabulary.

Pick a chart from the data you have

Start here. The shape of your data narrows it to one or two patterns.

What you have	What you want to know	Pattern
`[{t, value}] where value is a quantity, not a rate`	How has a volume accumulated over time?	`change-over-time/area`
`[{period, measure, rate}]`	Did volume and efficiency move together over the period?	`change-over-time/bar-line-combo`
`[{date, value}]`	When in the calendar was activity concentrated?	`change-over-time/calendar-heatmap`
`[{t, label, detail?, emphasis?}]`	What happens when, in order?	`change-over-time/event-timeline`
`[{t, value}]`	How has one value moved over time?	`change-over-time/line`
`[{entity, series: [{t, value}]}]`	How do several series compare over time?	`change-over-time/multi-line`
`[{period, ...categories}]`	How did the composition of the total change over time?	`change-over-time/stacked-area`
`[{period, up, down, net}]`	What was the net after movement in both directions?	`deviation/diverging-bar`
`[{entity, before, after}]`	How far did each entity move between two states?	`deviation/dumbbell`
`[{entity, actual, reference}] — plotted as the signed difference`	Who is ahead of the reference, and who is behind?	`deviation/pace-delta`
`[{group, item, value}]`	How does volume distribute across a nested grouping?	`magnitude/bubble-grid`
`[{weekday, hour, value}] aggregated across cycles`	What is the recurring rhythm across the week?	`magnitude/cyclical-heatmap`
`[{entity, bucket, value}]`	Which entity and bucket combinations are hot?	`magnitude/matrix-heatmap`
`[{entity, value}]`	Who is top, when a bar chart is too heavy?	`ranking/lollipop`
`[{entity, value}]`	Who is top, and by how much?	`ranking/ranked-hbar`
`[{entity, segments: [value]}]`	Who is top, and what is each one made of?	`ranking/stacked-hbar`
`[{value, group?}]`	Where along one axis do individual records cluster?	`distribution/beeswarm`
`[value] — a flat list of numbers`	What is the shape of the spread?	`distribution/histogram`
`[{entity, min, max, mean, n}]`	What is the spread across past cycles, and where is the centre?	`distribution/range-dot`
`[{entity, x, y, size}]`	How do two measures relate, and which entities carry the weight?	`correlation/bubble-scatter`
`[{entity, x, y, size?}]`	Which entities sit in the corner that needs action?	`correlation/quadrant-scatter`
`[{label, value}] summing to a whole`	What share does each part hold, at a glance?	`part-to-whole/donut`
`[{label, value}]`	What share does each part hold?	`part-to-whole/labelled-pie`
`[{entity, ...parts}] normalised to 100% per row`	How does the mix differ between entities, ignoring their size?	`part-to-whole/normalised-hbar`
`[{region, value}] plus region geometry`	How does a value vary across regions?	`spatial/choropleth`
`[{lat, lon, label, value?}]`	Where are the records, geographically?	`spatial/point-map`
`[{lat, lon, t?, value?}] in order, one array per route`	What path was taken, and what happened along it?	`spatial/route-overlay`
`fixed [{x, y, id}] + [{id, occupant?}]`	Who or what is where, in a fixed layout?	`spatial/schematic-map`
`[{stage, count}] in order`	Where in the sequence are we losing them?	`flow/funnel`
`[{from, to, value}] forming a directed acyclic flow`	Where does the volume go as it moves between stages?	`flow/sankey`
`[{label, value, target, bands?}]`	Are we at target?	`status/bullet-meter`
`[{entity, value, expected}]`	Are we where we should be by now?	`status/pace-bar`
`[{label, value, budget, icon?}]`	How much of the allowance is left?	`status/progress-row`
`series of {t, value} + one target + one period end`	Are we on pace to breach a target before the period ends?	`status/projection-band`
`[{id, parent, label}]`	What reports to what?	`hierarchy/org-tree`
`[{label, value, group?}] — values must be positive`	How does a total break down, when there are too many parts for a pie?	`hierarchy/treemap`
`[{entity, ...measures}] with one form chosen per column`	How do many entities compare across several measures at once?	`layout/chart-table`
`[{entity, series: [value]}]`	Which entities behave differently from the rest?	`layout/small-multiples`
`[{label, delta}]`	How far off the reference, and in which direction?	`readout/delta-cell`
`[{label, value, delta, series?}]`	What is the headline number, and which way is it moving?	`readout/kpi-tile`
`[{entity, count}] + a step scale derived from how the counts actually fall`	Which of these is used most, read across a wall of them at a glance?	`readout/step-badge`
`{signedIn, name, avatar?, items[{label, href}]} or {signInHref}`	Who am I signed in as, and how do I get out?	`shell/account-menu`
`{product, home, tabs[{label, href, match}], account?}`	Where does a reader always find where they are and the way out?	`shell/app-header`
`[{label, href?, icon?}] — the last crumb may be a link or plain text`	How deep am I, and how do I get back one level rather than all the way out?	`shell/breadcrumb-trail`
`the same tabs[] the header renders wide`	Where do the sections go when the header runs out of width?	`shell/nav-drawer`
`one stored value: 'light', 'dark', or absent for system`	How does a reader choose light or dark, and what happens if they never do?	`shell/theme-toggle`
`{public: what renders anonymously, gated: what does not, signIn}`	What does someone see who followed a link here without an account?	`state/signed-out`
`[{key, label, type}] per column + the active {key, dir}`	How do I re-read a table by a different column?	`component/column-sort`
`[{entity, logo?, title, subtitle?, badge?, rows[]}]`	How do I show one record's identity and its fields together, repeated across a grid?	`component/entity-card`
`{label, value, hint?, masked?, actions[]}`	What is this one field, and what can I do with it?	`component/field-row`
`[{key, label, options[]}] for the facets + one free-text key`	How do I narrow a table without leaving it?	`component/filter-bar`
`[{value, label}] + the set already chosen`	How do I pick several values out of a list too long to scroll?	`component/multi-select`
`[{scope, label}] + a resolver from scope to [{value, label}]`	How do I choose from a list that is only meaningful once something else is chosen?	`component/scoped-picker`

11 intent families

The first nine are the Financial Times Visual Vocabulary — frozen, never extended. Two are house additions the source apps forced.

Intent	Question it answers	Patterns
`change-over-time`	What is the trend?	7
`deviation`	How far above or below a reference?	3
`magnitude`	How big, side by side?	3
`ranking`	Who is 1st, 2nd, 3rd?	3
`distribution`	What is the shape and spread?	3
`correlation`	Do these two move together?	2
`part-to-whole`	What share of the total?	3
`spatial`	Where?	4
`flow`	What moved from where to where?	2
`status` house	Where is this against its target?	4
`hierarchy` house	What reports to what?	2

FT is an editorial vocabulary — it has no gauge, bullet, KPI tile, meter, funnel or org chart, which is most of what a dashboard is. status and hierarchy close that gap. spatial was empty in the first pass and is now filled by a real map and a floor plan.

Patterns — 53 live samples

Every sample is real rendering code, not a picture. The index follows you as you scroll.

Marks — the icon layer

Three resolvers already exist across the source apps, each with a guaranteed fallback. That fallback chain is the pattern; the asset pack is a brand decision, not a chart one.

R16 — every row carries a mark, resolved dynamically, always falls back. Country flags need no asset pack at all: an ISO-2 code maps to Unicode regional-indicator codepoints, so the glyph comes from the system font. Brand marks resolve keyword → domain → embedded favicon. People resolve photo → monogram. Nothing ever renders blank, and nothing requires a network call at paint time.

The 19 rules

Cross-cutting behaviours, not patterns. These are what make many charts read as one system — and none of them appear in any public chart guide.

master-skill:ui

12 patterns for how a page is put together — the frame, the states, the parts inside the column. Chart answers how a number reads; these answer how the surface is assembled. Same live samples, same rules discipline, its own numbering (U1–U10).

master-skill:brand

skill 2 of 3

The house identity, and the layer chart resolves its palette against. Separate from chart because it changes at a different rate and governs work that contains no chart at all — slides, pages, email, documents.

Measured contrast — not estimated

Foreground	Ground	Ratio	Verdict
`#1B365D` navy	light `#f4f5f7`	11.11:1	✓
`#1B365D` navy	dark `#14181f`	1.47:1	✗ — why the ink must lighten
`#8fb3e0` lightened navy	dark	8.21:1	✓
`#FF9E1B` orange	light	1.90:1	✗ — fill only, never ink
`#FF9E1B` orange	dark	8.61:1	✓
`#1B365D` on `#FF9E1B`	orange fill	5.86:1	✓ the correct usage
`#ffffff` on `#FF9E1B`	orange fill	2.07:1	✗ never
`#888888` muted	light	3.25:1	◐ UI and large text only, never body copy

The four things that get broken most

Rule	Why
The orange is a fill, not an ink	1.90:1 on the light ground. Never text, never a thin line, never an icon — navy ink on an orange fill instead.
The ink lightens on dark; the orange does not move	Navy is 1.47:1 on dark and stops being a cue. The orange already clears 8.61:1, so leaving it means the same colour means the same thing on a projector and on a phone.
Split a token that does two jobs	The brand ink and a navy ground hold one value in light mode and move in opposite directions on a dark flip. The bug only appears once someone turns dark mode on.
Never encode by colour alone	About one man in twelve has a red–green deficiency. Every colour distinction carries a shape, glyph, position or direct label as well.

The palette contract

chart never hard-codes a hex. It asks for capabilities and resolves them here, or against its own neutral fallback when this skill is absent — which is what lets chart work outside Master Concept.

Need	Requirement
`categorical`	6+ hues, visibly separated, legible on both grounds
`sequential`	a 5-step ramp from the accent
`semantic`	good · warn · critical — and never the only channel

Hard rule: no PII. People resolve to a monogram — flag, then embedded favicon, then initials on a hashed hue. A generated map of real people to photo URLs never ships inside a skill.

master-skill:grill

skill 3 of 3

Structured stakeholder interviews that turn pain points into a prioritised requirements backlog, for any project. One skill, one short brief per project, and the same file runs on claude.ai, Open WebUI, Claude Code and Cowork.

Three modes, picked from what you type

You type	Mode	What happens
`new grill for <project>`	New grill	Grills the project owner in two rounds, with recommended answers, and prints the brief: goal, current tool, adjacent systems, capability areas, roles with codes and probes, report folders, languages, timebox.
`grill me, I'm <name>, <role>, <team>`	Interview	Seven phases, at most three questions a turn, Mom Test and Jobs-to-be-Done questioning, five-whys on every pain, severity and MoSCoW rated by the stakeholder, then a fixed-shape Markdown report with stable IDs. 30–45 minutes.
`synthesize` + the reports	Synthesize	Clusters pains by theme, builds a role-by-theme severity heatmap, a consolidated backlog traceable to every stakeholder, conflicts for management, current-tool parity, migration needs, and a CSV of the backlog.

Where it runs

Platform	How
Claude Code · Cowork	Already in this plugin. `/master-skill:grill-new` writes the brief as `GRILL.md`; "grill me" runs the interview.
claude.ai	Download grill-latest.zip, upload it under Customize → Skills (or Organization settings → Plugins & skills to provision it for everyone), paste the project brief into a shared Project's instructions.
Open WebUI	Workspace → Skills → Import the same zip, create a model per grill with the brief as its system prompt and the skill attached, share the model with the team.

The skill is one file on purpose: Open WebUI injects a skill as plain text when the model has no native tool calling and cannot read supporting files. Project-specific content lives in the brief, never in the skill, and briefs are readable by stakeholders on shared platforms — so they never name candidate products.

Install

Two skills in one plugin. Nothing to invoke — they fire from what you ask for.

# anyone, no account and no credentials /plugin marketplace add https://apps.masterconcept.ai/static/skills/marketplace.json /plugin install master-skill@master-skill # then just ask for a chart. Two commands you type: /master-skill:catalog rebuild this page /master-skill:add capture a chart you just built as a pattern # update /plugin marketplace update master-skill

Inside Master Concept it is already in your plugin library — open /plugin, or Settings → Plugins in Desktop and Cowork, and click Install. The command above is for everyone else.

Repo

master-skill/ ├── .claude-plugin/ │ ├── marketplace.json name · owner · plugins:[{name, source}] │ └── plugin.json name · description · version · commands ├── skills/ │ ├── chart/SKILL.md ◄ skill 1 │ │ ├── references/ taxonomy · palette · house-style · marks · stacks │ │ └── patterns/ ◄── the accumulating layer │ ├── brand/SKILL.md ◄ skill 2 │ │ └── references/ tokens · typography · marks · contrast · delivery │ └── grill/SKILL.md ◄ skill 3 — one file, imports into claude.ai and Open WebUI too ├── commands/ catalog.md · add.md · grill-new.md ├── scripts/ build_catalog.mjs · validate.mjs · release.sh ├── docs/ PLAN · ANALYSIS · TAXONOMY · DECISIONS · PREVIEW └── showcase.html generated — this page

Versioning. version lives in plugin.json only — never also in the marketplace entry, because Claude Code silently prefers plugin.json. Users receive a change when that string moves, so scripts/release.sh <x.y.z> bumps it, commits and tags in one step.