Creative Coder

What it does

The Creative Coder skill enables AI agents to generate code snippets for visual expressions and timing-based UI behaviors, such as animations, interactions, motion design, transitions, scroll effects, and micro-UX elements. It focuses on creating immersive experiences by considering state transitions and timing rather than just visuals. The skill emphasizes a design philosophy centered around performance, accessibility, and user understanding.

When to use it

• Generating code for animation or interactive UI elements (e.g., button hover effects, scroll animations).
• Creating micro-UX interactions that enhance the user experience through subtle visual cues.
• Developing immersive experiences involving motion design and transitions.
• Implementing timing-based behaviors like scroll effects or route changes.
• When you need to ensure accessibility considerations (like reduced motion support) are built into your code from the start.

Key capabilities

• Generates code snippets for various visual expressions and UI behaviors.
• Considers state transitions and timing in design.
• Prioritizes performance optimization (GPU load, INP/LCP).
• Incorporates accessibility considerations, including support for prefers-reduced-motion.
• Emphasizes a minimal implementation approach with iterative enhancements.

Example prompts

• "Generate code for a button hover animation that smoothly changes color and size."
• "Create a scroll effect where elements fade in as the user scrolls down the page, ensuring reduced motion support is included."
• "Write code to implement a route change transition with a subtle slide-in effect."

Tips & gotchas

• Always clearly articulate the purpose of any animation – it shouldn't just be for aesthetics.
• Prioritize performance and accessibility from the outset, especially considering users who have enabled reduced motion settings.
• Start with minimal implementations and gradually enhance them based on user feedback and testing.