My UX Skill System

I work across design, frontend engineering, and product — moving between Figma, React, and AI tools like Claude and Cursor. This is my personal skill system: 13 focused files that load expert-level guidance exactly when a task needs it, without dragging irrelevant context into every session.

Why modular

One large skill file means every task loads everything — relevant or not. Smaller focused files load only what the task actually needs. Each skill has a single responsibility, a precise trigger, and its own anti-patterns. Together they cover the full arc from early research and design decisions through to shipping production frontend code.

How to use this system

Skills activate on language. When you describe a task — in any natural phrasing — the matching skill loads. You don't need to name the skill or know it exists. The trigger descriptions below show the vocabulary each skill responds to, so you can see which skill will activate for any given task and deliberately invoke more than one when a task spans multiple domains.

The 13 skills

Core UX (9)

ux-foundations — Base layer. Always active for any design or UX task.

The shared mental models, heuristics, and decision frameworks that underpin every other skill. It applies silently — you won't see it, but it's governing every output.

Triggers on: any design request, UX question, UI task, product critique, design thinking, user-centered design, usability, product design principles.

design-systems — Building, extending, and governing component libraries and tokens.

Atomic Design methodology, three-tier token architecture, component contracts, variant logic, documentation standards. Also owns the system context file — the token reference you paste into any session generating UI.

Triggers on: design system, component library, UI kit, style guide, design tokens, atomic design, atoms / molecules / organisms, Storybook, create or audit a component, token architecture, variant logic, component naming.

ux-flows — How users move through a product.

User flows, information architecture, navigation models, and all the patterns that define screen-to-screen logic. Includes full state management for flows: loading, error, offline, empty, and permission-denied paths.

Triggers on: user flow, task flow, navigation design, onboarding flow, information architecture, sitemap, app structure, multi-step form, login / signup / checkout flow, empty state, error flow, "how does a user get from A to B."

visual-ui — What the interface looks and feels like.

Layout, color systems, typography, spacing, grid, iconography, cards, dark mode, responsive design. Enforces distinctive production-grade visual quality — never generic AI aesthetics.

Triggers on: layout, color system, typography, spacing, grid, visual hierarchy, card design, dashboard, responsive layout, dark mode, "design a screen", "create a UI", "make this look better / more polished / more professional", landing page, marketing page.

motion-design — How the interface moves and responds.

Animation principles, motion tokens, easing curves, per-component timing specs. Covers what to animate, what not to, and the performance constraints that make motion seamless rather than janky.

Triggers on: animation, transition, microinteraction, loading state, page transition, hover effect, scroll animation, gesture feedback, skeleton loader, toast animation, modal transition, timing, easing, "make it feel more alive / responsive / polished."

content-ux-writing — Every word that appears in the interface.

Button labels, error messages, empty state copy, form labels, confirmation dialogs, tooltips, loading messages, voice and tone. Applies the principle that copy is interaction design — not afterthought.

Triggers on: button label, error message, empty state copy, onboarding copy, placeholder text, tooltip, confirmation dialog, success / loading message, form label, helper text, CTA, notification copy, voice and tone, content audit, "write / improve / audit any text in a UI."

accessibility — Cross-cutting quality layer. Auto-applies to any UI output.

WCAG 2.1 AA compliance, semantic HTML, ARIA patterns, keyboard navigation, focus management, contrast ratios, touch targets, cognitive accessibility. Not a checklist — a baseline applied to every component from every other skill.

Triggers on: WCAG, a11y, screen reader, keyboard navigation, color contrast, focus management, ARIA, accessible forms, touch targets, cognitive accessibility, audit or fix accessibility. Also auto-activates whenever any UI component is being produced.

design-handoff — Technical artifacts that let engineers build without a sync call.

The Figma-facing side of handoff: token specs, behavior annotations, state documentation, responsive breakpoint specs, asset export, Dev Mode checklists, and acceptance criteria. Covers the full token pipeline from Figma Variables through to CSS custom properties and Tailwind config.

Triggers on: Figma annotations, design token specs, CSS value mappings, component state documentation, responsive breakpoint specs, asset export, Dev Mode, acceptance criteria, token pipeline, naming layers, "prepare a Figma file for a developer." For presenting decisions to humans, use design-communication instead.

prototyping — Figma craft and prototype strategy.

Fidelity decisions, Auto Layout, component and variant structure, file organisation, interaction anatomy, Smart Animate, prototype flows to always build, usability testing basics, and how to present prototypes to stakeholders.

Triggers on: prototyping, prototype fidelity, Figma techniques, interactive prototype, clickable mockup, Auto Layout, variants, file organisation, Framer, ProtoPie, "when to prototype vs. ship", "what fidelity level to use", validating a design before development.

Designer-Developer (4)

design-to-react — Translating Figma designs into production React components.

Component architecture by atomic level, props design, state patterns, Figma-to-Tailwind translation, accessibility in code, and a component requirements format to define what you need before building anything.

Triggers on: converting a design to code, building a UI component in React, Tailwind CSS implementation, component architecture, prop design, when to use state, reusable components, "how do I code this", "turn this into a component", "what's the React pattern for X", any task where a designer is writing frontend code themselves.

design-communication — Communicating design decisions to engineers and PMs.

Framing decisions as tradeoffs, writing specs and Jira/Linear tickets, presenting in design reviews, handling pushback from engineers and stakeholders, async communication formats (Slack updates, Loom scripts).

Triggers on: framing a design decision, writing a spec or PRD, writing dev tickets, presenting design work, explaining design rationale, stakeholder buy-in, handling pushback, running a design critique, Slack design update, Loom walkthrough script, "how do I explain this to engineering", "PM wants a rationale", "engineer is pushing back." For technical Figma annotation artifacts, use design-handoff instead.

technical-design — The CSS and implementation knowledge that makes designs buildable.

Box model, flexbox vs. grid, responsive in code, CSS custom properties as the token layer, positioning and z-index, typography in CSS, and a plain-language guide to what engineers mean when they say something is hard.

Triggers on: CSS fundamentals, how a layout works in code, flexbox vs. grid, responsive breakpoints, CSS custom properties, what's expensive to animate, tokens in CSS, "is this buildable", "how would this work in CSS", "why is the engineer saying this is hard", "what's the performance cost of X."

design-research-synthesis — Turning research and analytics into design decisions.

The full synthesis process: observations → patterns → insights → opportunities → recommendations. Includes affinity mapping, metrics that flag design problems, research presentation formats, personas vs. jobs-to-be-done, and prioritization frameworks.

Triggers on: user interviews, usability testing synthesis, turning research into requirements, presenting research findings, affinity mapping, analytics as design evidence, user personas, prioritisation, "users are confused by X", "research says Y but PM wants Z", "how do I turn these notes into a recommendation", "what should I fix first."

How the skills work together

Skills are designed to complement each other. The most common multi-skill workflows:

Designing a new component ux-foundations → design-systems → visual-ui → accessibility → design-handoff

Building it in code design-systems → design-to-react → technical-design

Shipping a feature end-to-end ux-flows → prototyping → content-ux-writing → design-handoff → design-communication

Getting alignment with the team design-research-synthesis → design-communication

Pushing back on a feasibility concern technical-design → design-communication

Auditing existing UI for quality ux-foundations → accessibility → content-ux-writing → visual-ui

What's inside every skill file

Each file is consistent so they're easy to scan and extend:

• Trigger description — the exact language and scenarios that activate it

• Core principles — the non-negotiables for that domain

• Practical rules and patterns — specific, actionable, with real examples

• Anti-patterns — what not to do and why