skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

design-tools

Indexes Cortex design tools and maps visual tasks to the right tool skill.

2|Updated Apr 15, 2026
Search Tags:#react#design workflow#tool discovery#shaders#design tools#motion#ui polish
One-click install
npx skills add https://github.com/tommylower/cortex --skill design-tools-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tools
Source: https://github.com/tommylower/cortex/tree/main/design/tools/design-tools
Command: npx skills add https://github.com/tommylower/cortex --skill design-tools-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When working on UI and visual design, it is hard to know which design tool fits a given task. This Skill answers tool-discovery questions by inventorying every Cortex design tool and routing you to the correct one before you install or apply anything. ## Core Features & Use Cases - Tool Inventory: Catalogs tools across canvas work, visual effects, motion, live tuning, and layout verification, including Paper, Figma MCP, Shader Lab, Funky Shadow, DialKit, Leva, Rams, and Pretext. - Quick-Choice Table: Maps common needs (shader hero, textured shadows, responsive fixes, ship-check audits) directly to the right tool skill. - Use Case: You want to add a dithered gradient shadow behind a card. Ask what tool handles textured shadows, get routed to funky-shadow, then load that skill to apply it. ## Quick Start Ask which design tool to use for tuning animation values live in a React app.

Frequently Asked Questions about design-tools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What design tools are available in Cortex?▼

Cortex includes tools for canvas work (Paper, Figma MCP, Wiretext), visual effects (Shader Lab, Funky Shadow, Gradients), motion (Framer Motion, View Transitions), live tuning (DialKit, Leva, Interface Kit), and verification (Responsive Craft, Pretext, Preflight).

How do I choose between DialKit and Leva for React controls?▼

DialKit is the default for motion and visual tuning of animation, spacing, color, blur, and shadow values. Leva is a general-purpose typed parameter GUI; use it when a project needs a broad control panel rather than design-focused tuning.

Which tool should I use for a shader hero background?▼

Use Shader Lab for WebGPU shader compositions including hero visuals, warped text, image layers, liquid backgrounds, and post-processing. Load the shader-lab skill before applying it.

Can I use these design tools in production builds?▼

Dev-only overlays like DialKit, Leva, Interface Kit, and Agentation must be installed as dev dependencies and mounted behind a development gate. Other tools are opt-in unless their specific skill states otherwise.

What tool collects visual design feedback in the browser?▼

Agentation provides a dev-only visual annotation toolbar for design feedback, and Agentation Self-Driving adds an autonomous browser annotation workflow. Rams offers an optional external design review via local skill, MCP, or GitHub App.

Related Skills

Explore More Design & Creative Skills→
involvexinvolvex
2

web-design-reviewer

Detect and fix visual and layout issues in web applications.

Community
Advanced
microclawmicroclaw
730

find-skills

Search external skill registries and evaluate compatibility for MicroClaw.

Official
Intermediate
nattergabrielnattergabriel
2

polish

Fix alignment, spacing, typography, copy, and accessibility issues in frontend interfaces before shipping.

Community
Advanced
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced