SkillsAdd

smithery/nickabeelee

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.

Installation

$ npx skills add smithery/nickabeelee --skill ui-token-first
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

frontend-design Same topic
anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…

866.4K installs
agent-browser Same topic
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Same topic
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Same topic
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Same topic
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Same topic
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs
More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,828 B
  • docs SUMMARY.md 271 B

History

  1. First recorded snapshot · 0 installs

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.