dylantarre
@dylantarre
Public Skills
data-visualization
by dylantarre
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
product-manager
by dylantarre
Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
page-transitions
by dylantarre
Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.
micro-interactions
by dylantarre
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
filmmaker
by dylantarre
Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.
video-motion-graphics
by dylantarre
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
Animation Principles - Quick Start
by dylantarre
Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes
educator-teacher
by dylantarre
Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.
motion-designer
by dylantarre
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
brand-marketing
by dylantarre
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
game-development
by dylantarre
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
mobile-touch
by dylantarre
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
character-appeal
by dylantarre
Use when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must have personality and presence.
Animation Principles - Advanced
by dylantarre
Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations
Animation Principles - Absolute Beginner
by dylantarre
Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation
accessibility-advocate
by dylantarre
Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.
animator-traditional
by dylantarre
Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.
universal-mindset
by dylantarre
Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking styles quite fit the situation.
web-motion-design
by dylantarre
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Animation Principles - Refresher
by dylantarre
Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations
Animation Principles - Expert
by dylantarre
Use when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries
Animation Principles - Intermediate
by dylantarre
Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations
problem-diagnosis
by dylantarre
Use when animation "feels wrong" but you can't pinpoint why—debugging floaty movement, stiff characters, unclear action, or any motion that isn't working and needs systematic troubleshooting.
Animation Principles - Novice
by dylantarre
Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
naturalistic-motion
by dylantarre
Use when animation should feel organic and lifelike—creature animation, realistic characters, nature elements, or any motion that needs to breathe with authentic living quality.
presentations
by dylantarre
Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.
attention-direction
by dylantarre
Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.
timing-mastery
by dylantarre
Use when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement matters.
frontend-developer
by dylantarre
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
Animation Principles - Teaching Others
by dylantarre
Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels
exaggerated-clarity
by dylantarre
Use when motion needs to read clearly and powerfully—broad comedy, action highlights, important story beats, or any moment that must unmistakably communicate to the audience.
Animation Principles - Troubleshooting
by dylantarre
Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
brand-strategist
by dylantarre
Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.
Animation Principles - Master
by dylantarre
Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level
Animation Principles - Universal Reference
by dylantarre
Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level
universal-practitioner
by dylantarre
Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.
spatial-thinking
by dylantarre
Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
rhythm-pacing
by dylantarre
Use when animation needs musical flow—dance sequences, action choreography, comedic timing, scene pacing, or any motion that should feel rhythmic and well-composed over time.
game-designer
by dylantarre
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
Animation Principles - Deep Dive
by dylantarre
Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context
accessible-motion
by dylantarre
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
attention-grabbers
by dylantarre
Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.
continuous-loops
by dylantarre
Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.
creative-director
by dylantarre
Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.
ux-researcher
by dylantarre
Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.
universal-fallback
by dylantarre
Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.
physics-intuition
by dylantarre
Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.
anticipation-payoff
by dylantarre
Use when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.
3d-spatial
by dylantarre
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
compound-components
by dylantarre
Builds accessible composable components using Radix/Headless UI patterns. Use when creating Select, Dialog, Tabs, Accordion, Menu, or Dropdown components with proper ARIA, keyboard navigation, and focus management.
dark-mode
by dylantarre
Implements theme switching with semantic tokens and prefers-color-scheme detection. Use when adding dark mode, light/dark themes, color scheme toggles, or converting hardcoded colors to theme-aware tokens.
style-dictionary
by dylantarre
Transforms design tokens into platform-specific formats (CSS, SCSS, iOS Swift, Android XML). Use when setting up multi-platform token pipelines, creating build processes, or managing cross-platform design systems.
design-tokens-structure
by dylantarre
Architects token systems with primitive, semantic, and component layers. Use when structuring tokens from scratch, adding multi-theme support, setting up token aliasing, or organizing token hierarchies.
aria-patterns
by dylantarre
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.
storybook
by dylantarre
Documents components with Storybook using CSF 3.0, controls, and MDX. Use when creating component catalogs, interactive examples, visual testing setups, or design system documentation sites.
motion-scale
by dylantarre
Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating transition timing, animation speed, or motion systems. Outputs CSS, Tailwind, or JSON.
radius-scale
by dylantarre
Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, card corners, or input styling. Outputs CSS, Tailwind, or JSON.
color-contrast
by dylantarre
Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility compliance, fixing contrast issues, or selecting text/background combinations for AA or AAA levels.
responsive-typography
by dylantarre
Implements fluid typography using CSS clamp() that scales with viewport. Use when creating responsive font sizes, viewport-aware headings, or type that adapts smoothly without breakpoints.
icon-system
by dylantarre
Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.
shadow-scale
by dylantarre
Generates layered box-shadow elevation tokens for depth hierarchy. Use when creating elevation systems, card shadows, modal depth, or dark mode shadow variants. Outputs CSS, Tailwind, or JSON.
layout-primitives
by dylantarre
Builds composable layout components (Stack, Cluster, Grid, Sidebar, Center, Cover). Use when creating layout systems, spacing compositions, or Every Layout-style intrinsic design patterns that adapt without breakpoints.
focus-states
by dylantarre
Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
spacing-scale
by dylantarre
Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing. Outputs CSS custom properties, Tailwind config, or JSON tokens.
type-scale
by dylantarre
Generates typography scales using modular ratios with auto-calculated line heights. Use when setting up font-size tokens, heading hierarchy (h1-h6), or text sizing systems. Outputs CSS, Tailwind, or JSON.
component-docs
by dylantarre
Generates component API documentation with props tables, usage examples, and guidelines. Use when documenting component libraries, creating API references, or building component documentation for designers and developers.
z-index-scale
by dylantarre
Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index conflicts. Outputs CSS, Tailwind, or JSON.
angular
by dylantarre
Builds token-driven Angular components with signals and standalone components. Use when creating Angular component libraries, integrating design tokens, or building design system components with new control flow syntax.
figma
by dylantarre
Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.
token-docs
by dylantarre
Generates design token documentation with visual swatches and code examples. Use when documenting token values, creating token reference guides, or building searchable design system documentation.
framer
by dylantarre
Integrates design tokens with Framer for prototyping and production sites. Use when adding CSS custom properties to Framer projects, creating code components, or building Framer sites with design systems.
react
by dylantarre
Builds token-driven React components with TypeScript and modern patterns. Use when creating React component libraries, integrating CSS custom properties, or building Next.js design system components with forwardRef and composition.
breakpoints
by dylantarre
Generates responsive breakpoint tokens for media queries and container queries. Use when setting up responsive design, mobile-first layouts, or viewport-based styling. Outputs CSS, Tailwind, or JSON.
color-scale
by dylantarre
Generates perceptually uniform OKLCH color palettes from brand colors. Use when creating color systems, theme palettes, or converting hex values to 11-step scales. Outputs CSS custom properties, Tailwind config, or JSON tokens.
getting-started
by dylantarre
Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.
svelte
by dylantarre
Builds token-driven Svelte 5 components with runes ($state, $props) and TypeScript. Use when creating Svelte component libraries, integrating design tokens, or building SvelteKit design system components.
vue
by dylantarre
Builds token-driven Vue 3 components with Composition API and TypeScript. Use when creating Vue component libraries, integrating design tokens, or building Nuxt design system components with composables.
animation-principles
by dylantarre
Applies Disney's 12 animation principles to UI motion design. Use when improving animation quality, designing micro-interactions, creating easing curves, or making transitions feel natural and purposeful.