hermes-agent/skills/creative/design-md/templates/starter.md
Teknium 983bbe2d40
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

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
h1 h2 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.