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: ring: 13 focused files that load when a task needs it. note: this list keeps growing
Why modular
One large skill file means every task loads everything, relevant or not. Smaller focused files load only what the task actually needs.
How to use this system
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 13 skills
Core UX
ux-foundations
Triggers on: any design request, UX question, UI task, product critique, design thinking, user-centered design, usability, product design principles.
design-systems
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
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
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
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
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
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
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
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
design-to-react
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
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
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
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
mark: 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
