Agent skill

ui-token-first

Enforce UI token usage for Espresso Engineered frontend work. Use when editing Svelte/SvelteKit UI, styling typography, voice lines, headers, cards, surfaces, or layout so styles come from frontend/src/lib/ui tokens instead of app.css or ad-hoc CSS.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/nickabeelee/espresso-engineered/tree/main/skills/ui-token-first

SKILL.md

UI Token First

Overview

Apply UI framework tokens (typography, color, surfaces) for all UI styling in this repo. Avoid new CSS in frontend/src/app.css or local hardcoded styles unless no token exists.

Workflow

  1. Identify the UI elements being changed (headers, voice lines, cards, surfaces, etc.).
  2. Pull tokens from frontend/src/lib/ui and apply them with toStyleString.
  3. Remove or avoid ad-hoc font/color rules that bypass the tokens.
  4. Confirm voice text rules in docs/ee-ui-execution-standard.md.

Token Sources

  • Typography: frontend/src/lib/ui/foundations/typography.ts (textStyles, fontFamilies)
  • Colors: frontend/src/lib/ui/foundations/color.ts (colorCss)
  • Surfaces: frontend/src/lib/ui/components/card.ts (pageSurface, recordListShell, secondarySurface)
  • CSS utilities: frontend/src/lib/ui/style.ts (toStyleString, toCssVars)

Patterns to Use

  • Voice lines: use .voice-line or .voice-text + textStyles.voice and colorCss.text.ink.muted via toStyleString. Never add new font-family CSS for voice text.
  • Headers: use textStyles.headingPrimary|Secondary|Tertiary + colorCss.text.ink.*.
  • Subtext/helper: use textStyles.helper + muted ink.
  • Surfaces: wrap sections with recordListShell/pageSurface tokens and wire CSS vars rather than hardcoded backgrounds/borders.

Quick Checks

  • Search for font-family, color: #, or new app.css rules; replace with UI tokens.
  • If you add a new text element, it should map to a textStyles.* token.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

nickabeelee/espresso-engineered

ios-input-hints

Ensure iOS/iPadOS-friendly form inputs (keyboard type, inputmode, autocomplete, autocapitalize/autocorrect, enterkeyhint) when editing or reviewing UI forms in web apps. Use when adding or modifying form fields (Svelte/HTML/TSX/etc.), auditing form UX, or fixing mobile Safari keyboard issues.

1 0
Explore
nickabeelee/espresso-engineered

backend-build-check

Ensure backend build readiness for Espresso Engineered. Use when backend code/config changes are made or when a feature/task is wrapping up to suggest running `npm run build:backend` (and tests only if requested).

1 0
Explore
nickabeelee/espresso-engineered

design-system-token-enforcer

Enforce design system token usage in espresso-engineered-1 frontend UI work. Use when creating or editing Svelte components, layout sections, typography, spacing, colors, surfaces, or buttons, especially when introducing new UI components or section headers.

1 0
Explore
mattpocock/skills

setup-pre-commit

Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.

111,310 9,758
Explore
mattpocock/skills

handoff

Compact the current conversation into a handoff document for another agent to pick up.

111,310 9,758
Explore
mattpocock/skills

edit-article

Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.

111,310 9,758
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results