Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Overmind Console design system — semantic tokens, shared primitives, geometry and icons, the border-contrast floor, the duplicated table implementations, and the verification scripts.
Install Frontend Design
$ npx skills add overmind-core/overmind --skill frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install overmind-core/overmind frontend-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/overmind-core/overmind.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-design .claude/skills/frontend-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-design" agent skill from https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add overmind-core/overmind --skill frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install overmind-core/overmind frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/overmind-core/overmind.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-design" agent skill from https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add overmind-core/overmind --skill frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install overmind-core/overmind frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/overmind-core/overmind.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/frontend-design .cursor/skills/frontend-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-design" agent skill from https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/overmind-core/overmind.git --path .agents/skills/frontend-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add overmind-core/overmind --skill frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install overmind-core/overmind frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/overmind-core/overmind.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/frontend-design .gemini/skills/frontend-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install overmind-core/overmind frontend-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add overmind-core/overmind --skill frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/overmind-core/overmind.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/frontend-design .github/skills/frontend-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add overmind-core/overmind --skill frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install overmind-core/overmind frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/overmind-core/overmind.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/frontend-design .opencode/skills/frontend-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-design" agent skill from https://github.com/overmind-core/overmind/tree/main/.agents/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-design- GitHub stars
- 597
- Token cost
- ~1.8k tokens
- SKILL.md length
- 851 words
- Files
- 1
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- AGPL-3.0
At a glance
Overmind Console design system — semantic tokens, shared primitives, geometry and icons, the border-contrast floor, the duplicated table implementations, and the verification scripts.
- Works in 2 steps: src/components/ui/data-table.tsx — the… → src/components/datasets/notebook/rows-gri…
- Changing frontend UI
- SKILL.md covers Color — semantic tokens only, Border contrast — hard…, Shared primitives — use them,… and Geometry, type, icons, plus 3 more sections
- Calls bun and bunx; needs PIXELARTICONS_LICENSE_KEY
What it does
Frontend Design is an agent skill from overmind-core/overmind. Overmind Console design system — semantic tokens, shared primitives, geometry and icons, the border-contrast floor, the duplicated table implementations, and the verification scripts. Use when writing or changing frontend UI, styles, tables, or component markup.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Frontend development and Design systems. The repository describes itself as: The platform for continuously improving AI agents. The licence is AGPL-3.0.
When your agent uses it
- Changing frontend UI
- Component markup
Example prompts
- “/frontend-design”
Requirements
- A credential in PIXELARTICONS_LICENSE_KEY
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- src/components/ui/data-table.tsx — the shared TanStack (Traces, Sessions, Runs, Datasets, Experiments, Billing)
- src/components/datasets/notebook/rows-grid.tsx — the paged rows grid every dataset table (source, cell output, product) renders through
What it can do on your machine
Read from SKILL.md and the folder at commit 3dec73c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
bunbunx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use bunx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
PIXELARTICONS_LICENSE_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Design loads about 1.8k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 851 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from overmind-core/overmind at commit 3dec73c, republished under its AGPL-3.0 licence (© overmind-core). 851 words, ~1,847 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-design/SKILL.md (or your agent's skills folder).- name
- frontend-design
- description
- Overmind Console design system — semantic tokens, shared primitives, geometry and icons, the border-contrast floor, the duplicated table implementations, and the verification scripts. Use when writing or changing frontend UI, styles, tables, or component markup.
Frontend design conventions
The Console is "a quiet workshop for agent improvement" — warm minimalism, copper/gold brand, NeueBit (pixel, display + labels) and PP Neue Montreal (body), small radii, no shadows. Keep it; don't drift toward default Tailwind.
The token spec is the root DESIGN.md — extend its values, don't restructure it. Tokens are declared in frontend/src/styles.css under @theme inline.
Color — semantic tokens only
- Never raw Tailwind palette utilities (
bg-green-500,text-blue-600,border-amber-400) or hex in class strings (bg-[#1c1917]). - Status → the four semantic tokens as a tint triplet. Tokens flip per theme, so no
dark:variants:border-success/40 bg-success/10 text-success. Meanings:success= passed/healthy/connected/completed;warning= review/degraded/stale;info= running/pending/queued/training;destructive= failed/error/cancelled. Prefer the components —<Badge variant="success|warning|info|error|neutral">or<StatusBadge status={domainStatus(state)}>(lib/job-status.tsx,lib/colors.ts). - Categorical — a fixed set of entity types, not status →
text-cat-1 … text-cat-6/bg-cat-1/10. Assign a stable slot per type. - Login / onboarding, the always-dark cinematic surfaces → the named
--auth-*tokens (bg-auth-panel,border-auth-border,text-auth-text-dim,text-auth-accent, …), never inline hex. - Neutrals →
bg-background/card/muted,text-foreground/muted-foreground,border-border. Titles usetext-foreground, nevertext-black dark:text-white.
Border contrast — hard constraint
--border at full strength is only ~1.3:1 against a card; the visibility floor in scripts/check-contrast.mjs is 1.2. The sanctioned ramp:
- outline = bare
border-border - divider =
border-border/70 - faint =
border-border/60
Anything below /60 is invisible. Never lower a border opacity without running bun run check:contrast -- --all and reading the border rows.
Shared primitives — use them, don't hand-roll
- A page title is
<PageHeader title description count actions icon leading/>. Never a raw<h1>. - A page scaffold is
<PageShell variant="scroll|full" header/>. - Loading is
<Spinner size/>inline (buttons) or<LoadingState label fullPage/>for a region;Skeletonwhen the layout is known on first paint. Never a rawanimate-spinor a "Loading…" text block. - An empty state is
<EmptyState icon title description action size/>. - A titled card is
<SectionCard title …>; plain<Card>otherwise. Don't hand-rollrounded-lg bordersurfaces. - A destructive confirm is
<ConfirmDialog destructive onConfirm/>. Neverwindow.confirm. Dialog Cancel is alwaysvariant="secondary"(whatAlertDialogCancelrenders). - Feedback:
sonnertoast = transient async result;Alert= persistent inline notice;DismissibleAlert= in-dialog mutation error. - Model choices use
ModelOptionLabel: provider logo, model name, then separate metadata. Use it in both dropdown rows and selected values, including judge, benchmark, comparison and filter selectors. Keep fit/cost/size annotations and selection rules; model IDs remain the stored values.ModelProviderChipis for read-only badges, not dropdown rows.
Geometry, type, icons
- No box-shadows — every
--shadow-*isnone, soshadow-*utilities are dead no-ops. Depth = surface layering + 1px borders. - Radii:
rounded-smfor interactive primitives,rounded-mdfor containers.rounded-lg/xl/2xl/3xlare off-system. - Headings use
font-display(NeueBit, unweighted).font-monois the loaded system stack — Fira Code is not shipped, don't reference it. - Icons: always the central registry —
import { Icon } from "@/components/ui/icons"→<Icon.name className="size-4" />. The glyphs are pixelarticons paths vendored intoui/icons/glyphs.ts(24×24 grid, 2px inset,currentColor); never import that module orlucide-reactin app code; both failcheck:design. One concept = one glyph (Icon.delete= trash,Icon.close/Icon.failed= the "X"). Missing a glyph? Addname: glyph("<svg-name>")toui/icons/index.ts, the only file that may read the table, thenbun run icons:vendorwithPIXELARTICONS_LICENSE_KEYset (or--source <svg dir>of an unlocked package) — typecheck fails until the table is regenerated. Removing one is the reverse. There is no icon package to install. Sizes:size-4in buttons,size-[17px]in nav,size-3for dense chips.
Show full SKILL.md (323 more words)Show less
Two duplicated table implementations
A table fix applied to one codepath silently misses the other:
src/components/ui/data-table.tsx— the shared TanStack<DataTable>(Traces, Sessions, Runs, Datasets, Experiments, Billing)src/components/datasets/notebook/rows-grid.tsx— the paged rows grid every dataset table (source, cell output, product) renders through
Sort headers are in components/ui/sortable-header.tsx for hand-built tables and inline inside data-table.tsx for the shared one — check both before declaring a header fix done.
Eval results align model variants by the generated client's rowIndex, including zero. Trace-filter samples use sourceTraceId; samples with neither keep their own identity. Use components/evaluations/sample-index.ts for table and detail lookups so unrelated outputs never collapse or stand in for another model's missing response.
The eval datapoint popup selects one model at a time and shows its input beside its generated output, grading reference, and evaluator reasoning. SampleInput consumes the generated EvalSampleIO contract: captured initial runner requests include system prompts and tools; historical dataset inputs explicitly say the exact request was not captured. Never label a combined trajectory as input or an extracted statistical prediction as the model's full output.
Trajectory model-call cards use ModelProviderChip as their title and a three-line system-prompt preview that opens in a dialog. Mode-specific model/prompt context requires an exact step-anchor match; unbound or shared calls show only context common to their candidates. Never borrow a conflicting worker prompt. Excerpts stay labelled as excerpts; missing capture has no expand control.
App shell
The left sidebar logic in src/routes/_auth.tsx and src/components/ui/sidebar.tsx is owned separately — pages adapt to the native in-flow sidebar. Don't add routes to focus-mode patterns or modify shell logic without explicit approval.
Tooling
- Package manager is Bun (
bun add,bunx shadcn@latest add …) — never pnpm/npm/yarn. New shadcn components get adapted to the token system after generation. - Biome must not format assets.
.svgis excluded inbiome.json— keep it excluded and never runbiome … --writeover**/*.svg(2.5.x sorts attributes and corrupted a logo's XML prolog). - Verify every UI change, in both light and dark:
cd frontend
bun run typecheck && bun run lint
bun run check:all # check:design + check:contrast + check:controls© overmind-core, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/frontend-design of overmind-core/overmind.
Open the folder on GitHubat commit 3dec73c
Compare with similar skills
Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Design this skillovermind-core/overmind | 597 | — | ~1.8k | Automated safety check: Pass | AGPL-3.0 | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Superdesignsuperdesigndev/superdesign-skill | 630 | — | ~4.1k | Automated safety check: Pass | MIT | |
| UI Design Braincarmahhawwari/ui-design-brain | 893 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Frontend Design Routercode-yeongyu/oh-my-openagent | 70k | — | ~5.3k | Automated safety check: Pass | Custom licence | |
| Project-Native Component Builderkostja94/bricks | 199 | — | ~965 | Automated safety check: Pass | MIT |
Similar skills
Superdesign
superdesigndev/superdesign-skill
Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.
UI Design Brain
carmahhawwari/ui-design-brain
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.
Frontend Design Router
code-yeongyu/oh-my-openagent
Routes frontend and UI work through design reference rulesets, with a design-system gate plus layout and print guidance, before any UI code is written.
Project-Native Component Builder
kostja94/bricks
Builds new interface components inside an existing project, reusing its design system, stack and conventions instead of producing isolated demo UI.
Frontend Design
udecode/plate
Build web interfaces with genuine design quality, not AI slop.
More from overmind-core/overmind
All 20 skills in this repoAPI Endpoints
overmind-core/overmind
End-to-end workflow for adding or changing a backend API endpoint — which module the serializer and view belong in, URL registration, OpenAPI client regeneration, and typed consumption from the…
Finetuning Model Onboarding
overmind-core/overmind
Rules for adding a new model or model family to the finetuning pipeline, or changing finetuning behavior for an existing one — engine-agnostic customization via family hooks instead of if/else in…
MCP
overmind-core/overmind
End-to-end workflow for adding or changing Overmind MCP tools, resources, prompts, authentication, or result contracts — server layers, catalog registration, MCP-impact classification, and required…
PR Etiquette
overmind-core/overmind
How to open a complete pull request on overmind-core/overmind — the CI gates, the cross-cutting surfaces a change must carry with it (MCP, blast radius, the docs repo), gh pr edit being broken here…
Seed Demo Data
overmind-core/overmind
Run or modify the seeddemo management command (the one-project Support Copilot demo) without breaking the beat-safety invariants that keep celery workers from re-driving seeded rows.
Overmind Agent
overmind-core/overmind
Inspect an Overmind project's agent map, capabilities, behaviour contracts, repository provenance and evaluation coverage.
Related
Categories
Questions about Frontend Design
What does Frontend Design do?
Overmind Console design system — semantic tokens, shared primitives, geometry and icons, the border-contrast floor, the duplicated table implementations, and the verification scripts. Frontend Design is an agent skill from overmind-core/overmind. Overmind Console design system — semantic tokens, shared primitives, geometry and icons, the border-contrast floor, the duplicated table implementations, and the verification scripts.
When should I use Frontend Design?
Frontend Design fits situations like: changing frontend UI; component markup.
How do I install Frontend Design in Claude Code?
Run `npx skills add overmind-core/overmind --skill frontend-design -a claude-code`. Or copy the skill folder (.agents/skills/frontend-design in overmind-core/overmind) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Design in Codex?
Run `npx skills add overmind-core/overmind --skill frontend-design -a codex`. Or copy the skill folder (.agents/skills/frontend-design in overmind-core/overmind) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.
Can I use Frontend Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add overmind-core/overmind --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.
What does Frontend Design need to run?
Going by SKILL.md and its folder, Frontend Design needs the command-line tools its instructions call (bun and bunx) and credentials named PIXELARTICONS_LICENSE_KEY. Our summary lists: A credential in PIXELARTICONS_LICENSE_KEY.
Does Frontend Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend Design use?
Frontend Design is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Design use?
About 1.8k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend Design?
Skills that share tags, products or a category with Frontend Design: Design Style (Castor6/tactus, 376 stars), Superdesign (superdesigndev/superdesign-skill, 630 stars), UI Design Brain (carmahhawwari/ui-design-brain, 893 stars) and Frontend Design Router (code-yeongyu/oh-my-openagent, 70k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Design?
overmind-core (a GitHub organization) maintains it in overmind-core/overmind, which has 597 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 8, 2026.
Source: overmind-core/overmind on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.