technical-tools

name

technical-tools

description

Technical and tool skills for product designers covering design tools, front-end knowledge, design-dev collaboration, and emerging technologies. Use when working with Figma, Sketch, Adobe XD, Framer, ProtoPie, or After Effects. Also for front-end topics (HTML/CSS, flexbox, grid, CSS animations, JavaScript, React/Vue/Angular, design-to-code handoff, DevTools), design-dev collaboration (Git, Figma API, design tokens, Storybook, component libraries, design QA), or emerging tech (AR/VR, voice interfaces, AI/ML features, gesture control). Triggers on: Figma, Sketch, Adobe XD, Framer, ProtoPie, After Effects, design tool, HTML, CSS, flexbox, grid, responsive, CSS animation, JavaScript, React, Vue, Angular, design handoff, DevTools, Git, Figma API, Storybook, component library, design QA, AR design, VR design, voice interface, AI feature design, gesture control.

Technical & Tool Skills

Technical fluency for designers — from mastering the primary toolchain to understanding the code and emerging platforms that shape what's possible.

Method Selection Guide

Question	Reference
How do I work effectively in Figma?	.claude/skills/technical-tools/design-tools.md → Figma
How do I use Sketch?	.claude/skills/technical-tools/design-tools.md → Sketch
How do I use Adobe XD?	.claude/skills/technical-tools/design-tools.md → Adobe XD
How do I prototype in Framer?	.claude/skills/technical-tools/design-tools.md → Framer
How do I build advanced interactions in ProtoPie?	.claude/skills/technical-tools/design-tools.md → ProtoPie
How do I animate in Principle?	.claude/skills/technical-tools/design-tools.md → Principle
How do I create motion in After Effects?	.claude/skills/technical-tools/design-tools.md → After Effects
How do I use Illustrator for design work?	.claude/skills/technical-tools/design-tools.md → Illustrator
How do I use Photoshop in a design workflow?	.claude/skills/technical-tools/design-tools.md → Photoshop
How does HTML/CSS structure relate to design?	.claude/skills/technical-tools/frontend-knowledge.md → HTML/CSS Fundamentals
How does responsive CSS work?	.claude/skills/technical-tools/frontend-knowledge.md → Responsive CSS
How do CSS animations and transitions work?	.claude/skills/technical-tools/frontend-knowledge.md → CSS Animations
What JavaScript concepts do designers need?	.claude/skills/technical-tools/frontend-knowledge.md → JavaScript Basics
How do component-based frameworks affect design?	.claude/skills/technical-tools/frontend-knowledge.md → React/Vue/Angular
How do I prepare designs for developer handoff?	.claude/skills/technical-tools/frontend-knowledge.md → Design-to-Code Handoff
How do I inspect designs in the browser?	.claude/skills/technical-tools/frontend-knowledge.md → Browser DevTools
How do I use Git as a designer?	.claude/skills/technical-tools/design-dev-collaboration.md → Version Control
How do I automate design tokens?	.claude/skills/technical-tools/design-dev-collaboration.md → Design APIs
How do I integrate with component libraries?	.claude/skills/technical-tools/design-dev-collaboration.md → Component Libraries
How do I QA an implemented design?	.claude/skills/technical-tools/design-dev-collaboration.md → Design QA
How do I design within technical constraints?	.claude/skills/technical-tools/design-dev-collaboration.md → Technical Constraints
How do I design for AR/VR?	.claude/skills/technical-tools/emerging-tech.md → AR/VR Design
How do I design voice interfaces?	.claude/skills/technical-tools/emerging-tech.md → Voice Interface Design
How do I design AI/ML features?	.claude/skills/technical-tools/emerging-tech.md → AI/ML Integration
How do I design for gesture/touch-less control?	.claude/skills/technical-tools/emerging-tech.md → Gesture Control

Domain Sequencing

Design Tools (master the toolchain)
  └── Figma (primary) → Framer / ProtoPie (prototyping)
      → After Effects / Principle (motion)
      → Illustrator / Photoshop (assets)
      → Sketch / Adobe XD (alternative tools)

Front-End Knowledge (understand the medium)
  └── HTML/CSS Fundamentals → Responsive CSS → CSS Animations
      → JavaScript Basics → React/Vue/Angular Awareness
      → Design-to-Code Handoff → Browser DevTools

Design-Dev Collaboration (bridge the gap)
  └── Version Control → Design APIs → Component Libraries
      → Design QA → Technical Constraints

Emerging Technologies (design for what's next)
  └── AR/VR Design → Voice Interface → AI/ML Integration
      → Gesture Control

Reference Files

• Design tools — Read .claude/skills/technical-tools/design-tools.md for: Figma, Sketch, Adobe XD, Framer, ProtoPie, Principle, After Effects, Illustrator, Photoshop
• Front-end knowledge — Read .claude/skills/technical-tools/frontend-knowledge.md for: HTML/CSS, responsive CSS, CSS animations, JavaScript, React/Vue/Angular, handoff, DevTools
• Design-dev collaboration — Read .claude/skills/technical-tools/design-dev-collaboration.md for: Git, design APIs, component libraries, design QA, technical constraints
• Emerging technologies — Read .claude/skills/technical-tools/emerging-tech.md for: AR/VR, voice interface, AI/ML, gesture control