hermes-agent/skills/creative/design-md/templates/starter.md at 366351b94deabd1a6c13e5d5e1dc967ccebc02ca

feat(skills): add design-md skill for Google's DESIGN.md spec (#14876 )

* feat(config): make tool output truncation limits configurable

Port from anomalyco/opencode#23770: expose a new `tool_output` config
section so users can tune the hardcoded truncation caps that apply to
terminal output and read_file pagination.

Three knobs under `tool_output`:
- max_bytes (default 50_000) — terminal stdout/stderr cap
- max_lines (default 2000) — read_file pagination cap
- max_line_length (default 2000) — per-line cap in line-numbered view

All three keep their existing hardcoded values as defaults, so behaviour
is unchanged when the section is absent. Power users on big-context
models can raise them; small-context local models can lower them.

Implementation:
- New `tools/tool_output_limits.py` reads the section with defensive
  fallback (missing/invalid values → defaults, never raises).
- `tools/terminal_tool.py` MAX_OUTPUT_CHARS now comes from
  get_max_bytes().
- `tools/file_operations.py` normalize_read_pagination() and
  _add_line_numbers() now pull the limits at call time.
- `hermes_cli/config.py` DEFAULT_CONFIG gains the `tool_output` section
  so `hermes setup` writes defaults into fresh configs.
- Docs page `user-guide/configuration.md` gains a "Tool Output
  Truncation Limits" section with large-context and small-context
  example configs.

Tests (18 new in tests/tools/test_tool_output_limits.py):
- Default resolution with missing / malformed / non-dict config.
- Full and partial user overrides.
- Coercion of bad values (None, negative, wrong type, str int).
- Shortcut accessors delegate correctly.
- DEFAULT_CONFIG exposes the section with the right defaults.
- Integration: normalize_read_pagination clamps to the configured
  max_lines.

* feat(skills): add design-md skill for Google's DESIGN.md spec

Built-in skill under skills/creative/ that teaches the agent to author,
lint, diff, and export DESIGN.md files — Google's open-source
(Apache-2.0) format for describing a visual identity to coding agents.

Covers:
- YAML front matter + markdown body anatomy
- Full token schema (colors, typography, rounded, spacing, components)
- Canonical section order + duplicate-heading rejection
- Component property whitelist + variants-as-siblings pattern
- CLI workflow via 'npx @google/design.md' (lint/diff/export/spec)
- Lint rule reference including WCAG contrast checks
- Common YAML pitfalls (quoted hex, negative dimensions, dotted refs)
- Starter template at templates/starter.md

Package verified live on npm (@google/design.md@0.1.1).

2026-04-23 21:51:19 -07:00

2.5 KiB

Raw Blame History

version

name

description

colors

typography

rounded

spacing

components

alpha

MyBrand

One-sentence description of the visual identity.

primary	secondary	tertiary	neutral	on-primary	on-tertiary
#0F172A	#64748B	#2563EB	#F8FAFC	#FFFFFF	#FFFFFF

body-md

label-caps

fontFamily	fontSize	fontWeight	lineHeight	letterSpacing
Inter	3rem	700	1.1	-0.02em

fontFamily	fontSize	fontWeight	lineHeight
Inter	2rem	600	1.2

fontFamily	fontSize	lineHeight
Inter	1rem	1.5

fontFamily	fontSize	fontWeight	letterSpacing
Inter	0.75rem	600	0.08em

sm	md	lg	full
4px	8px	16px	9999px

xs	sm	md	lg	xl
4px	8px	16px	24px	48px

button-primary

button-primary-hover

card

backgroundColor	textColor	rounded	padding
{colors.tertiary}	{colors.on-tertiary}	{rounded.sm}	12px

backgroundColor	textColor
{colors.primary}	{colors.on-primary}

backgroundColor	textColor	rounded	padding
{colors.neutral}	{colors.primary}	{rounded.md}	24px

Overview

Describe the voice and feel of the brand in one or two paragraphs. What mood does it evoke? What emotional response should a user have on first impression?

Colors

Primary ({colors.primary}): Core text, headlines, high-emphasis surfaces.
Secondary ({colors.secondary}): Supporting text, borders, metadata.
Tertiary ({colors.tertiary}): Interaction driver — buttons, links, selected states. Use sparingly to preserve its signal.
Neutral ({colors.neutral}): Page background and surface fills.

Typography

Inter for everything. Weight and size carry hierarchy, not font family. Tight letter-spacing on display sizes; default tracking on body.

Layout

Spacing scale is a 4px baseline. Use md (16px) for intra-component gaps, lg (24px) for inter-component gaps, xl (48px) for section breaks.

Shapes

Rounded corners are modest — sm on interactive elements, md on cards. full is reserved for avatars and pill badges.

Components

button-primary is the only high-emphasis action per screen.
card is the default surface for grouped content. No shadow by default.

Do's and Don'ts

Do use token references ({colors.primary}) instead of literal hex in component definitions.
Don't introduce colors outside the palette — extend the palette first.
Don't nest component variants. button-primary-hover is a sibling, not a child.

2.5 KiB Raw Blame History