Tutorials & How-Tos

Encode a type scale, font family, weights, line-height and letter-spacing as DESIGN.md tokens so your AI agent ships consistent, readable text every time.

Define semantic color tokens and pass WCAG contrast for an agent-ready palette. A step-by-step guide to building an accessible DESIGN.md color system.

Convert Figma variables and design tokens into a DESIGN.md file your AI agent can read. A step-by-step guide to tokens-as-code for on-brand output.

Nine standout product design systems — Stripe, Discord, Spotify, Raycast, Humane, MongoDB and more — and the one thing to steal from each for your AI agent.

Build optimization for AI-dependent codebases. Reduce link times, optimize dependency graphs, and speed up the edit-compile-run cycle for projects with large AI libraries.

How AI handles Objective-C interop, memory management, and bridge patterns. Common mistakes in AI-generated Objective-C and Swift-ObjC bridge code.

Build intuitive drag-and-drop for AI tools and skill marketplaces. From sortable lists to canvas-based workflow builders with accessible fallbacks.

KVO and observation patterns AI must handle correctly. Learn how AI mishandles reactive state, subscriptions, event emitters, and observer teardown in generated code.

Enhanced debugging output with AI analysis. Learn structured logging, contextual log enrichment, and AI-powered log analysis for faster bug resolution.

How AI modernizes old code automatically. Transform callbacks to async/await, var to const, CommonJS to ESM, and class components to hooks without breaking anything.

A tutorial on using AI skills to compare travel deals across Expedia and Priceline — bundle hotels, flights, and cars, and decide package versus a la carte fast.

AI-assisted component development workflows that produce production-quality React components. From design tokens to accessibility testing in a single session.