Joshua jshmllr

UI / Design / Animation Vocabulary Glossary

A practical set of terms for directing AI agents on interface work. Precise language improves results.

Animation & Motion

Fade in / Fade out: Element appears or disappears by changing opacity.
Slide in: Element enters by sliding in from off-screen (left, right, top, or bottom).
Scale in: Element grows from smaller to full size as it appears, often paired with a fade.
Pop in: Element appears with a slight overshoot, like it bounces into place.

Skill: data-visualization

version: 1 description: > Create and improve data visualizations that explain data — not just display it. Covers chart selection, color systems, accessibility, labeling, layout, and real-world design system references. Every chart must do a job: provide accurate and meaningful insights that are accessible and easy to understand.

name

design-exploration-swarm-figma

description

Orchestrate a multi-agent design exploration swarm that analyzes a codebase's UI, expands it into diverse design concepts, and renders structured exploration rounds into a Figma file using the project's connected design system library. Generates multiple UI directions (affordance, layout, interaction, copy) and refines top concepts for decision-making. Use when the user wants to explore how a product UI could evolve in Figma specifically — not just recreate it. Triggered by phrases like "explore design directions in Figma", "generate UI concepts in Figma", "design exploration swarm in Figma", "rethink this UI in Figma", or "show multiple design options in Figma". Prefer this over the Paper variant when the user names Figma, provides a figma.com URL, or wants to use an existing Figma component library.

Design Exploration Swarm — Figma

You are a design exploration swarm orchestrator.

Mission: Analyze a codebase's UI, then generate and render a

name

design-exploration-swarm-paper

description

Orchestrate a multi-agent design exploration swarm that analyzes a codebase's UI, expands it into diverse design concepts, and renders structured exploration rounds into a Paper.design file using HTML-first artboards. Generates multiple UI directions (affordance, layout, interaction, copy) and refines top concepts for decision-making. Use when the user wants to explore how a product UI could evolve in Paper specifically — not just recreate it. Triggered by phrases like "explore design directions in Paper", "generate UI concepts in Paper", "design exploration swarm in Paper", "rethink this UI in Paper", or "show multiple design options in Paper". Prefer this over the Figma variant when the user names Paper, when there is no existing component library to lean on, or when a lightweight HTML-based exploration is preferable to Figma's Plugin API workflow.

Design Exploration Swarm — Paper

You are a design exploration swarm orchestrator targeting Pape

name	design-swarm
description	Orchestrate a multi-agent swarm that analyzes a codebase for UI elements, then draws them in Paper.design using the Prowl design system. Use when the user wants to render codebase UI into a Paper canvas — tables, forms, dashboards, pages, or any visual element group. Triggered by phrases like "draw the UI in Paper", "render components in Paper", "design swarm", or "recreate the app in Paper".

Design Swarm — Codebase → Paper.design Orchestrator

You are a swarm orchestrator. Your mission: analyze a codebase to find a category of UI elements, then coordinate parallel agents to draw them in Paper.design matching the Prowl Storybook design system.

Arguments

# Gradient Border Technique for Tailwind CSS

A technique for creating refined gradient borders using box shadows instead of CSS borders. This approach allows borders to blend naturally with existing shadows for a modern, polished appearance.

## How It Works
Rather than using a `border`, layered box shadows with negative spread values create the border effect. This enables the border to merge cleanly with element shadows and produces a subtle gradient-like feel.

## Key Principles
1. **Box-sizing**: All elements use `border-box` (set globally).

description: AI Animation + Feedback UX. Standardize how our app visualizes agent thinking, progress, transitions, uncertainty, errors, and feedback loops. Ensure users remain in control, see what the AI is doing, and can steer, stop, or improve it. globs:

"app/**/*"
"src/**/*"
"packages/**/*"
"components/**/*"

	/* Hardcover book cover effect for card views in Obsidian Bases */

	.bases-view {
	--bases-cards-background: transparent;
	--bases-cards-cover-background: transparent;
	--bases-cards-shadow: none;
	--bases-cards-shadow-hover: none;
	}
	.bases-cards-group {
	gap: 24px;

	{
	"name": "My workflow 7",
	"nodes": [
	{
	"parameters": {
	"model": "anthropic/claude-3.7-sonnet",
	"options": {}
	},
	"type": "@n8n/n8n-nodes-langchain.lmChatOpenRouter",
	"typeVersion": 1,

	# Design Exploration Swarm — Paper (“Let it cook”)

	name: `design-exploration-swarm-paper`
	description: Orchestrate a multi-agent design exploration swarm that analyzes a codebase's UI, expands it into diverse design concepts, and renders structured exploration rounds into a Paper.design file using HTML-first artboards. NOW INCLUDES “Let it cook” — one prompt auto-generates 2–6 variants and iterates them automatically (Layout or Style mode). Further iterations produce progressively more creative and informed results. Supports optional vibe image / starting style. Use when the user wants to explore how a product UI could evolve in Paper — especially when they say “let it cook”, “iterate automatically”, “multiple variations”, “give it taste”, or similar. Triggered by phrases like "explore design directions in Paper", "generate UI concepts in Paper", "design exploration swarm in Paper", "rethink this UI in Paper", "show multiple design options in Paper", or any “let it cook” request. Prefer this ov