Skill UI

This skill provides comprehensive guidance on leveraging d3.js (Data-Driven Documents) to create sophisticated, interactive, and publication-quality data visualizations. It covers core concepts like data binding, implementing various chart types (network graphs, geo-maps, etc.), handling complex transitions, and ensuring responsiveness across modern JavaScript frameworks (React, Vue, Vanilla JS). Learn the standard workflow for scale definition, axis creation, and drawing custom visual elements with fine-grained control.

Guides building bespoke interactive data visualizations with d3.js across vanilla or framework-based JavaScript, covering custom layouts, transitions, and responsive sizing.

This guide provides comprehensive best practices for creating high-quality videos using Remotion within a React environment. It covers advanced techniques for dynamic content generation, including integrating 3D models (Three.js), managing diverse assets like audio, video, and fonts, implementing complex animations, data visualization, and generating precise captions. Use this skill when developing professional, robust video generation workflows in React.

This skill generates code to create complex, interactive 3D scenes and visualizations on the web using the Three.js library and WebGL. It covers the entire development lifecycle, including setting up the core components (Scene, Camera, Renderer), defining geometry, applying materials, adding lighting, and implementing animation loops. Ideal for web developers needing to display product mockups, scientific data visualizations, or immersive user experiences.

Offers MATLAB and GNU Octave guidance for matrix math, data import/export, visualizations, statistics, signal processing, differential equations, and general scripting—helpful when writing or translating MATLAB/Octave code and running scripts under either interpreter.

Master the creation and manipulation of 3D geometry within the Three.js framework. This guide covers built-in primitive shapes (Box, Sphere, Cylinder), advanced procedural geometries (Extrude, Tube, TorusKnot), and text visualization. Crucially, it details the use of BufferGeometry, allowing developers to store vertex, normal, UV, and color data in optimized typed arrays for high-performance rendering and custom mesh construction.

A comprehensive guide on embedding before-and-after screenshots directly into pull request descriptions. This skill helps reviewers visualize UI changes, layout adjustments, and data visualizations instantly, without needing to check out the branch. Includes best practices for image sizing, structured Markdown patterns, and specific API/upload guidance for Azure DevOps and GitHub.

This guide details the use of Deneb, a certified custom visual, to embed Vega and Vega-Lite declarative visualization specifications directly into Power BI reports (PBIR). It outlines the complete workflow, from data binding and spec authoring to injection and validation using the pbir CLI. It emphasizes best practices, such as preferring Vega-Lite and handling complex field name escaping for robust report mutation.

A comprehensive guide for designing and implementing professional, data-driven dashboards across web, iOS, and Flutter. It details core principles like modular grid layouts, establishing data hierarchy (KPIs, charts), and maintaining minimalist aesthetics. Includes specific code examples using CSS Grid, SwiftUI, and Flutter widgets to ensure optimal user experience and data clarity.

A comprehensive guide and workflow tool for converting high-fidelity visual designs from Stitch into production-grade, component-based dashboards. Targets the modern stack including React 18, Vite, TypeScript, and TanStack Query. It integrates design tokens from DESIGN.md for styling consistency, supports complex data visualization, and includes patterns for Web3 integration (ethers/viem) for reading on-chain data.

This skill provides guidance for creating sophisticated, interactive data visualizations using d3.js, including custom visual encodings, interactive explorations, network graphs, geographic visualizations, and animated transitions.

A comprehensive guide for designing and implementing professional, data-driven dashboards across web, iOS, and Flutter. It details core principles like modular grid layouts, establishing data hierarchy (KPIs, charts), and maintaining minimalist aesthetics. Includes specific code examples using CSS Grid, SwiftUI, and Flutter widgets to ensure optimal user experience and data clarity.