AI coding guides & resources
Engineering decisions, tutorials, and video guides from the OTF team.
Stripe sent the same purchase webhook 4 times. Idempotency saved us 4 emails.
Stripe webhook delivery is at-least-once, not exactly-once. Here is the atomic dedupe pattern our SaaS kit ships with by default.
Expo SDK 54's precompiled XCFrameworks cut our iOS build from 14 min to 4
Precompiled native cores plus Hermes bytecode diffing for EAS Update. 70% faster builds, 20x smaller OTA updates, same EAS plan.
4 min read
Your CLAUDE.md is too long. The 200-line ceiling that actually works.
Claude attends to ~150 instructions reliably. Past that the model summarises and stops following. Here is what stays in and what moves to docs/.
4 min read
shadcn cli v4 just turned every component library into a payload
registry:base ships fonts, tokens, components, and config in one install. Component libraries that don't ship a registry are about to disappear.
4 min read
Cursor 3's parallel agents change what a template ships with
Composer dispatches plans as concurrent subagents. Three things broke immediately — and the fix lives in your CLAUDE.md, not Cursor.
4 min read
Claude Code doubled its limits. Your codebase context is the new bottleneck.
Doubled 5-hour limits, peak-hour reductions gone, Opus API raised. For daily builders, the constraint moved from usage to context.
6 min read
Open Cowork: What the Open-Source Claude Desktop Reveals About AI Agent Tooling
Open Cowork wraps Claude Code in a one-click desktop app with VM sandboxing, a Skills system, and MCP connectors — then gives you the source. Here's what that architecture teaches us.
6 min read
Lovable can spin up your MVP. It can't ship to production with you.
Real numbers from rebuilding a Lovable Pro project with Cursor + a $149 OTF kit. The cost trap, the wedge, and what "shipping to production" actually means in practice.
12 min read
Vercel's Agent Browser is 15× cheaper than Playwright MCP — and that's not the most interesting part
Why a structured accessibility tree beats raw pixels for AI browser automation, and what shipping as a Rust CLI (instead of an MCP server) actually unlocks.
8 min read
Supabase Server is here — our next kit ships with it built in
@supabase/server just hit public beta. Here's why it changes how we build kits, and what the OTF × Supabase kit will look like.
5 min read
How to build cross-platform templates AI coding tools actually respect
Most templates fight the AI editor. A field-tested set of conventions that don't.
9 min read
Same component, web + mobile — the architecture behind @otfdashkit/ui
How we ship Card, Button, Avatar, and dozens of others across React + React Native without losing our minds.
11 min read
Anthropic Academy: Claude Code in Action
Master Claude Code through Anthropic's official training—structured exercises, real-world patterns, and insider tips straight from the team that built it.
15 min
How I Use Design Systems with AI Frontend Builders at SalesKick
Maintaining brand consistency while moving at AI speed. A practical approach to feeding your design system into AI frontend builders for consistent, rapid prototyping.
5 min
The Reality of AI-Assisted Software Engineering Productivity
Addy Osmani separates hype from data. A rigorous examination of what AI assistance actually delivers for engineering productivity, and what it doesn't.
12 min
Using Claude + Knapsack MCP to Build with Your Components
Stop getting generic components from AI. Connect your design system via Knapsack MCP and let Claude Code build with YOUR actual components.
5 min
Using Voice for AI Dictation & Documentation
Speaking is 3x faster than typing. Learn how to use voice input with AI tools for faster documentation, meeting notes, and technical writing.
4 min
Prompt: Split PRDs Into Smaller Tasks
A reusable prompt technique for breaking PRDs into AI-friendly task chunks. Better scoping produces dramatically better AI code output.
3 min
Cracking the Code of Vibe Coding
Why describing what you want to build through feeling and intent produces better software than technical specifications. The philosophy and practice of vibe coding.
8 min
Specialized AI Agents for Claude Code
Purpose-built agents that extend Claude Code with specialized capabilities for code review, testing, documentation, and refactoring. Open source and ready to use.
5 min
Luke W's Articles About AI Design
Luke Wroblewski's essential writings on AI design — from conversational interfaces to multimodal input and the fundamental questions of AI-native design.
10 min
Six Tips on Using Claude Code
Pablo Stanley's battle-tested tips for productive Claude Code sessions. Six practical techniques that improve output quality immediately.
5 min
Six Tips for Coding with GPT-5
Straight from OpenAI: six practical tips for writing better code with GPT-5. Prompt structure, context management, and debugging workflows.
4 min
Using FloatPrompt Across AI Models
Write prompts once, use them everywhere. FloatPrompt makes your prompts portable across Claude, GPT, Gemini, and other AI models.
3 min
Claude Code and Codex (GPT-5 High) with Vibecode
A head-to-head comparison of Claude Code and Codex with practical Vibecode workflows. When to use each, and how to combine them for maximum productivity.
5 min
8 Essential Tips for Using Figma Make
Figma's official guide to building effectively with Figma Make. Eight practical tips that transform how you use AI-assisted design in Figma.
6 min
Vibe Prototyping & Cursor
Describe the feeling, not the features. How vibe prototyping with Cursor turns creative intent into working interactive prototypes faster than traditional workflows.
8 min
Webflow CPO: "I Run My Whole Day in Claude Code + Cursor"
How Webflow's Chief Product Officer uses AI coding tools as her primary work environment — a window into executive-level AI-assisted productivity.
4 min
Claude Code Templates
Skip the setup phase. Ready-to-use project templates with pre-configured AGENTS.md, project structures, and conventions for Claude Code projects.
3 min
AI + Design Systems (New York State)
A real-world case study of AI meeting design systems at scale — lessons from government digital services on governance, consistency, and AI-assisted component development.
5 min
AI Coding Workflow for Solo Founders
Build like a team of five. A complete workflow for solo founders using AI coding tools to go from idea to production without a technical co-founder.
11 min
Design System Architecture Decisions Record with Claude Desktop
Document design system decisions that last. Use Claude Desktop to create Architecture Decision Records that explain the why behind every component choice.
9 min
Friction, Feedback and the Future of Creative Work with Designer Pablo
Pablo Stanley on why friction matters in design, how AI reshapes the feedback loop, and why the best creative work comes from constraints, not freedom.
10 min
How I Use LLMs to Help Me Write Code
By Simon Willison
5 min
Getting AI to Write TSL That Works
AI-generated TypeScript that actually compiles and passes type checking. Practical prompt patterns and context strategies for correct type-safe code.
9 min
Shipping Designs with AI at Anthropic
The ultimate dogfooding story: how Anthropic's design team uses Claude to ship production designs, and what they've learned building AI tools with AI tools.
10 min
Cursor's Internal Guide for Building with Cursor
By Cursor
8 min
3D Interactive Scenes with Gemini 3 + Three.js
By el.cine
8 min
Nano Banana Pro: Complete Developer Tutorial
By DEV Community
8 min
AGENTS.md: The Universal Agent Configuration File
By Geoffrey Huntley
8 min
Claude Skills Collection
By VoltAgent
12 min
Improve Code Generation with Figma's Code Connect UI
By Figma Learn
8 min
The AI Design Map: A Practical Guide for Designers into 2026
By Sherizan
12 min
A Guide to Claude Code 2.0 and Getting Better at Coding Agents
By sankalp
12 min
I've Never Felt This Much Behind as a Programmer
By Andrej Karpathy
12 min
Shipping at Inference-Speed
By Peter Steinberger
12 min
Jevons Paradox for Knowledge Work
By Aaron Levie
12 min
Party of One for Code Review!
By Kent Beck
12 min
Boris Cherny, Claude Code Creator, Shares His Setup
By Boris Cherny
12 min
The Designer's Playbook for AI Products
By Dara Sobaloju
12 min
2026: The Great Engineering Divergence
By Paul Dix
12 min
Claude Code On-The-Go
By Matthew
12 min
Quick Crash Course on Adopting Cursor / Claude Code in Your Design Org
By Juan Ramirez
8 min
Ralph Wiggum Explanation, Example Code, and Demo
By Matt Pocock
8 min
Step-By-Step Guide to Get Ralph Working and Shipping Code
By Ryan Carson
8 min
GitFig | Figma Plugin That Versions Design Like Code
By GitFig
12 min
The Complete Guide to Building Agents with the Claude Agent SDK
By nader dabit
8 min
Portable Design Systems Across Any AI
By Brian Greenbaum
12 min
Best Practices for Cursor
By Cursor
8 min
My AGENTS.md File for Building Plans You Actually Read
By Matt Pocock
12 min
Ramp: Why We Built Our Own Background Agent
By Zach Bruggeman et al.
12 min
Morphing Icons with Claude
By Benji Taylor
8 min
Improve Your AI Code Output with AGENTS.md
The single file that transforms AI output from generic to production-ready. Real examples, templates, and before/after comparisons.
10 min
Introducing: React Best Practices
By Vercel
12 min
How I Built an Apple Watch Workout App Using Cursor and Xcode
From zero Swift experience to a published Apple Watch app — how Cursor and AI-assisted development made native app creation accessible.
12 min
Rams, a Design Engineer for Your Coding Agent
By rams.ai
12 min
UI Skills: Opinionated Constraints for Your Coding Agent
By ui-skills.com
12 min
On Coding Agents and the Future of Design
By Jeff Veen
12 min
The Ultimate Guide to Vibe-Coding for Designers
By Felix Lee
8 min
Run Claude Code + Replit on Your Phone
By Matt Palmer
8 min
Inside the AI Workflows of Every's Six Engineers
How a six-person engineering team leverages AI to ship like a team three times their size — real tools, real workflows, real results.
12 min
Skills, the Open Agent Skills Ecosystem
By Vercel
12 min
Best Practices for Claude Code
By Anthropic
12 min
Better Icons: 200,000+ Icons via MCP
By Bereket Engida et al
12 min
How to Run Claude Code Locally
By Alvaro Cintas
8 min
Claude Code on Desktop
By Anthropic
8 min
Teach Your AI to Think Like a Senior Engineer
Stop getting junior-level code from your AI. Learn the prompt engineering patterns that produce architecture-aware, production-ready output.
12 min
How to Make Your Agent Learn and Ship While You Sleep
By Ryan Carson
8 min
Vibe Coding for Marketers
By Ira Bodnar
8 min
Boris Cherny: Tips for Using Claude Code
By Boris Cherny
12 min