--- title: How I built an AI football companion and landed on the... description: A developer shares the iterative journey of building an AI football tactics companion, going through two failed approaches (AI-generated timeline with YouTube... canonical: https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How I built an AI football companion and landed on the right solution for it | daily.dev og:description: A developer shares the iterative journey of building an AI football tactics companion, going through two failed approaches (AI-generated timeline with YouTube... og:url: https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl og:image: https://api.daily.dev/og/posts/O1lUmVpSL.png og:image:alt: How I built an AI football companion and landed on the right solution for it og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How I built an AI football companion and landed on the right solution for it **[Medium](https://daily.dev/sources/medium_js)** · 5 min read · 1 upvotes · 0 comments ## Summary A developer shares the iterative journey of building an AI football tactics companion, going through two failed approaches (AI-generated timeline with YouTube links, then a browser extension) before landing on a simpler 'Match Room' concept using tactical diagrams and a local HTML preview. Key technical learnings cover how to maintain UI quality in AI-generated skills: using a layered skill structure with SKILL.md as orchestrator, encoding a self-correcting validation loop, and locking layout/components while letting the model generate only match-specific content. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you preserve consistent UI quality when an AI agent generates interfaces on every run? Use a layered skill structure so the model doesn't rely on remembering visual judgment. Keep the orchestrating file (like SKILL.md) short and focused on workflow, put design principles in a separate UI contract, visual decisions in a fixed template, and example data in fixtures. Combine this with a self-correcting validation loop that builds, tests across multiple viewport and zoom scenarios, fixes detected issues, and re-validates before delivery. _daily.dev surfaces practical patterns like this for developers building reliable AI agent UI workflows._ ### Why did a browser extension approach fail for building an AI tool that explains football tactics over YouTube video? Controlling YouTube directly required building a full video infrastructure backend to identify matches, call multimodal LLM APIs, reconcile timestamps across different video edits, and generate tactical explanations, which added heavy complexity without clearly improving the core learning experience. The realization was that video playback itself wasn't the product; understanding tactics was, so the effort shifted to lightweight pitch diagrams instead. _developers weighing infrastructure complexity against user value can find similar build tradeoffs on daily.dev._ ## Similar posts on daily.dev - [Lessons from taking an idea to a live app with AI](https://daily.dev/posts/lessons-from-taking-an-idea-to-a-live-app-with-ai-ibg8c8ymr) · Medium · 0 upvotes · 0 comments - [I struggled to code with AI until I learned this workflow](https://daily.dev/posts/i-struggled-to-code-with-ai-until-i-learned-this-workflow-habxlgdyu) · System Design Newsletter · 90 upvotes · 3 comments - [Stop Building AI Slop: Build High-End Web Apps with AI](https://daily.dev/posts/stop-building-ai-slop-build-high-end-web-apps-with-ai-vfyjdmao2) · freeCodeCamp · 18 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#llm](https://daily.dev/tags/llm), [#ai-agents](https://daily.dev/tags/ai-agents), [#prompt-engineering](https://daily.dev/tags/prompt-engineering) [View this post on daily.dev](https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How I built an AI football companion and landed on the right solution for it","url":"https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl"},"datePublished":"2026-07-20T19:30:16.419Z","dateModified":"2026-09-14T06:49:32.969Z","description":"A developer shares the iterative journey of building an AI football tactics companion, going through two failed approaches (AI-generated timeline with YouTube...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/47a22b17735ca70fd507e4b19490775a?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/47a22b17735ca70fd507e4b19490775a?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,llm,ai-agents,prompt-engineering","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"How I built an AI football companion and landed on the right solution for it"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-i-built-an-ai-football-companion-and-landed-on-the-right-solution-for-it-o1lumvpsl#faq","mainEntity":[{"@type":"Question","name":"How do you preserve consistent UI quality when an AI agent generates interfaces on every run?","acceptedAnswer":{"@type":"Answer","text":"Use a layered skill structure so the model doesn't rely on remembering visual judgment. Keep the orchestrating file (like SKILL.md) short and focused on workflow, put design principles in a separate UI contract, visual decisions in a fixed template, and example data in fixtures. Combine this with a self-correcting validation loop that builds, tests across multiple viewport and zoom scenarios, fixes detected issues, and re-validates before delivery. daily.dev surfaces practical patterns like this for developers building reliable AI agent UI workflows."}},{"@type":"Question","name":"Why did a browser extension approach fail for building an AI tool that explains football tactics over YouTube video?","acceptedAnswer":{"@type":"Answer","text":"Controlling YouTube directly required building a full video infrastructure backend to identify matches, call multimodal LLM APIs, reconcile timestamps across different video edits, and generate tactical explanations, which added heavy complexity without clearly improving the core learning experience. The realization was that video playback itself wasn't the product; understanding tactics was, so the effort shifted to lightweight pitch diagrams instead. developers weighing infrastructure complexity against user value can find similar build tradeoffs on daily.dev."}}]} ```