client-context-design

Loads client design system context from a local library repo for design sprints.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/scoots31/engineering-playbook --skill client-context-design-scoots31
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: client-context-design
Source: https://github.com/scoots31/engineering-playbook/tree/main/skills/client-context-design
Command: npx skills add https://github.com/scoots31/engineering-playbook --skill client-context-design-scoots31

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When building UI for a client, AI assistants lack knowledge of the client's design system — tokens, components, patterns, and regional rules — leading to off-brand output. This Skill loads that context from a local context.md file so every design decision stays within the client's conventions. ## Core Features & Use Cases - Context Loading: Reads a client context.md file containing design tokens, component inventory, screen patterns, regional variance rules, and a quick-build reference. - Two Design Paths: Supports working from an existing Figma file (via Figma MCP, using context as the interpretive layer) or building new designs from scratch within the client's design system constraints. - Automatic or Manual Activation: Fires automatically at design sprint start when a project declares a client_context path, or invoked manually for quick builds. - Use Case: A solo builder starts a design sprint for a client project. The Skill loads the client's brand tokens and component library, confirms the target market's regional rules, and ensures every UI decision traces back to the documented design system. ## Quick Start Say "load client context" or invoke /client-context-design to load the client's design system before starting a design sprint.

Frequently Asked Questions about client-context-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load a client design system before starting a design sprint?

Declare a client_context path pointing to the client's context.md file in your project configuration, and the Skill loads it automatically at design sprint start. You can also invoke it manually by saying "load client context" for quick builds.

How to use client brand context with a Figma file?

Provide the Figma file link after the context loads. The Skill pulls the file via Figma MCP and cross-references components and tokens against the loaded context, flagging differences or unknown patterns before the design sprint begins.

Can I use this without an existing Figma design?

Yes. With no Figma file, the Skill uses the context's quick-build reference as the complete design system constraint. You confirm the target market, regional variance rules load, and new designs are built from scratch within client conventions.

What format does the client context file need?

The context file is a context.md document containing design tokens (colors, typography, spacing, elevation), a component inventory, screen and layout patterns, regional variance rules, and a quick-build reference section.

What are the limitations of loading client design context?

It does not replace Figma MCP, which still retrieves the actual design file, and it does not generate designs itself — the design sprint skill does that work. It only supplies the interpretive context layer for on-brand decisions.