ux-foundations

ux-foundations is a skill for Claude Code from TimboGP/timbogp-marketplace. It costs 119 tokens per session (998 once invoked), scanned A, original, MIT.

A setup guide that establishes basic user-experience and design rules in a software project, adapting them to the project's programming tools.

In plain words
What is it for?
Use it to detect the project's framework and styling approach, then create a starting design system or UX standards for the codebase.
Why use it?
It gives a new or inconsistent project a starting point for making screens and interactions work in a consistent way.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the ux-design plugin — 9 skills, 5 commands, 1 agent shipped together

Good fit Use it to detect the project's framework and styling approach, then create a starting design system or UX standards for the codebase.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/timbogp/timbogp-marketplace/ux-foundations
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add TimboGP/timbogp-marketplace --skill ux-foundations
Clone the repo
git clone --depth 1 https://github.com/TimboGP/timbogp-marketplace

Made for: Claude Code.

Or install ux-design, the plugin that ships this one along with the rest of its 9 skills, 5 commands, 1 agent.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for ux-foundations

README.md
[![agentmods](https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/ux-foundations/github.svg)](https://agentmods.dev/skills/timbogp/timbogp-marketplace/ux-foundations)
Your own site
<a href="https://agentmods.dev/skills/timbogp/timbogp-marketplace/ux-foundations"><img src="https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/ux-foundations/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for ux-foundations

Your own site · 80×15
<a href="https://agentmods.dev/skills/timbogp/timbogp-marketplace/ux-foundations"><img src="https://agentmods.dev/badge/skills/timbogp/timbogp-marketplace/ux-foundations.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 119 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 998 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00119 $0.00998
Opus 5 $0.00060 $0.00499
Sonnet 5 $0.00024 $0.00200
Haiku 4.5 $0.00012 $0.00100

Measured 12d ago against content hash 0fdf224950e5, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

ux-foundations scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugin/ux-design/skills/ux-foundations/SKILL.md · 65 lines

How it starts

The opening of the file, as written. The whole thing — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.

UX Foundations

Establish a coherent UX baseline in a project, adapted to whatever stack is present. This skill is the entry point for bootstrapping and the owner of the stack-detection convention every other implement skill reuses.

When to use

  • Starting UX work in a new or existing repo with no established system.
  • The user asks to "bootstrap", "set up", "establish", or "scaffold" UX/design foundations.
  • Invoked by the /ux-bootstrap command.

For narrower work, defer to the specialized skills: design-tokens, accessible-components, interaction-feedback, ux-copy. For evaluation rather than setup, use ux-audit, accessibility-audit, or ux-metrics.

Workflow

Always run these in order. Do not generate code before detection.

1. Detect the stack

Read references/stack-detection.md and follow it. Determine, in this order:

  • Framework (React / Vue / Svelte / Angular / none)
  • Styling approach (Tailwind / CSS Modules / styled-components or Emotion / vanilla CSS)
  • Token output format that matches the above
  • TypeScript yes/no

If nothing is detected (no package.json, no source), fall back to framework-agnostic HTML + CSS custom properties. Tell the user what you detected before writing anything.

2. Confirm scope

State a short plan and confirm the target. By default the baseline includes all five layers below; let the user opt out of any. Never overwrite existing files without showing a diff and confirming.

3. Lay the baseline (five layers)

  1. Design tokens — delegate to the design-tokens skill. Produce a single source of truth (color with verified contrast, type scale, spacing scale, radius, shadow, motion durations/easings) in the format the stack expects.
  2. Accessible base primitives — delegate to accessible-components. Scaffold at minimum: an accessible Button, a labelled form Field, and a Dialog/Modal with focus management. Wire them to the tokens.
  3. A11y linting — set up automated guardrails appropriate to the stack (e.g. eslint-plugin-jsx-a11y for React, eslint-plugin-vuejs-accessibility for Vue, svelte-check/a11y warnings for Svelte). Add the config and a script entry; do not silence existing warnings.
  4. Lightweight metrics — delegate to ux-metrics to add a minimal Core Web Vitals reporter (the web-vitals snippet) wired to the console or the project's analytics, so regressions are observable.
  5. Interaction-feedback defaults — delegate to interaction-feedback to establish the empty/loading/error/success state pattern and an accessible toast/aria-live region the app can reuse.

Read the full file on GitHub · 65 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 65 lines · 119 tokens per session scan A 0fdf224950e5

Subscribe to this mod's changes

ux-foundations is a skill published in the GitHub repository TimboGP/timbogp-marketplace (3 stars, last pushed 2mo ago), licensed MIT. It adds 119 tokens to every session and 998 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

accessibility

Audits code for WCAG 2.2 AA compliance and provides design guidance for accessible components. Covers semantic HTML, ARIA, keyboard nav, contrast, focus management, and motion.

RealDougEubanks/ClaudeMarketplace · 41 tokens

abd-design

ABD Design agent: produces architecture diagrams, component breakdowns, data flow, and design decisions from the current plan.

RealDougEubanks/ClaudeMarketplace · 26 tokens

ux-design

Guided, section-by-section UX spec authoring for a screen, flow, or HUD. Reads game concept, player journey, and relevant GDDs to provide context-aware design guidance. Produces ux-spec.md (per screen/flow) or hud-design.md using the studio templates.

IdoCohen560/claude-unity-game-studio · 61 tokens

ux-review

Validates a UX spec, HUD design, or interaction pattern library for completeness, accessibility compliance, GDD alignment, and implementation readiness. Produces APPROVED / NEEDS REVISION / MAJOR REVISION NEEDED verdict with specific gaps.

IdoCohen560/claude-unity-game-studio · 51 tokens

art-bible

Guided, section-by-section Art Bible authoring. Creates the visual identity specification that gates all asset production. Run after /brainstorm is approved and before /map-systems or any GDD authoring begins.

IdoCohen560/claude-unity-game-studio · 47 tokens

unity-ui-patterns

Unity UI/UX pattern design-to-code translation. Screen flow architecture, View/ViewModel separation, HUD architecture, feedback & juice systems, dynamic list/grid views, transition & animation contracts. UI Toolkit only. DESIGN INTENT format: INTENT/WRONG/RIGHT/SCAFFOLD/DESIGN HOOK. Based on Unity 6.3 LTS.

IdoCohen560/claude-unity-game-studio · 78 tokens