A CSS gradient designer: build linear, radial, and conic gradients with add/remove/drag color stops, angle and shape controls, a few tasteful presets (sunset, ocean, aurora), and a copyable background CSS value, previewed on a large swatch and a sample button. claude-code-tmux · by dev:local · 1 step colorcssdesign
A glassmorphism card designer: controls for backdrop blur, background transparency, border glow, saturation and corner radius, previewed as a frosted card floating over a colorful generated gradient background, with copyable CSS including the backdrop-filter. claude-code-tmux · by dev:local · 1 step colorcssdesign
A CSS filter playground: stack brightness, contrast, saturate, hue-rotate, blur, grayscale and sepia with sliders on a procedurally drawn sample image on a canvas, show the live result and a copyable filter string. claude-code-tmux · by dev:local · 1 step graphicscssinteractive
A neumorphism (soft UI) generator: pick a background color, then adjust distance, intensity, blur and shape (flat, concave, convex), preview soft-shadow buttons and cards on the matching surface, and copy the resulting box-shadow CSS. claude-code-tmux · by dev:local · 1 step colorcsstoolsinteractive
A button state designer: style a button's default, hover, active, focus and disabled states with color, radius, padding and transition controls, interact with a live real button to feel the transitions, and copy the full CSS with pseudo-class rules. claude-code-tmux · by dev:local · 1 step colorcssdesign
A loading indicator designer: choose spinner, pulsing dots, progress bars, or a shimmering skeleton, control speed, color and size, preview it animating live, and copy the self-contained HTML and CSS. claude-code-tmux · by dev:local · 1 step colorcssdesign
A custom scrollbar and focus-ring designer: control scrollbar width, track and thumb color and radius, and focus outline style and offset, previewed on a scrollable content panel and a set of form fields, with copyable CSS. claude-code-tmux · by dev:local · 1 step colorcssdesign
A text effect designer for headlines: apply a gradient fill, outline stroke, and layered drop shadows to large display text with per-effect controls, live preview on an editable headline, and copyable CSS. claude-code-tmux · by dev:local · 1 step textcolorcssdesign
A CSS animation keyframe composer: sequence transform and opacity changes across several keyframe stops on a timeline, scrub and play the animation on a preview element, adjust duration and iteration, and copy the resulting @keyframes and animation CSS. claude-code-tmux · by dev:local · 1 step cssinteractive
An aspect-ratio and object-fit playground: a grid of media boxes with controls for aspect ratio, object-fit (contain, cover, fill, none) and object-position, previewed on procedurally drawn placeholder images on canvas, with copyable CSS. claude-code-tmux · by dev:local · 1 step graphicscssinteractive
A layered paper-shadow elevation designer: pick a Material-like elevation level and fine-tune ambient and directional shadow layers, preview cards at each elevation on a light and dark surface, and copy the multi-layer box-shadow CSS. claude-code-tmux · by dev:local · 1 step cssdesign
A CSS refactor diff review: a diff replacing magic numbers with custom properties and consolidating duplicated rules, with line comments, a checklist for visual-regression risk, and an approve or request-changes verdict. claude-code-tmux · by dev:local · 1 step css
A browser rendering pipeline map: HTML to DOM, CSS to CSSOM, render tree, layout, paint and composite as stages; click each for what it does, and trigger a sample style change to see which stages re-run for a reflow versus a repaint. claude-code-tmux · by dev:local · 1 step graphicscssmap