MCPInstall

user-context

Load or manage Product Design's saved user context. Use when the user asks to set up Product Design, get started, onboard, save product or design sources, see what Product Design remembers, update saved context, or remember Product Design preferences. Examples include product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, and general product/design notes.

Installs
59
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/openai/role-specific-plugins --skill user-context
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads user-context automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

User Context

User Context stores the product and design references a designer uses often, so future Product Design work starts from the right sources.

Use this skill when the user asks to:

  • set up Product Design
  • get started with Product Design
  • onboard with Product Design
  • save product or design sources
  • see what Product Design remembers
  • update saved product or design context
  • remember a Product Design preference
  • setup my plugin

Critical Overrides

  • Refer to the Plugin router $index before proceeding.
  • Follow $critical-overrides.
  • Before offering onboarding or saving context for future conversations, confirm that local shell access is available, $CODEX_HOME can be resolved, and $CODEX_HOME/state/plugins/product-design/ exists and is writable or can be created in a writable parent directory. If user-context.md already exists, confirm that it is writable too.
  • If any check cannot be completed or fails, persistent context is unavailable. Do not offer saved-context onboarding or claim that new context was saved for future conversations. If the user asks to save something, explain that it can be used in the current conversation but not saved for future conversations.

Saved User Context

If user-context.md exists, use it by default.

Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets to ground Product Design work.

Ideation, prototypes, audits, clones, and critiques should match the saved product context unless the user asks for something different.

When a workflow needs visual grounding, attach or include relevant saved screenshots, reference images, tokens, design language, and component references in ImageGen, ideation, prototype, audit, and critique work.

State File

Saved context lives here:

$CODEX_HOME/state/plugins/product-design/user-context.md

Saved screenshots and reference images live next to it:

$CODEX_HOME/state/plugins/product-design/assets/

If the file does not exist, continue normally unless the user asks to set up Product Design, save context, or the current task is blocked by missing product/design context.

Preflight

When any Product Design workflow needs saved context, run:

python3 scripts/user_context_preflight.py

Use the returned saved entries as the starting context for the task.

If the script reports that no saved context exists, continue from the current user prompt unless setup context is required.

Do not browse, open, or inspect every saved reference during preflight. Inspect only the saved references needed for the current task.

Setup

Use references/onboarding.md when the user asks to set up Product Design, asks what Product Design can remember, asks what Product Design knows about their product, or provides product/design references to save.

For setup-only requests, explain what Product Design can remember and ask for useful sources.

Adjust the context-gathering request to match the user's request. First-time setup differs from updating existing context.

Do not inspect the workspace, install dependencies, scaffold a prototype, generate images, run audits, or start implementation during setup.

After the user provides references to save, run:

python3 scripts/init_user_context.py

Then add the references to the created user-context.md.

Save

Save useful, durable Product Design context:

  • Product URLs
  • Figma files
  • Screenshots and reference images
  • Codebase paths
  • Storybook and component docs
  • Design tokens and theme sources
  • Brand, logo, icon, illustration, image, and asset sources
  • Preferred browser, capture tools, and share targets
  • Team conventions that make future Product Design work more accurate

When the user provides screenshots or reference images to save, copy them into assets/ next to user-context.md and link them from the saved entry.

Give each saved image a clear, descriptive filename that says what the image shows. Use names future Product Design runs can understand without opening the file.

Good image names:

assets/chatgpt-settings-modal-dark-mode.png
assets/payment-sheet-mobile-error-state.png
assets/product-dashboard-sidebar-navigation.png
assets/storybook-primary-button-states.png
assets/brand-logo-lockup-purple-gradient.png
assets/onboarding-flow-welcome-step.png
assets/checkout-confirmation-screen.png
assets/account-menu-open-state.png

Do not save secrets, credentials, API keys, private tokens, copied customer data, or anything that should not persist.

Use this structure:

# {Category}

- Description: {what this category is and when future Product Design runs should use it}

## Saved Links And Context

{Saved reference or fact}
- Date Added: YYYY-MM-DD.
- File: assets/{clear-descriptive-name}.png
- Useful Context: {what this reference represents}
- Future Use: {how future Product Design work should use it}

Include File: only when the saved entry has a local image file.

When a category has no saved references yet, use exactly:

status: not provided

Keep saved context curated. Prefer a few high-value references over a dump of every possible URL or file.

Read

  • Do not treat status: not provided as a fact.
  • Read through scripts/user_context_preflight.py when local shell access is available.
  • Use saved context as default grounding, then inspect only what the current task needs.

FAQ

What does the user-context skill do?

Load or manage Product Design's saved user context. Use when the user asks to set up Product Design, get started, onboard, save product or design sources, see what Product Design remembers, update saved context, or remember Product Design preferences. Examples include product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, and general product/design notes.

How do I install user-context?

Run npx skills add https://github.com/openai/role-specific-plugins --skill user-context in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/user-context/ (personal) or .claude/skills/user-context/ (project).

Which AI agents can use user-context?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is user-context safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains user-context?

It is published by openai in openai/role-specific-plugins. It has 59 recorded installs.

More from openai/role-specific-plugins

View all →

image-to-code

openai/role-specific-plugins

Implement a selected image, screenshot, mockup, or Image Gen reference as a faithful, responsive frontend.

Media & Creative184 installs

analyze-data-quality

openai/role-specific-plugins

Open the skill to read its SKILL.md instructions.

AI & Agents106 installs

visualize-data

openai/role-specific-plugins

Design, build, revise, or QA quantitative charts and figures. Use when an analytical answer needs visual judgment, whether for an inline answer, report, dashboard, notebook, or artifact.

Data & Databases100 installs

validate-data

openai/role-specific-plugins

Validate whether an analysis is accurate, well-supported, and ready to share or use for a decision. Use when reviewing methodology, calculations, comparisons, visuals, caveats, or conclusions.

AI & Agents98 installs

build-dashboard

openai/role-specific-plugins

Open the skill to read its SKILL.md instructions.

Data & Databases91 installs

product-business-analysis

openai/role-specific-plugins

Open the skill to read its SKILL.md instructions.

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs