[{"data":1,"prerenderedAt":8022},["ShallowReactive",2],{"footer-articles":3,"/blog/advanced-agentic-workflows-with-stacked-skills":5954,"related-/blog/advanced-agentic-workflows-with-stacked-skills":6701},[4,1035,2382,2705],{"id":5,"title":6,"body":7,"category":1025,"date":1026,"description":1027,"draft":1028,"extension":64,"image":1029,"meta":1030,"navigation":163,"path":1031,"seo":1032,"stem":1033,"tighten":1028,"__hash__":1034},"blog/blog/advanced-agentic-workflows-with-stacked-skills.md","Advanced Agentic Workflows With Stacked Skills",{"type":8,"value":9,"toc":1016},"minimark",[10,14,20,23,26,31,34,37,42,55,58,86,93,99,103,106,109,119,122,141,144,147,197,200,242,245,248,252,260,267,385,388,391,398,789,793,796,906,915,918,922,925,930,933,940,944,947,996,999,1003,1006,1009,1012],[11,12,13],"p",{},"We all know that simply asking a clanker:",[15,16,17],"blockquote",{},[11,18,19],{},"Build a million-dollar app. Make no mistakes.",[11,21,22],{},"...won't work as magically as you'd expect, no matter what the vibe coders on Twitter say. However, there are far more effective ways to automate workflows for our agents.",[11,24,25],{},"Imagine having a list of 12 to-do cards in Trello and simply saying:",[15,27,28],{},[11,29,30],{},"Tackle all my pending tasks.",[11,32,33],{},"...then letting the agent run until you have 12 PRs ready for review. Pretty cool, right?",[11,35,36],{},"Today, we'll explore how to create skills, compose them together, and build exactly that kind of workflow.",[38,39,41],"h2",{"id":40},"skills-can-call-other-skills","Skills Can Call Other Skills",[11,43,44,45,50,51],{},"In ",[46,47,49],"a",{"href":48},"/blog/skills-i-know-kung-fu","the last post"," I built a skill to ",[52,53,54],"strong",{},"automate creating PRs in GitHub.",[11,56,57],{},"What's great is that not only I can run it in my agent session, but also call it from other skills. A skill can call another skill by naming its slash command as a step in its own instructions, the same way you would type it into the prompt.",[59,60,66],"pre",{"className":61,"code":62,"filename":63,"language":64,"meta":65,"style":65},"language-md shiki shiki-themes monokai","- Once you are done, create a PR using `/github-pr main`\n","SKILL.md","md","",[67,68,69],"code",{"__ignoreMap":65},[70,71,74,78,82],"span",{"class":72,"line":73},"line",1,[70,75,77],{"class":76},"sHkqI","-",[70,79,81],{"class":80},"sCdxs"," Once you are done, create a PR using ",[70,83,85],{"class":84},"szGx7","`/github-pr main`\n",[11,87,88,89,92],{},"When reading that line, the agent will run that ",[67,90,91],{},"/github-pr"," skill. There is no API or plugin system to set up, the agent is smart enough to figure it out.",[11,94,95,96,98],{},"That may sound like a small detail, but it changes how you design skills: instead of one large ",[67,97,63],{}," that tries to handle an entire process, you can write skills that each do one thing well and let them delegate the rest.",[38,100,102],{"id":101},"the-goal","The Goal",[11,104,105],{},"Let's explore a complex workflow to put this in practice.",[11,107,108],{},"I'd love to leave my agent running in the background, tackling all the pending items of a given project.",[11,110,111,112,118],{},"How can we organize the tasks? Well, perhaps we can use ",[46,113,117],{"href":114,"rel":115},"https://trello.com",[116],"nofollow","Trello",". A simple board will do: \"To Do\", \"Doing\", \"Under Review\" and \"Done\".",[11,120,121],{},"The full agentic workflow will be:",[123,124,125,129,132,135,138],"ul",{},[126,127,128],"li",{},"Pick the first card from the \"To Do\" list",[126,130,131],{},"Move the card to \"Doing\"",[126,133,134],{},"Complete the task",[126,136,137],{},"Create a PR",[126,139,140],{},"Move the card to \"Under Review\"",[11,142,143],{},"We'll keep things simple: each card will represent a feature, a concrete and rather small amount of work. Each card will have its own, dedicated PR.",[11,145,146],{},"If we are building an online shop, a card could be:",[59,148,150],{"className":61,"code":149,"language":64,"meta":65,"style":65},"# Implement Product Search\n\n- Add a search input to the product listing page\n- As the user types, filter the list of products by name\n- If no products match the search, display a \"No products found\" message\n- Clearing the search input should restore the full product list\n",[67,151,152,158,165,173,181,189],{"__ignoreMap":65},[70,153,154],{"class":72,"line":73},[70,155,157],{"class":156},"ssRA_","# Implement Product Search\n",[70,159,161],{"class":72,"line":160},2,[70,162,164],{"emptyLinePlaceholder":163},true,"\n",[70,166,168,170],{"class":72,"line":167},3,[70,169,77],{"class":76},[70,171,172],{"class":80}," Add a search input to the product listing page\n",[70,174,176,178],{"class":72,"line":175},4,[70,177,77],{"class":76},[70,179,180],{"class":80}," As the user types, filter the list of products by name\n",[70,182,184,186],{"class":72,"line":183},5,[70,185,77],{"class":76},[70,187,188],{"class":80}," If no products match the search, display a \"No products found\" message\n",[70,190,192,194],{"class":72,"line":191},6,[70,193,77],{"class":76},[70,195,196],{"class":80}," Clearing the search input should restore the full product list\n",[11,198,199],{},"Looks like a good unit of work, right? Another card could be:",[59,201,203],{"className":61,"code":202,"language":64,"meta":65,"style":65},"# Implement Product Categories\n\n- Display the list of available categories on the product listing page\n- Selecting a category should filter the displayed products\n- The user can clear the selected category to view all products again\n- The selected category should remain active while navigating the product list\n",[67,204,205,210,214,221,228,235],{"__ignoreMap":65},[70,206,207],{"class":72,"line":73},[70,208,209],{"class":156},"# Implement Product Categories\n",[70,211,212],{"class":72,"line":160},[70,213,164],{"emptyLinePlaceholder":163},[70,215,216,218],{"class":72,"line":167},[70,217,77],{"class":76},[70,219,220],{"class":80}," Display the list of available categories on the product listing page\n",[70,222,223,225],{"class":72,"line":175},[70,224,77],{"class":76},[70,226,227],{"class":80}," Selecting a category should filter the displayed products\n",[70,229,230,232],{"class":72,"line":183},[70,231,77],{"class":76},[70,233,234],{"class":80}," The user can clear the selected category to view all products again\n",[70,236,237,239],{"class":72,"line":191},[70,238,77],{"class":76},[70,240,241],{"class":80}," The selected category should remain active while navigating the product list\n",[11,243,244],{},"And so on and so forth!",[11,246,247],{},"We already have a skill that takes care of interacting with GitHub. Now, we only need one to interact with Trello.",[38,249,251],{"id":250},"the-trello-skill","The Trello Skill",[11,253,254,255,259],{},"Let's create this simple skill to teach the agent how to work with Trello's API. Of course, the reasoning model can ",[256,257,258],"em",{},"figure it out,"," but it's faster (and less token consuming) to steer it in the right direction.",[11,261,262,263,266],{},"First, we need a file with the credentials and the IDs of the board and lists we want to work with. In the root of our project, we can save a ",[67,264,265],{},"trello.json"," that would look something like this:",[59,268,272],{"className":269,"code":270,"filename":265,"language":271,"meta":65,"style":65},"language-json shiki shiki-themes monokai","{\n  \"apiKey\": \"...\",\n  \"apiToken\": \"...\",\n  \"board\": \"\u003Cboard-id>\",\n  \"lists\": {\n    \"To Do\": \"\u003Clist-id>\",\n    \"Doing\": \"\u003Clist-id>\",\n    \"Under Review\": \"\u003Clist-id>\",\n    \"Done\": \"\u003Clist-id>\"\n  }\n}\n","json",[67,273,274,279,295,306,318,326,338,350,362,373,379],{"__ignoreMap":65},[70,275,276],{"class":72,"line":73},[70,277,278],{"class":80},"{\n",[70,280,281,285,288,292],{"class":72,"line":160},[70,282,284],{"class":283},"sOx1s","  \"apiKey\"",[70,286,287],{"class":80},": ",[70,289,291],{"class":290},"susgL","\"...\"",[70,293,294],{"class":80},",\n",[70,296,297,300,302,304],{"class":72,"line":167},[70,298,299],{"class":283},"  \"apiToken\"",[70,301,287],{"class":80},[70,303,291],{"class":290},[70,305,294],{"class":80},[70,307,308,311,313,316],{"class":72,"line":175},[70,309,310],{"class":283},"  \"board\"",[70,312,287],{"class":80},[70,314,315],{"class":290},"\"\u003Cboard-id>\"",[70,317,294],{"class":80},[70,319,320,323],{"class":72,"line":183},[70,321,322],{"class":283},"  \"lists\"",[70,324,325],{"class":80},": {\n",[70,327,328,331,333,336],{"class":72,"line":191},[70,329,330],{"class":283},"    \"To Do\"",[70,332,287],{"class":80},[70,334,335],{"class":290},"\"\u003Clist-id>\"",[70,337,294],{"class":80},[70,339,341,344,346,348],{"class":72,"line":340},7,[70,342,343],{"class":283},"    \"Doing\"",[70,345,287],{"class":80},[70,347,335],{"class":290},[70,349,294],{"class":80},[70,351,353,356,358,360],{"class":72,"line":352},8,[70,354,355],{"class":283},"    \"Under Review\"",[70,357,287],{"class":80},[70,359,335],{"class":290},[70,361,294],{"class":80},[70,363,365,368,370],{"class":72,"line":364},9,[70,366,367],{"class":283},"    \"Done\"",[70,369,287],{"class":80},[70,371,372],{"class":290},"\"\u003Clist-id>\"\n",[70,374,376],{"class":72,"line":375},10,[70,377,378],{"class":80},"  }\n",[70,380,382],{"class":72,"line":381},11,[70,383,384],{"class":80},"}\n",[11,386,387],{},"Of course, remember to add that file to gitignore so you don't leak your credentials.",[11,389,390],{},"Now, we only need to tell our agent how to operate with Trello so it knows exactly what to do when we ask it to \"create a new card\" or \"move this card to Done\".",[11,392,393,394,397],{},"This is how the ",[67,395,396],{},"/trello"," skill could look like:",[59,399,402],{"className":61,"code":400,"filename":401,"language":64,"meta":65,"style":65},"---\nname: trello\ndescription: Interacts with a Trello board. Triggered by \"/trello\".\n---\n\nUse this skill whenever the user asks you to read, create, update, delete, or move cards.\n\n## Credentials\n\nRead board credentials from `trello.json` in the project root:\n\n```json\n{\n  \"apiKey\": \"...\",\n  \"apiToken\": \"...\",\n  \"board\": \"\u003Cboard-id>\",\n  \"lists\": {\n    \"To Do\": \"\u003Clist-id>\",\n    \"Doing\": \"\u003Clist-id>\",\n    \"Under Review\": \"\u003Clist-id>\",\n    \"Done\": \"\u003Clist-id>\"\n  }\n}\n```\n\n## Read list\n\n`curl -s \"https://api.trello.com/1/lists/\u003Clist-id>/cards?key=\u003CapiKey>&token=\u003CapiToken>\"`\n\n## Create card\n\nThe card name is the title and the description holds the body. Use `--data-urlencode` so spaces and line breaks survive:\n\n`curl -s -X POST \"https://api.trello.com/1/cards?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"idList=\u003Clist-id>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n\n## Move card\n\n`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>&idList=\u003Clist-id>\"`\n\n## Update card\n\nSame endpoint as moving, just pass whichever fields changed:\n\n`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n\n## Delete card\n\n`curl -s -X DELETE \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\"`\n\n## Attach a URL\n\nAttach a link to a card, for example the PR you just opened:\n\n`curl -s -X POST \"https://api.trello.com/1/cards/\u003Ccard-id>/attachments?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"url=https://google.com\"`\n\n## Error handling\n\n- If `trello.json` is missing or malformed, stop and tell the user.\n- If the Trello API returns a non-2xx status, show the error and stop.\n",".claude/skills/trello/SKILL.md",[67,403,404,409,421,431,435,439,444,448,453,457,468,472,478,483,494,505,516,523,534,545,556,565,570,575,581,586,592,597,603,608,614,619,631,636,642,647,653,658,664,669,675,680,686,691,697,702,708,713,719,724,730,735,741,746,752,757,763,768,781],{"__ignoreMap":65},[70,405,406],{"class":72,"line":73},[70,407,408],{"class":80},"---\n",[70,410,411,415,417],{"class":72,"line":160},[70,412,414],{"class":413},"s8I7P","name",[70,416,287],{"class":80},[70,418,420],{"class":419},"s_Ekj","trello\n",[70,422,423,426,428],{"class":72,"line":167},[70,424,425],{"class":413},"description",[70,427,287],{"class":80},[70,429,430],{"class":419},"Interacts with a Trello board. Triggered by \"/trello\".\n",[70,432,433],{"class":72,"line":175},[70,434,408],{"class":80},[70,436,437],{"class":72,"line":183},[70,438,164],{"emptyLinePlaceholder":163},[70,440,441],{"class":72,"line":191},[70,442,443],{"class":80},"Use this skill whenever the user asks you to read, create, update, delete, or move cards.\n",[70,445,446],{"class":72,"line":340},[70,447,164],{"emptyLinePlaceholder":163},[70,449,450],{"class":72,"line":352},[70,451,452],{"class":156},"## Credentials\n",[70,454,455],{"class":72,"line":364},[70,456,164],{"emptyLinePlaceholder":163},[70,458,459,462,465],{"class":72,"line":375},[70,460,461],{"class":80},"Read board credentials from ",[70,463,464],{"class":84},"`trello.json`",[70,466,467],{"class":80}," in the project root:\n",[70,469,470],{"class":72,"line":381},[70,471,164],{"emptyLinePlaceholder":163},[70,473,475],{"class":72,"line":474},12,[70,476,477],{"class":80},"```json\n",[70,479,481],{"class":72,"line":480},13,[70,482,278],{"class":80},[70,484,486,488,490,492],{"class":72,"line":485},14,[70,487,284],{"class":283},[70,489,287],{"class":80},[70,491,291],{"class":290},[70,493,294],{"class":80},[70,495,497,499,501,503],{"class":72,"line":496},15,[70,498,299],{"class":283},[70,500,287],{"class":80},[70,502,291],{"class":290},[70,504,294],{"class":80},[70,506,508,510,512,514],{"class":72,"line":507},16,[70,509,310],{"class":283},[70,511,287],{"class":80},[70,513,315],{"class":290},[70,515,294],{"class":80},[70,517,519,521],{"class":72,"line":518},17,[70,520,322],{"class":283},[70,522,325],{"class":80},[70,524,526,528,530,532],{"class":72,"line":525},18,[70,527,330],{"class":283},[70,529,287],{"class":80},[70,531,335],{"class":290},[70,533,294],{"class":80},[70,535,537,539,541,543],{"class":72,"line":536},19,[70,538,343],{"class":283},[70,540,287],{"class":80},[70,542,335],{"class":290},[70,544,294],{"class":80},[70,546,548,550,552,554],{"class":72,"line":547},20,[70,549,355],{"class":283},[70,551,287],{"class":80},[70,553,335],{"class":290},[70,555,294],{"class":80},[70,557,559,561,563],{"class":72,"line":558},21,[70,560,367],{"class":283},[70,562,287],{"class":80},[70,564,372],{"class":290},[70,566,568],{"class":72,"line":567},22,[70,569,378],{"class":80},[70,571,573],{"class":72,"line":572},23,[70,574,384],{"class":80},[70,576,578],{"class":72,"line":577},24,[70,579,580],{"class":80},"```\n",[70,582,584],{"class":72,"line":583},25,[70,585,164],{"emptyLinePlaceholder":163},[70,587,589],{"class":72,"line":588},26,[70,590,591],{"class":156},"## Read list\n",[70,593,595],{"class":72,"line":594},27,[70,596,164],{"emptyLinePlaceholder":163},[70,598,600],{"class":72,"line":599},28,[70,601,602],{"class":84},"`curl -s \"https://api.trello.com/1/lists/\u003Clist-id>/cards?key=\u003CapiKey>&token=\u003CapiToken>\"`\n",[70,604,606],{"class":72,"line":605},29,[70,607,164],{"emptyLinePlaceholder":163},[70,609,611],{"class":72,"line":610},30,[70,612,613],{"class":156},"## Create card\n",[70,615,617],{"class":72,"line":616},31,[70,618,164],{"emptyLinePlaceholder":163},[70,620,622,625,628],{"class":72,"line":621},32,[70,623,624],{"class":80},"The card name is the title and the description holds the body. Use ",[70,626,627],{"class":84},"`--data-urlencode`",[70,629,630],{"class":80}," so spaces and line breaks survive:\n",[70,632,634],{"class":72,"line":633},33,[70,635,164],{"emptyLinePlaceholder":163},[70,637,639],{"class":72,"line":638},34,[70,640,641],{"class":84},"`curl -s -X POST \"https://api.trello.com/1/cards?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"idList=\u003Clist-id>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n",[70,643,645],{"class":72,"line":644},35,[70,646,164],{"emptyLinePlaceholder":163},[70,648,650],{"class":72,"line":649},36,[70,651,652],{"class":156},"## Move card\n",[70,654,656],{"class":72,"line":655},37,[70,657,164],{"emptyLinePlaceholder":163},[70,659,661],{"class":72,"line":660},38,[70,662,663],{"class":84},"`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>&idList=\u003Clist-id>\"`\n",[70,665,667],{"class":72,"line":666},39,[70,668,164],{"emptyLinePlaceholder":163},[70,670,672],{"class":72,"line":671},40,[70,673,674],{"class":156},"## Update card\n",[70,676,678],{"class":72,"line":677},41,[70,679,164],{"emptyLinePlaceholder":163},[70,681,683],{"class":72,"line":682},42,[70,684,685],{"class":80},"Same endpoint as moving, just pass whichever fields changed:\n",[70,687,689],{"class":72,"line":688},43,[70,690,164],{"emptyLinePlaceholder":163},[70,692,694],{"class":72,"line":693},44,[70,695,696],{"class":84},"`curl -s -X PUT \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"name=\u003Ccard-title>\" --data-urlencode \"desc=\u003Ccard-body>\"`\n",[70,698,700],{"class":72,"line":699},45,[70,701,164],{"emptyLinePlaceholder":163},[70,703,705],{"class":72,"line":704},46,[70,706,707],{"class":156},"## Delete card\n",[70,709,711],{"class":72,"line":710},47,[70,712,164],{"emptyLinePlaceholder":163},[70,714,716],{"class":72,"line":715},48,[70,717,718],{"class":84},"`curl -s -X DELETE \"https://api.trello.com/1/cards/\u003Ccard-id>?key=\u003CapiKey>&token=\u003CapiToken>\"`\n",[70,720,722],{"class":72,"line":721},49,[70,723,164],{"emptyLinePlaceholder":163},[70,725,727],{"class":72,"line":726},50,[70,728,729],{"class":156},"## Attach a URL\n",[70,731,733],{"class":72,"line":732},51,[70,734,164],{"emptyLinePlaceholder":163},[70,736,738],{"class":72,"line":737},52,[70,739,740],{"class":80},"Attach a link to a card, for example the PR you just opened:\n",[70,742,744],{"class":72,"line":743},53,[70,745,164],{"emptyLinePlaceholder":163},[70,747,749],{"class":72,"line":748},54,[70,750,751],{"class":84},"`curl -s -X POST \"https://api.trello.com/1/cards/\u003Ccard-id>/attachments?key=\u003CapiKey>&token=\u003CapiToken>\" --data-urlencode \"url=https://google.com\"`\n",[70,753,755],{"class":72,"line":754},55,[70,756,164],{"emptyLinePlaceholder":163},[70,758,760],{"class":72,"line":759},56,[70,761,762],{"class":156},"## Error handling\n",[70,764,766],{"class":72,"line":765},57,[70,767,164],{"emptyLinePlaceholder":163},[70,769,771,773,776,778],{"class":72,"line":770},58,[70,772,77],{"class":76},[70,774,775],{"class":80}," If ",[70,777,464],{"class":84},[70,779,780],{"class":80}," is missing or malformed, stop and tell the user.\n",[70,782,784,786],{"class":72,"line":783},59,[70,785,77],{"class":76},[70,787,788],{"class":80}," If the Trello API returns a non-2xx status, show the error and stop.\n",[38,790,792],{"id":791},"the-orchestrator-skill","The Orchestrator Skill",[11,794,795],{},"Great! Now that we have skills that know how to deal with Trello and GitHub, we can create an orchestrator skill that makes use of both.",[59,797,800],{"className":61,"code":798,"filename":799,"language":64,"meta":65,"style":65},"---\nname: tackle-task\ndescription: Pick the first card in the Trello \"To Do\" list, build the feature it describes, open a PR, and move the card to \"Under Review\".\n---\n\n## Steps\n\n1. Use `/trello` to read the first card in \"To Do\". If the list is empty, stop here.\n2. Use `/trello` to move that card to \"Doing\".\n3. Treat the card's title and description as the feature spec and build it, following the conventions already in the codebase.\n4. Use `/github-pr main` to open the pull request. If this card builds on an earlier one, target that branch instead so the PRs stack: `/github-pr \u003Cbase-branch>`.\n5. Use `/trello` to move the card to \"Under Review\" and attach the PR link.\n",".claude/skills/tackle-task/SKILL.md",[67,801,802,806,815,824,828,832,837,841,855,867,875,894],{"__ignoreMap":65},[70,803,804],{"class":72,"line":73},[70,805,408],{"class":80},[70,807,808,810,812],{"class":72,"line":160},[70,809,414],{"class":413},[70,811,287],{"class":80},[70,813,814],{"class":419},"tackle-task\n",[70,816,817,819,821],{"class":72,"line":167},[70,818,425],{"class":413},[70,820,287],{"class":80},[70,822,823],{"class":419},"Pick the first card in the Trello \"To Do\" list, build the feature it describes, open a PR, and move the card to \"Under Review\".\n",[70,825,826],{"class":72,"line":175},[70,827,408],{"class":80},[70,829,830],{"class":72,"line":183},[70,831,164],{"emptyLinePlaceholder":163},[70,833,834],{"class":72,"line":191},[70,835,836],{"class":156},"## Steps\n",[70,838,839],{"class":72,"line":340},[70,840,164],{"emptyLinePlaceholder":163},[70,842,843,846,849,852],{"class":72,"line":352},[70,844,845],{"class":76},"1.",[70,847,848],{"class":80}," Use ",[70,850,851],{"class":84},"`/trello`",[70,853,854],{"class":80}," to read the first card in \"To Do\". If the list is empty, stop here.\n",[70,856,857,860,862,864],{"class":72,"line":364},[70,858,859],{"class":76},"2.",[70,861,848],{"class":80},[70,863,851],{"class":84},[70,865,866],{"class":80}," to move that card to \"Doing\".\n",[70,868,869,872],{"class":72,"line":375},[70,870,871],{"class":76},"3.",[70,873,874],{"class":80}," Treat the card's title and description as the feature spec and build it, following the conventions already in the codebase.\n",[70,876,877,880,882,885,888,891],{"class":72,"line":381},[70,878,879],{"class":76},"4.",[70,881,848],{"class":80},[70,883,884],{"class":84},"`/github-pr main`",[70,886,887],{"class":80}," to open the pull request. If this card builds on an earlier one, target that branch instead so the PRs stack: ",[70,889,890],{"class":84},"`/github-pr \u003Cbase-branch>`",[70,892,893],{"class":80},".\n",[70,895,896,899,901,903],{"class":72,"line":474},[70,897,898],{"class":76},"5.",[70,900,848],{"class":80},[70,902,851],{"class":84},[70,904,905],{"class":80}," to move the card to \"Under Review\" and attach the PR link.\n",[11,907,908,909,911,912,914],{},"As you can see, this skill never explains how to name a branch, write a PR body, or talk to GitHub. It delegates all of that to ",[67,910,91],{},". Same goes for the Trello operations: saying \"move card to Doing\" is enough, since ",[67,913,396],{}," knows how to do it.",[11,916,917],{},"Each skill stays small, and neither has to absorb the other's job.",[38,919,921],{"id":920},"running-the-whole-board","Running the Whole Board",[11,923,924],{},"Because the workflow lives in skills rather than in my head, scaling from one card to the entire backlog takes a single instruction:",[15,926,927],{},[11,928,929],{},"Sequentially tackle every task in our Trello.",[11,931,932],{},"That's it! That instruction makes the agent work until we have no more cards in \"To Do\".",[11,934,935,936,939],{},"The end result is a bunch of PRs in GitHub, ready for human review. Yeah, ",[256,937,938],{},"human review:"," I think it's important to take a moment to read the code the clanker generated. We saved so much time already (not only in the coding aspect, but all the ceremony that goes with it: writing PRs, moving cards, etc.) that taking a look can't hurt anyone... and can save you from shipping slop.",[38,941,943],{"id":942},"designing-skills-that-stack","Designing Skills That Stack",[11,945,946],{},"A few principles made the difference between skills that compose cleanly and skills that fight each other:",[123,948,949,965,979,987],{},[126,950,951,954,955,957,958,960,961,964],{},[52,952,953],{},"One job per skill."," ",[67,956,91],{}," only knows how to open a PR, and ",[67,959,396],{}," only knows how to talk to the board. That's exactly why ",[67,962,963],{},"/tackle-task"," can lean on both without dragging their guts into its own instructions.",[126,966,967,970,971,974,975,978],{},[52,968,969],{},"Give each skill a small handle to grab."," The base-branch argument is the whole reason ",[67,972,973],{},"/github-pr main"," and ",[67,976,977],{},"/github-pr some-feature"," both work. One little parameter turns a fixed command into a building block.",[126,980,981,954,984,986],{},[52,982,983],{},"Let the orchestrator do the deciding.",[67,985,963],{}," owns the order of things and the \"does this card stack on another?\" call. The skills it invokes never need to know that context exists.",[126,988,989,992,993,995],{},[52,990,991],{},"Stop when something looks off."," An empty \"To Do\" list, a missing ",[67,994,265],{},", a non-2xx from the API: any of those halts the run instead of quietly plowing ahead and making a mess you have to untangle later.",[11,997,998],{},"None of this depends on an exotic feature. It's the same design thinking you already apply to code, pointed at the skills your agent runs.",[38,1000,1002],{"id":1001},"where-this-goes","Where This Goes",[11,1004,1005],{},"Once you start seeing skills as stackable recipes, it's hard not to notice more places to apply them.",[11,1007,1008],{},"The one I'm building now checks my inbox, reads emails from my app users, turns their requests into Trello cards, works on them, opens a PR for each one, and drafts an email reply for me to send later.",[11,1010,1011],{},"Here's a challenge for you: think about what you can automate with skills. Build it, and let me know how it goes!",[1013,1014,1015],"style",{},"html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .szGx7, html code.shiki .szGx7{--shiki-default:#FD971F}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .ssRA_, html code.shiki .ssRA_{--shiki-default:#A6E22E;--shiki-default-font-weight:bold}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .susgL, html code.shiki .susgL{--shiki-default:#CFCFC2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}",{"title":65,"searchDepth":160,"depth":160,"links":1017},[1018,1019,1020,1021,1022,1023,1024],{"id":40,"depth":160,"text":41},{"id":101,"depth":160,"text":102},{"id":250,"depth":160,"text":251},{"id":791,"depth":160,"text":792},{"id":920,"depth":160,"text":921},{"id":942,"depth":160,"text":943},{"id":1001,"depth":160,"text":1002},"AI","2026-07-09","A single skill removes one repetitive task. Stacking skills, letting one call another, turns a backlog into a workflow your agent can run end to end.",false,"/img/blog/advanced-agentic-workflows-with-stacked-skills.png",{},"/blog/advanced-agentic-workflows-with-stacked-skills",{"title":6,"description":1027},"blog/advanced-agentic-workflows-with-stacked-skills","dhbCP-c8nD_KIMpxzUk_rO96Kxg8PL8uJl3vdqTIGwM",{"id":1036,"title":1037,"body":1038,"category":1025,"date":2375,"description":2376,"draft":1028,"extension":64,"image":2377,"meta":2378,"navigation":163,"path":48,"seo":2379,"stem":2380,"tighten":1028,"__hash__":2381},"blog/blog/skills-i-know-kung-fu.md","Skills: I Know Kung Fu!",{"type":8,"value":1039,"toc":2365},[1040,1051,1058,1061,1064,1073,1076,1081,1091,1095,1098,1101,1115,1120,1134,1137,1178,1181,1199,1211,1217,1220,1224,1231,1236,1239,1242,1259,1262,1277,1285,1290,1486,1496,1512,1515,1518,1522,1525,1530,1533,1573,1576,1586,1592,1596,1603,1606,1646,1653,1656,1660,1666,1669,1689,1692,1698,1704,1723,1726,2046,2056,2062,2257,2264,2323,2329,2332,2334,2338,2341,2344,2353,2359,2362],[11,1041,1042,1043,1046,1047,1050],{},"There's this famous scene in ",[256,1044,1045],{},"The Matrix"," where Neo gets a ",[256,1048,1049],{},"software update"," that instantly teaches him Kung Fu. I'd love that in real life! Maybe then I could finally play the keyboard without sounding like a cat walked across it.",[11,1052,1053,1054,1057],{},"Unfortunately, we don't have that. But we do have ",[52,1055,1056],{},"skills for our agents",", which, while not nearly as cool, can still save you a big chunk of time.",[11,1059,1060],{},"Think about everything you asked Claude to do this week. Was there one request you found yourself repeating over and over, using almost the exact same prompt?",[11,1062,1063],{},"For me, it's creating GitHub PRs.",[15,1065,1066],{},[11,1067,1068,1069,1072],{},"Open a PR. Keep the description short. No emojis. Don't list yourself as a co-author. Don't use the word ",[256,1070,1071],{},"seamlessly","...",[11,1074,1075],{},"I'd type it, the agent would do a decent job, and a couple of hours later I'd find myself typing the exact same thing again for the next branch.",[15,1077,1078],{},[11,1079,1080],{},"Open a PR. Short description. No emojis...",[11,1082,1083,1084,1087,1088],{},"You know the saying, ",[256,1085,1086],{},"\"This meeting could have been an email\"?"," That's how I feel every time I catch myself repeating a prompt: ",[256,1089,1090],{},"\"This prompt should have been a skill.\"",[38,1092,1094],{"id":1093},"what-is-a-skill","What Is a Skill?",[11,1096,1097],{},"A skill is a recipe you write once so the agent can perform the same task over and over without you narrating every step again.",[11,1099,1100],{},"Unlike a prompt, a skill can bring along everything the task needs: scripts, references, templates, rules, etc.",[11,1102,1103,1104,1107,1108,1111,1112,1114],{},"You create a folder under ",[67,1105,1106],{},".claude/skills/",". Call it whatever you like, for example ",[67,1109,1110],{},"joke",". Inside it, create a ",[67,1113,63],{}," file.",[11,1116,1117,1119],{},[67,1118,63],{}," should have two parts:",[123,1121,1122,1131],{},[126,1123,1124,1125,1127,1128,1130],{},"A frontmatter block with a ",[67,1126,414],{}," and a ",[67,1129,425],{},".",[126,1132,1133],{},"A markdown body with the actual instructions, written in natural language.",[11,1135,1136],{},"Here's an example:",[59,1138,1141],{"className":61,"code":1139,"filename":1140,"language":64,"meta":65,"style":65},"---\nname: joke\ndescription: Tells a funny joke.\n---\n\nTell me a funny joke. Extra points if it is about programmers!\n",".claude/skills/joke/SKILL.md",[67,1142,1143,1147,1156,1165,1169,1173],{"__ignoreMap":65},[70,1144,1145],{"class":72,"line":73},[70,1146,408],{"class":80},[70,1148,1149,1151,1153],{"class":72,"line":160},[70,1150,414],{"class":413},[70,1152,287],{"class":80},[70,1154,1155],{"class":419},"joke\n",[70,1157,1158,1160,1162],{"class":72,"line":167},[70,1159,425],{"class":413},[70,1161,287],{"class":80},[70,1163,1164],{"class":419},"Tells a funny joke.\n",[70,1166,1167],{"class":72,"line":175},[70,1168,408],{"class":80},[70,1170,1171],{"class":72,"line":183},[70,1172,164],{"emptyLinePlaceholder":163},[70,1174,1175],{"class":72,"line":191},[70,1176,1177],{"class":80},"Tell me a funny joke. Extra points if it is about programmers!\n",[11,1179,1180],{},"To use a skill, you can either:",[123,1182,1183,1193],{},[126,1184,1185,1188,1189,1192],{},[52,1186,1187],{},"Invoke it as a command:"," type a slash followed by the skill's name, e.g. ",[67,1190,1191],{},"/joke",", and press enter.",[126,1194,1195,1198],{},[52,1196,1197],{},"Ask in natural language:"," if the skill's description matches what you asked the agent to do, Claude will automatically pick it up. Here, something like \"tell me a joke\" will do.",[1200,1201,1204],"callout",{"color":1202,"icon":1203},"#057ccd","fa6-solid:circle-info",[11,1205,1206,1207,1210],{},"If you'd rather invoke the skill explicitly every time, add ",[67,1208,1209],{},"disable-model-invocation: true"," to the frontmatter.",[11,1212,1213,1214,1216],{},"The ",[67,1215,425],{}," is more important than it looks. Whenever you ask Claude to do something, it uses the descriptions of your available skills to decide whether one matches the request.",[11,1218,1219],{},"If the description is vague, the skill rarely gets used. If it's specific, Claude starts reaching for it automatically.",[38,1221,1223],{"id":1222},"a-skill-is-a-folder-not-just-a-file","A Skill Is a Folder, Not Just a File",[11,1225,1226,1227,1230],{},"So far we've only seen a single markdown file, but ",[52,1228,1229],{},"a skill is really the entire folder"," around the markdown file. This folder can contain scripts, reference documents, templates, and anything else the workflow needs.",[1232,1233,1235],"h3",{"id":1234},"tip-1-skills-can-execute-scripts","Tip 1: Skills Can Execute Scripts",[11,1237,1238],{},"If you describe an action in natural language, the model is usually smart enough to figure out how to do it and write code on the fly to make it happen. Sometimes, though, you want something more predictable.",[11,1240,1241],{},"You can include commands and code snippets in your skills. So instead of saying \"Clear the logs\" and hoping the model does the right thing, you can simply tell it what to run:",[59,1243,1247],{"className":1244,"code":1245,"filename":63,"language":1246,"meta":65,"style":65},"language-diff shiki shiki-themes monokai","- Clear the logs.\n+ Run `rm -rf ./logs` to clear the logs.\n","diff",[67,1248,1249,1254],{"__ignoreMap":65},[70,1250,1251],{"class":72,"line":73},[70,1252,1253],{"class":413},"- Clear the logs.\n",[70,1255,1256],{"class":72,"line":160},[70,1257,1258],{"class":76},"+ Run `rm -rf ./logs` to clear the logs.\n",[11,1260,1261],{},"Once those scripts get more than a few lines long, you can move them into their own files.",[11,1263,1264,1265,1268,1269,1272,1273,1276],{},"Say I want a ",[67,1266,1267],{},"video-to-gif"," skill that turns a screen recording into a small GIF I can drop into an issue. To keep the colors from looking terrible, that's really a two-pass job: first build a color palette tailored to the video, then render the GIF using it. That's fiddly enough that I don't want the agent reconstructing the exact ",[67,1270,1271],{},"ffmpeg"," filters every time, so I drop a ",[67,1274,1275],{},"script.sh"," into the skill folder:",[59,1278,1283],{"className":1279,"code":1281,"language":1282,"meta":65},[1280],"language-text","📂 video-to-gif/\n├── 📄 SKILL.md\n└── ▶️ script.sh\n","text",[67,1284,1281],{"__ignoreMap":65},[11,1286,1287,1289],{},[67,1288,1275],{}," scales the video down to 420p, drops it to 12 frames per second, and squeezes it into a 64-color palette:",[59,1291,1295],{"className":1292,"code":1293,"filename":1275,"language":1294,"meta":65,"style":65},"language-shell shiki shiki-themes monokai","#!/usr/bin/env bash\nset -euo pipefail\nINPUT=\"${1:?usage: script.sh \u003Cinput-video>}\"\nOUTPUT=\"${2:-output.gif}\"\n\n# 1. build an optimized palette from the video\nffmpeg -i \"$INPUT\" -vf \"fps=12,scale=-1:420:flags=lanczos,palettegen=max_colors=64\" -y palette.png\n\n# 2. render the gif using that palette\nffmpeg -i \"$INPUT\" -i palette.png -lavfi \"fps=12,scale=-1:420:flags=lanczos[x];[x][1:v]paletteuse\" -y \"$OUTPUT\"\n\n# 3. clean up\nrm -f palette.png\n","shell",[67,1296,1297,1303,1316,1363,1390,1394,1399,1426,1430,1435,1467,1471,1476],{"__ignoreMap":65},[70,1298,1299],{"class":72,"line":73},[70,1300,1302],{"class":1301},"snpHw","#!/usr/bin/env bash\n",[70,1304,1305,1309,1313],{"class":72,"line":160},[70,1306,1308],{"class":1307},"sYf5A","set",[70,1310,1312],{"class":1311},"s7s5_"," -euo",[70,1314,1315],{"class":419}," pipefail\n",[70,1317,1318,1321,1324,1327,1331,1334,1337,1340,1343,1345,1348,1351,1354,1357,1360],{"class":72,"line":167},[70,1319,1320],{"class":80},"INPUT",[70,1322,1323],{"class":413},"=",[70,1325,1326],{"class":419},"\"",[70,1328,1330],{"class":1329},"sW0Xf","${1",[70,1332,1333],{"class":413},":?",[70,1335,1336],{"class":80},"usage",[70,1338,1339],{"class":413},":",[70,1341,1342],{"class":80}," script",[70,1344,1130],{"class":419},[70,1346,1347],{"class":80},"sh",[70,1349,1350],{"class":419}," \u003C",[70,1352,1353],{"class":80},"input-video",[70,1355,1356],{"class":419},">",[70,1358,1359],{"class":1329},"}",[70,1361,1362],{"class":419},"\"\n",[70,1364,1365,1368,1370,1372,1375,1378,1381,1383,1386,1388],{"class":72,"line":175},[70,1366,1367],{"class":80},"OUTPUT",[70,1369,1323],{"class":413},[70,1371,1326],{"class":419},[70,1373,1374],{"class":1329},"${2",[70,1376,1377],{"class":413},":-",[70,1379,1380],{"class":80},"output",[70,1382,1130],{"class":419},[70,1384,1385],{"class":80},"gif",[70,1387,1359],{"class":1329},[70,1389,1362],{"class":419},[70,1391,1392],{"class":72,"line":183},[70,1393,164],{"emptyLinePlaceholder":163},[70,1395,1396],{"class":72,"line":191},[70,1397,1398],{"class":1301},"# 1. build an optimized palette from the video\n",[70,1400,1401,1403,1406,1409,1412,1414,1417,1420,1423],{"class":72,"line":340},[70,1402,1271],{"class":76},[70,1404,1405],{"class":1311}," -i",[70,1407,1408],{"class":419}," \"",[70,1410,1411],{"class":80},"$INPUT",[70,1413,1326],{"class":419},[70,1415,1416],{"class":1311}," -vf",[70,1418,1419],{"class":419}," \"fps=12,scale=-1:420:flags=lanczos,palettegen=max_colors=64\"",[70,1421,1422],{"class":1311}," -y",[70,1424,1425],{"class":419}," palette.png\n",[70,1427,1428],{"class":72,"line":352},[70,1429,164],{"emptyLinePlaceholder":163},[70,1431,1432],{"class":72,"line":364},[70,1433,1434],{"class":1301},"# 2. render the gif using that palette\n",[70,1436,1437,1439,1441,1443,1445,1447,1449,1452,1455,1458,1460,1462,1465],{"class":72,"line":375},[70,1438,1271],{"class":76},[70,1440,1405],{"class":1311},[70,1442,1408],{"class":419},[70,1444,1411],{"class":80},[70,1446,1326],{"class":419},[70,1448,1405],{"class":1311},[70,1450,1451],{"class":419}," palette.png",[70,1453,1454],{"class":1311}," -lavfi",[70,1456,1457],{"class":419}," \"fps=12,scale=-1:420:flags=lanczos[x];[x][1:v]paletteuse\"",[70,1459,1422],{"class":1311},[70,1461,1408],{"class":419},[70,1463,1464],{"class":80},"$OUTPUT",[70,1466,1362],{"class":419},[70,1468,1469],{"class":72,"line":381},[70,1470,164],{"emptyLinePlaceholder":163},[70,1472,1473],{"class":72,"line":474},[70,1474,1475],{"class":1301},"# 3. clean up\n",[70,1477,1478,1481,1484],{"class":72,"line":480},[70,1479,1480],{"class":76},"rm",[70,1482,1483],{"class":1311}," -f",[70,1485,1425],{"class":419},[11,1487,1488,1489,1491,1492,1495],{},"Then inside ",[67,1490,63],{},", I simply reference it with ",[67,1493,1494],{},"${CLAUDE_SKILL_DIR}"," so the path works no matter where the skill is invoked from:",[59,1497,1499],{"className":61,"code":1498,"language":64,"meta":65,"style":65},"Run `${CLAUDE_SKILL_DIR}/script.sh \u003Crecording.mov>` to produce the GIF.\n",[67,1500,1501],{"__ignoreMap":65},[70,1502,1503,1506,1509],{"class":72,"line":73},[70,1504,1505],{"class":80},"Run ",[70,1507,1508],{"class":84},"`${CLAUDE_SKILL_DIR}/script.sh \u003Crecording.mov>`",[70,1510,1511],{"class":80}," to produce the GIF.\n",[11,1513,1514],{},"The script gets executed, not pasted into the conversation, so it doesn't consume context. The agent simply runs it, captures the result, and moves on.",[11,1516,1517],{},"Anything mechanical and deterministic belongs in a script anyway. It's faster, cheaper, and usually more reliable than asking the model to work out the same commands from scratch every single time.",[1232,1519,1521],{"id":1520},"tip-2-skills-can-load-reference-files","Tip 2: Skills Can Load Reference Files",[11,1523,1524],{},"The same idea works for knowledge.",[11,1526,1527,1528,1130],{},"If a skill depends on a long reference—API documentation, a style guide, naming conventions, or some giant formatting spec—you don't have to cram it all into ",[67,1529,63],{},[11,1531,1532],{},"Instead, drop it into a dedicated file and reference it:",[59,1534,1536],{"className":61,"code":1535,"filename":63,"language":64,"meta":65,"style":65},"- If the project uses React, follow [react_rules.md](react_rules.md).\n- If the project uses Vue, use [vue_rules.md](vue_rules.md) instead.\n",[67,1537,1538,1556],{"__ignoreMap":65},[70,1539,1540,1542,1545,1548,1551,1553],{"class":72,"line":73},[70,1541,77],{"class":76},[70,1543,1544],{"class":80}," If the project uses React, follow [",[70,1546,1547],{"class":1311},"react_rules.md",[70,1549,1550],{"class":80},"](",[70,1552,1547],{"class":419},[70,1554,1555],{"class":80},").\n",[70,1557,1558,1560,1563,1566,1568,1570],{"class":72,"line":160},[70,1559,77],{"class":76},[70,1561,1562],{"class":80}," If the project uses Vue, use [",[70,1564,1565],{"class":1311},"vue_rules.md",[70,1567,1550],{"class":80},[70,1569,1565],{"class":419},[70,1571,1572],{"class":80},") instead.\n",[11,1574,1575],{},"Claude only reads the file it actually needs.",[11,1577,1578,1579,1582,1583,1585],{},"This pattern is called ",[52,1580,1581],{},"progressive disclosure",". The body of ",[67,1584,63],{}," is loaded when the skill is invoked, and any referenced files are read only if the task actually requires them.",[11,1587,1588,1589,1591],{},"Anthropic recommends keeping ",[67,1590,63],{}," under 500 lines and pushing heavier details into supporting files. After using skills for a while, that advice makes a lot of sense.",[1232,1593,1595],{"id":1594},"tip-3-skills-can-pre-approve-tools","Tip 3: Skills Can Pre-Approve Tools",[11,1597,1598,1599,1602],{},"You can add an ",[67,1600,1601],{},"allowed-tools"," line in the frontmatter to pre-approve specific tools, so a mostly mechanical skill doesn't keep stopping to ask for permission.",[11,1604,1605],{},"This is especially useful for skills that always perform the same safe operations, like running checks, formatting code, or committing.",[59,1607,1609],{"className":61,"code":1608,"language":64,"meta":65,"style":65},"---\nname: commit\ndescription: Stage and commit the current changes with a concise message.\nallowed-tools: Bash(git add *) Bash(git commit *)\n---\n",[67,1610,1611,1615,1624,1633,1642],{"__ignoreMap":65},[70,1612,1613],{"class":72,"line":73},[70,1614,408],{"class":80},[70,1616,1617,1619,1621],{"class":72,"line":160},[70,1618,414],{"class":413},[70,1620,287],{"class":80},[70,1622,1623],{"class":419},"commit\n",[70,1625,1626,1628,1630],{"class":72,"line":167},[70,1627,425],{"class":413},[70,1629,287],{"class":80},[70,1631,1632],{"class":419},"Stage and commit the current changes with a concise message.\n",[70,1634,1635,1637,1639],{"class":72,"line":175},[70,1636,1601],{"class":413},[70,1638,287],{"class":80},[70,1640,1641],{"class":419},"Bash(git add *) Bash(git commit *)\n",[70,1643,1644],{"class":72,"line":183},[70,1645,408],{"class":80},[11,1647,1648,1649,1652],{},"The opposite works too: use the ",[67,1650,1651],{},"disallowed-tools"," field to block specific tools.",[1654,1655],"hr",{},[38,1657,1659],{"id":1658},"turning-a-repetitive-workflow-into-a-skill","Turning a Repetitive Workflow Into a Skill",[11,1661,1662,1663,1665],{},"Now, we can put all these tips into action to create our full ",[67,1664,91],{}," skill.",[11,1667,1668],{},"As I said at the beginning, the routine I got tired of looked something like this:",[123,1670,1671,1674,1677,1680,1683,1686],{},[126,1672,1673],{},"Branch off the default branch.",[126,1675,1676],{},"Stage the changes.",[126,1678,1679],{},"Read the full diff instead of trusting the commit messages.",[126,1681,1682],{},"With that information, write a descriptive title and short description.",[126,1684,1685],{},"Open the PR in GitHub.",[126,1687,1688],{},"Request a review from Copilot, GitHub's automated code review bot.",[11,1690,1691],{},"So let's turn that workflow into something the agent can execute.",[11,1693,1694,1695,1697],{},"Instead of cramming everything into one giant ",[67,1696,63],{},", let's split it into different files:",[59,1699,1702],{"className":1700,"code":1701,"language":1282,"meta":65},[1280],"📂 github-pr/\n├── 📄 SKILL.md\n├── 📄 pull_request_description_template.md\n└── ▶️ rebase.sh\n",[67,1703,1701],{"__ignoreMap":65},[123,1705,1706,1711,1717],{},[126,1707,1708,1710],{},[67,1709,63],{}," is the main recipe.",[126,1712,1713,1716],{},[67,1714,1715],{},"pull_request_description_template.md"," is the PR description base.",[126,1718,1719,1722],{},[67,1720,1721],{},"rebase.sh"," handles the one mechanical step that's worth scripting.",[11,1724,1725],{},"Let's review each, starting with the skill file:",[59,1727,1729],{"className":61,"code":1728,"filename":63,"language":64,"meta":65,"style":65},"---\nname: github-pr\ndescription: Create a GitHub PR with a concise description.\nallowed-tools: Bash(git *) Bash(gh pr create *)\n---\n\n# GitHub PR Skill\n\nOpen a pull request with a short, descriptive title and a clear description.\n\n## Usage\n\n`/github-pr \u003Ctarget-branch>`\n\n## Steps\n\n1. Find the default branch if no target was given:\n\n`git remote show origin | sed -n 's/.*HEAD branch: //p'`\n\n2. Move the current changes onto a fresh feature branch, on top of the latest target. Name the branch after the change (e.g. \"add-user-profile\", \"fix-cart-rounding\"):\n\n`${CLAUDE_SKILL_DIR}/rebase.sh \u003Ctarget> \u003Cfeature-branch>`\n\n3. Read the full diff so the description reflects what actually changed:\n\n`git diff \u003Ctarget>...HEAD`\n\n4. Draft the PR body from [pull_request_description_template.md](pull_request_description_template.md), filling it in from the diff. Keep the title concise and descriptive (\"Add user profile page\").\n\n5. Push the branch and open the PR:\n\n```sh\ngit push --set-upstream origin \"$(git branch --show-current)\"\ngh pr create --base \u003Ctarget> --title \"\u003Ctitle>\" --body-file - \u003C\u003C'EOF'\n\u003Cthe filled-in PR body>\nEOF\n```\n\n## Tone\n\nWrite plainly. No bold labels on bullets. No AI tells (\"seamlessly\", \"leverage\", \"robust\", \"ensures that\"). No hyphens or em dashes as sentence connectors.\n\n## Rules\n\n- No co-authors.\n- No screenshots.\n- Descriptive title required.\n",[67,1730,1731,1735,1744,1753,1762,1766,1770,1775,1779,1784,1788,1793,1797,1802,1806,1810,1814,1821,1825,1830,1834,1841,1845,1850,1854,1861,1865,1870,1874,1890,1894,1901,1905,1910,1938,1980,1985,1990,1994,1998,2003,2007,2012,2016,2021,2025,2032,2039],{"__ignoreMap":65},[70,1732,1733],{"class":72,"line":73},[70,1734,408],{"class":80},[70,1736,1737,1739,1741],{"class":72,"line":160},[70,1738,414],{"class":413},[70,1740,287],{"class":80},[70,1742,1743],{"class":419},"github-pr\n",[70,1745,1746,1748,1750],{"class":72,"line":167},[70,1747,425],{"class":413},[70,1749,287],{"class":80},[70,1751,1752],{"class":419},"Create a GitHub PR with a concise description.\n",[70,1754,1755,1757,1759],{"class":72,"line":175},[70,1756,1601],{"class":413},[70,1758,287],{"class":80},[70,1760,1761],{"class":419},"Bash(git *) Bash(gh pr create *)\n",[70,1763,1764],{"class":72,"line":183},[70,1765,408],{"class":80},[70,1767,1768],{"class":72,"line":191},[70,1769,164],{"emptyLinePlaceholder":163},[70,1771,1772],{"class":72,"line":340},[70,1773,1774],{"class":156},"# GitHub PR Skill\n",[70,1776,1777],{"class":72,"line":352},[70,1778,164],{"emptyLinePlaceholder":163},[70,1780,1781],{"class":72,"line":364},[70,1782,1783],{"class":80},"Open a pull request with a short, descriptive title and a clear description.\n",[70,1785,1786],{"class":72,"line":375},[70,1787,164],{"emptyLinePlaceholder":163},[70,1789,1790],{"class":72,"line":381},[70,1791,1792],{"class":156},"## Usage\n",[70,1794,1795],{"class":72,"line":474},[70,1796,164],{"emptyLinePlaceholder":163},[70,1798,1799],{"class":72,"line":480},[70,1800,1801],{"class":84},"`/github-pr \u003Ctarget-branch>`\n",[70,1803,1804],{"class":72,"line":485},[70,1805,164],{"emptyLinePlaceholder":163},[70,1807,1808],{"class":72,"line":496},[70,1809,836],{"class":156},[70,1811,1812],{"class":72,"line":507},[70,1813,164],{"emptyLinePlaceholder":163},[70,1815,1816,1818],{"class":72,"line":518},[70,1817,845],{"class":76},[70,1819,1820],{"class":80}," Find the default branch if no target was given:\n",[70,1822,1823],{"class":72,"line":525},[70,1824,164],{"emptyLinePlaceholder":163},[70,1826,1827],{"class":72,"line":536},[70,1828,1829],{"class":84},"`git remote show origin | sed -n 's/.*HEAD branch: //p'`\n",[70,1831,1832],{"class":72,"line":547},[70,1833,164],{"emptyLinePlaceholder":163},[70,1835,1836,1838],{"class":72,"line":558},[70,1837,859],{"class":76},[70,1839,1840],{"class":80}," Move the current changes onto a fresh feature branch, on top of the latest target. Name the branch after the change (e.g. \"add-user-profile\", \"fix-cart-rounding\"):\n",[70,1842,1843],{"class":72,"line":567},[70,1844,164],{"emptyLinePlaceholder":163},[70,1846,1847],{"class":72,"line":572},[70,1848,1849],{"class":84},"`${CLAUDE_SKILL_DIR}/rebase.sh \u003Ctarget> \u003Cfeature-branch>`\n",[70,1851,1852],{"class":72,"line":577},[70,1853,164],{"emptyLinePlaceholder":163},[70,1855,1856,1858],{"class":72,"line":583},[70,1857,871],{"class":76},[70,1859,1860],{"class":80}," Read the full diff so the description reflects what actually changed:\n",[70,1862,1863],{"class":72,"line":588},[70,1864,164],{"emptyLinePlaceholder":163},[70,1866,1867],{"class":72,"line":594},[70,1868,1869],{"class":84},"`git diff \u003Ctarget>...HEAD`\n",[70,1871,1872],{"class":72,"line":599},[70,1873,164],{"emptyLinePlaceholder":163},[70,1875,1876,1878,1881,1883,1885,1887],{"class":72,"line":605},[70,1877,879],{"class":76},[70,1879,1880],{"class":80}," Draft the PR body from [",[70,1882,1715],{"class":1311},[70,1884,1550],{"class":80},[70,1886,1715],{"class":419},[70,1888,1889],{"class":80},"), filling it in from the diff. Keep the title concise and descriptive (\"Add user profile page\").\n",[70,1891,1892],{"class":72,"line":610},[70,1893,164],{"emptyLinePlaceholder":163},[70,1895,1896,1898],{"class":72,"line":616},[70,1897,898],{"class":76},[70,1899,1900],{"class":80}," Push the branch and open the PR:\n",[70,1902,1903],{"class":72,"line":621},[70,1904,164],{"emptyLinePlaceholder":163},[70,1906,1907],{"class":72,"line":633},[70,1908,1909],{"class":80},"```sh\n",[70,1911,1912,1915,1918,1921,1924,1927,1929,1932,1935],{"class":72,"line":638},[70,1913,1914],{"class":76},"git",[70,1916,1917],{"class":419}," push",[70,1919,1920],{"class":1311}," --set-upstream",[70,1922,1923],{"class":419}," origin",[70,1925,1926],{"class":419}," \"$(",[70,1928,1914],{"class":76},[70,1930,1931],{"class":419}," branch ",[70,1933,1934],{"class":1311},"--show-current",[70,1936,1937],{"class":419},")\"\n",[70,1939,1940,1943,1946,1949,1952,1954,1957,1960,1962,1965,1968,1971,1974,1977],{"class":72,"line":644},[70,1941,1942],{"class":76},"gh",[70,1944,1945],{"class":419}," pr",[70,1947,1948],{"class":419}," create",[70,1950,1951],{"class":1311}," --base",[70,1953,1350],{"class":413},[70,1955,1956],{"class":419},"targe",[70,1958,1959],{"class":80},"t",[70,1961,1356],{"class":413},[70,1963,1964],{"class":1311}," --title",[70,1966,1967],{"class":419}," \"\u003Ctitle>\"",[70,1969,1970],{"class":1311}," --body-file",[70,1972,1973],{"class":419}," -",[70,1975,1976],{"class":413}," \u003C\u003C",[70,1978,1979],{"class":80},"'EOF'\n",[70,1981,1982],{"class":72,"line":649},[70,1983,1984],{"class":419},"\u003Cthe filled-in PR body>\n",[70,1986,1987],{"class":72,"line":655},[70,1988,1989],{"class":80},"EOF\n",[70,1991,1992],{"class":72,"line":660},[70,1993,580],{"class":80},[70,1995,1996],{"class":72,"line":666},[70,1997,164],{"emptyLinePlaceholder":163},[70,1999,2000],{"class":72,"line":671},[70,2001,2002],{"class":156},"## Tone\n",[70,2004,2005],{"class":72,"line":677},[70,2006,164],{"emptyLinePlaceholder":163},[70,2008,2009],{"class":72,"line":682},[70,2010,2011],{"class":80},"Write plainly. No bold labels on bullets. No AI tells (\"seamlessly\", \"leverage\", \"robust\", \"ensures that\"). No hyphens or em dashes as sentence connectors.\n",[70,2013,2014],{"class":72,"line":688},[70,2015,164],{"emptyLinePlaceholder":163},[70,2017,2018],{"class":72,"line":693},[70,2019,2020],{"class":156},"## Rules\n",[70,2022,2023],{"class":72,"line":699},[70,2024,164],{"emptyLinePlaceholder":163},[70,2026,2027,2029],{"class":72,"line":704},[70,2028,77],{"class":76},[70,2030,2031],{"class":80}," No co-authors.\n",[70,2033,2034,2036],{"class":72,"line":710},[70,2035,77],{"class":76},[70,2037,2038],{"class":80}," No screenshots.\n",[70,2040,2041,2043],{"class":72,"line":715},[70,2042,77],{"class":76},[70,2044,2045],{"class":80}," Descriptive title required.\n",[11,2047,2048,2049,2052,2053],{},"Notice how the skill itself stays small. The real work lives in the pieces around it, which are much easier to maintain on their own: the ",[52,2050,2051],{},"script"," and the ",[52,2054,2055],{},"template.",[11,2057,2058,2059],{},"Here's the ",[52,2060,2061],{},"script:",[59,2063,2065],{"className":1292,"code":2064,"filename":1721,"language":1294,"meta":65,"style":65},"#!/usr/bin/env bash\n# Move the current local changes onto a fresh feature branch,\n# on top of the latest version of the target branch.\n# Usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>\nset -euo pipefail\n\nTARGET=\"${1:?usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>}\"\nBRANCH=\"${2:?usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>}\"\n\ngit stash push --include-untracked --message \"github-pr wip\" || true\ngit checkout \"$TARGET\"\ngit pull --ff-only\ngit checkout -b \"$BRANCH\"\ngit stash pop || true\n",[67,2066,2067,2071,2076,2081,2086,2094,2098,2139,2176,2180,2204,2218,2228,2244],{"__ignoreMap":65},[70,2068,2069],{"class":72,"line":73},[70,2070,1302],{"class":1301},[70,2072,2073],{"class":72,"line":160},[70,2074,2075],{"class":1301},"# Move the current local changes onto a fresh feature branch,\n",[70,2077,2078],{"class":72,"line":167},[70,2079,2080],{"class":1301},"# on top of the latest version of the target branch.\n",[70,2082,2083],{"class":72,"line":175},[70,2084,2085],{"class":1301},"# Usage: rebase.sh \u003Ctarget-branch> \u003Cfeature-branch>\n",[70,2087,2088,2090,2092],{"class":72,"line":183},[70,2089,1308],{"class":1307},[70,2091,1312],{"class":1311},[70,2093,1315],{"class":419},[70,2095,2096],{"class":72,"line":191},[70,2097,164],{"emptyLinePlaceholder":163},[70,2099,2100,2103,2105,2107,2109,2111,2113,2115,2118,2120,2122,2124,2127,2130,2133,2135,2137],{"class":72,"line":340},[70,2101,2102],{"class":80},"TARGET",[70,2104,1323],{"class":413},[70,2106,1326],{"class":419},[70,2108,1330],{"class":1329},[70,2110,1333],{"class":413},[70,2112,1336],{"class":80},[70,2114,1339],{"class":413},[70,2116,2117],{"class":80}," rebase",[70,2119,1130],{"class":419},[70,2121,1347],{"class":80},[70,2123,1350],{"class":419},[70,2125,2126],{"class":80},"target-branch",[70,2128,2129],{"class":419},"> \u003C",[70,2131,2132],{"class":80},"feature-branch",[70,2134,1356],{"class":419},[70,2136,1359],{"class":1329},[70,2138,1362],{"class":419},[70,2140,2141,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174],{"class":72,"line":352},[70,2142,2143],{"class":80},"BRANCH",[70,2145,1323],{"class":413},[70,2147,1326],{"class":419},[70,2149,1374],{"class":1329},[70,2151,1333],{"class":413},[70,2153,1336],{"class":80},[70,2155,1339],{"class":413},[70,2157,2117],{"class":80},[70,2159,1130],{"class":419},[70,2161,1347],{"class":80},[70,2163,1350],{"class":419},[70,2165,2126],{"class":80},[70,2167,2129],{"class":419},[70,2169,2132],{"class":80},[70,2171,1356],{"class":419},[70,2173,1359],{"class":1329},[70,2175,1362],{"class":419},[70,2177,2178],{"class":72,"line":364},[70,2179,164],{"emptyLinePlaceholder":163},[70,2181,2182,2184,2187,2189,2192,2195,2198,2201],{"class":72,"line":375},[70,2183,1914],{"class":76},[70,2185,2186],{"class":419}," stash",[70,2188,1917],{"class":419},[70,2190,2191],{"class":1311}," --include-untracked",[70,2193,2194],{"class":1311}," --message",[70,2196,2197],{"class":419}," \"github-pr wip\"",[70,2199,2200],{"class":413}," ||",[70,2202,2203],{"class":1307}," true\n",[70,2205,2206,2208,2211,2213,2216],{"class":72,"line":381},[70,2207,1914],{"class":76},[70,2209,2210],{"class":419}," checkout",[70,2212,1408],{"class":419},[70,2214,2215],{"class":80},"$TARGET",[70,2217,1362],{"class":419},[70,2219,2220,2222,2225],{"class":72,"line":474},[70,2221,1914],{"class":76},[70,2223,2224],{"class":419}," pull",[70,2226,2227],{"class":1311}," --ff-only\n",[70,2229,2230,2232,2234,2237,2239,2242],{"class":72,"line":480},[70,2231,1914],{"class":76},[70,2233,2210],{"class":419},[70,2235,2236],{"class":1311}," -b",[70,2238,1408],{"class":419},[70,2240,2241],{"class":80},"$BRANCH",[70,2243,1362],{"class":419},[70,2245,2246,2248,2250,2253,2255],{"class":72,"line":485},[70,2247,1914],{"class":76},[70,2249,2186],{"class":419},[70,2251,2252],{"class":419}," pop",[70,2254,2200],{"class":413},[70,2256,2203],{"class":1307},[11,2258,2259,2260,2263],{},"And here's the ",[52,2261,2262],{},"template"," all PR descriptions must follow:",[59,2265,2267],{"className":61,"code":2266,"filename":1715,"language":64,"meta":65,"style":65},"## What\n\n[One sentence: what this PR does.]\n\n## Changes\n\n- [One bullet per meaningful behavior change]\n\n## How to test\n\n1. [Step by step, so a reviewer can verify it]\n",[67,2268,2269,2274,2278,2283,2287,2292,2296,2303,2307,2312,2316],{"__ignoreMap":65},[70,2270,2271],{"class":72,"line":73},[70,2272,2273],{"class":156},"## What\n",[70,2275,2276],{"class":72,"line":160},[70,2277,164],{"emptyLinePlaceholder":163},[70,2279,2280],{"class":72,"line":167},[70,2281,2282],{"class":80},"[One sentence: what this PR does.]\n",[70,2284,2285],{"class":72,"line":175},[70,2286,164],{"emptyLinePlaceholder":163},[70,2288,2289],{"class":72,"line":183},[70,2290,2291],{"class":156},"## Changes\n",[70,2293,2294],{"class":72,"line":191},[70,2295,164],{"emptyLinePlaceholder":163},[70,2297,2298,2300],{"class":72,"line":340},[70,2299,77],{"class":76},[70,2301,2302],{"class":80}," [One bullet per meaningful behavior change]\n",[70,2304,2305],{"class":72,"line":352},[70,2306,164],{"emptyLinePlaceholder":163},[70,2308,2309],{"class":72,"line":364},[70,2310,2311],{"class":156},"## How to test\n",[70,2313,2314],{"class":72,"line":375},[70,2315,164],{"emptyLinePlaceholder":163},[70,2317,2318,2320],{"class":72,"line":381},[70,2319,845],{"class":76},[70,2321,2322],{"class":80}," [Step by step, so a reviewer can verify it]\n",[11,2324,2325,2326,2328],{},"Now I just type ",[67,2327,973],{}," once my code is ready for review. And boom! The PR gets created.",[11,2330,2331],{},"The skill rebases the work, reads the diff, fills in the template, and opens the PR using the description format I like. The skill knows how I like my branches named, how I want PRs written, and what I don't want in the final output. All those little preferences I used to retype, now baked into something the agent just follows.",[1654,2333],{},[38,2335,2337],{"id":2336},"in-closing","In Closing",[11,2339,2340],{},"Skills can really make your day (and your clanker's!) way easier. I've been trying to lean into skills more and more as I find parts of my workflow that can be automated.",[11,2342,2343],{},"The more I use them, the less they feel like time-saving shortcuts and the more they feel like teaching the agent how I work.",[11,2345,2346,2347,2352],{},"To learn more about skills, visit the ",[46,2348,2351],{"href":2349,"rel":2350},"https://agentskills.io",[116],"Agent Skills"," website.",[11,2354,44,2355,2358],{},[46,2356,2357],{"href":1031},"the next article",", we'll look at a more advanced way of working with skills: how to stack and chain them together to take our automation to the next level.",[11,2360,2361],{},"Until next time!",[1013,2363,2364],{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .sYf5A, html code.shiki .sYf5A{--shiki-default:#66D9EF}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html pre.shiki code .sW0Xf, html code.shiki .sW0Xf{--shiki-default:#FD971F;--shiki-default-font-style:italic}html pre.shiki code .szGx7, html code.shiki .szGx7{--shiki-default:#FD971F}html pre.shiki code .ssRA_, html code.shiki .ssRA_{--shiki-default:#A6E22E;--shiki-default-font-weight:bold}",{"title":65,"searchDepth":160,"depth":160,"links":2366},[2367,2368,2373,2374],{"id":1093,"depth":160,"text":1094},{"id":1222,"depth":160,"text":1223,"children":2369},[2370,2371,2372],{"id":1234,"depth":167,"text":1235},{"id":1520,"depth":167,"text":1521},{"id":1594,"depth":167,"text":1595},{"id":1658,"depth":160,"text":1659},{"id":2336,"depth":160,"text":2337},"2026-07-08","If you keep giving your agent the same instructions over and over, write them down once as a skill and let it do the repetitive bits.","/img/blog/skills-i-know-kung-fu.png",{},{"title":1037,"description":2376},"blog/skills-i-know-kung-fu","ofnT_V552bv231JR8JZn6LX_1oEXMpEkTfGj3syw58U",{"id":2383,"title":2384,"body":2385,"category":1025,"date":2697,"description":2698,"draft":1028,"extension":64,"image":2699,"meta":2700,"navigation":163,"path":2701,"seo":2702,"stem":2703,"tighten":1028,"__hash__":2704},"blog/blog/did-webmasters-go-extinct.md","Did Webmasters Go Extinct?",{"type":8,"value":2386,"toc":2687},[2387,2398,2401,2406,2409,2414,2417,2420,2424,2431,2438,2441,2444,2447,2450,2456,2459,2463,2466,2471,2474,2477,2488,2495,2498,2501,2505,2508,2513,2516,2519,2522,2526,2529,2534,2537,2547,2550,2557,2595,2602,2605,2612,2616,2623,2628,2637,2640,2654,2661,2671,2674,2678,2681,2684],[11,2388,2389,2390,2393,2394,2397],{},"Imagine you meet a few developer friends after work. You grab a table at a bar, the first round arrives, and within about ninety seconds the conversation drifts to... ",[52,2391,2392],{},"AI."," It always does these days! AI is in every keynote, every group chat, every standup, and all over social media. It feels like the ",[256,2395,2396],{},"only thing"," any of us can talk about.",[11,2399,2400],{},"And for good reason. It has genuinely changed the way we work, and got all of us asking the same questions:",[15,2402,2403],{},[11,2404,2405],{},"What does this mean for me? How do I keep up? Should I lean into it, or hold out a little longer? Is it even safe? If I don't code anymore... what exactly do I do?",[11,2407,2408],{},"And sitting underneath all of those smaller questions, quietly, is the big one:",[15,2410,2411],{},[11,2412,2413],{},"Will AI take my job?",[11,2415,2416],{},"Heck, perhaps some of you have already been directly affected by AI in some capacity.",[11,2418,2419],{},"It's something that worries me just as much as it worries you, so let me share where I've landed and how I see it. But first, a little bit of nostalgia.",[38,2421,2423],{"id":2422},"i-was-a-webmaster","I Was a Webmaster",[11,2425,2426,2427,2430],{},"Decades ago, I was a ",[52,2428,2429],{},"webmaster."," Show of hands: how many of you even remember that word?",[11,2432,2433,2434,2437],{},"At the turn of the millennium, the webmaster was simply the person who made the website. Not just the frontend, or just the backend: ",[256,2435,2436],{},"the website."," One human being, start to finish. And that was possible because, back then, the web was a much smaller, much simpler creature.",[11,2439,2440],{},"Put something together in Photoshop, slice the design into images, conjure up HTML in Dreamweaver, and off you go! FTP those files to a shared hosting account and you're done.",[11,2442,2443],{},"I started toying around with websites when I got my first computer, in 2000. I still remember the first time I clicked that mysterious button in Internet Explorer 6. \"Edit in Microsoft FrontPage,\" the tooltip said. One click later, a clone of that page was sitting there, editable, right in front of me. And in another tab... the source code: HTML packed with tables and hacks.",[11,2445,2446],{},"Before I really understood what was happening, I was building sites for other people and getting paid for it. Not much, but who could ask for more? Building web stuff and getting paid, awesome!",[11,2448,2449],{},"The stack I worked with would be unrecognizable today. I fought to make my pages behave in Internet Explorer 6, 7, and 8. I built Flash intros and Flash sites (sorry, that was the trend). And when a project needed a little more muscle, I'd reach for WordPress and just enough PHP to make things dynamic and editable by the client.",[11,2451,2452,2453,2455],{},"All that made me a ",[52,2454,2429],{}," Clunky title, I know, but that was the word.",[11,2457,2458],{},"Now, do me a favor. Open a job board today and search for \"webmaster.\" Not a single posting, right? Sad. What happened?",[1232,2460,2462],{"id":2461},"the-day-webmasters-were-gone","The Day Webmasters Were Gone",[11,2464,2465],{},"At this point you're probably thinking:",[15,2467,2468],{},[11,2469,2470],{},"Sure, Nico, webmaster is a fossil of a word, and you, my friend, are old. Nobody calls a web developer a webmaster anymore.",[11,2472,2473],{},"And... you're right! That's exactly my point.",[11,2475,2476],{},"Did the webmasters go extinct? Did a meteor streak across the sky one Tuesday and wipe them and their Flash sites off the face of the Earth?",[11,2478,2479,2480,2483,2484,2487],{},"Of course not. ",[52,2481,2482],{},"We evolved."," Most of us are still around, just wearing different names on our LinkedIn profiles. We changed because the web changed, and it changed fast. All of a sudden, the simple HTML with its cute ",[67,2485,2486],{},"\u003Cmarquee>"," tags didn't cut it anymore, and there was no jQuery plugin to save us. Frameworks showed up and multiplied: Angular, then React, then Vue. JavaScript climbed out of the browser and onto the server with Node, and from there the toolbox just kept growing, from Webpack to Vite and from CoffeeScript to modern TypeScript. We can look back with nostalgia. The takeaway is obvious: things change.",[11,2489,2490,2491,2494],{},"And I had to learn every part of it as it arrived, whether I wanted to or not. I resented plenty of it at first. If in 2014 you were fast and happy with jQuery, Backbone, and Marionette, and someone parachuted you onto an Angular project, believe me, you felt the whiplash. \"Come on, why?\" But that resistance, that little wall of ",[256,2492,2493],{},"I don't want to learn a new thing right now",", is a wall you learn to climb over again and again, because the alternative is standing still while the industry walks off without you. That's just the nature of the game.",[11,2496,2497],{},"So the single title splintered into many: backend developer, frontend developer, DevOps, QA. Of course, some webmasters closed the laptop and went off to open a beach bar. But a huge number of us simply adapted, and I'm one of them. I'm a full-stack developer today, I was a webmaster yesterday, and I've been doing this for more than fifteen years. Twenty-six, really, if you count back to that fifteen-year-old kid poking around in FrontPage in 2000.",[11,2499,2500],{},"And it will keep going. The tools will keep shifting under our feet, because that is the one constant of this whole industry. Technology evolves, and we evolve with it, or we don't get to keep playing.",[38,2502,2504],{"id":2503},"which-brings-us-back-to-ai","Which Brings Us Back to AI",[11,2506,2507],{},"Here's the thing I most want you to carry away from this article, the single sentence I'd tattoo across this whole conversation if I could:",[11,2509,2510],{},[52,2511,2512],{},"AI is here to shake up the market and rewrite how we work, but it will not take your place if you evolve.",[11,2514,2515],{},"That's the entire message. Evolve, and you stay in the game.",[11,2517,2518],{},"Yes, the name of your role will most likely change. Will you become an \"AI Coding Agent Wrangler\" or a \"Vibe Engineer\"? I wouldn't mind a business card that says \"Clanker Babysitter.\" We've all seen the crazy titles and silly job descriptions floating around. Take them with a grain of salt.",[11,2520,2521],{},"Because at the end of the day, what matters is what you actually bring to the table when it comes to solving a problem. And that was never just typing code.",[1232,2523,2525],{"id":2524},"you-were-never-just-a-coder","You Were Never Just a Coder",[11,2527,2528],{},"Tell me if you've heard, or even felt, this:",[15,2530,2531],{},[11,2532,2533],{},"AI is robbing me of the joy of coding.",[11,2535,2536],{},"I hear you. I kind of feel the same.",[11,2538,2539,2540,974,2543,2546],{},"I love writing code by hand, fussing over the shape of a function, crafting good-looking functions. Hey, I even enjoyed the ",[256,2541,2542],{},"tabs vs. spaces",[256,2544,2545],{},"semicolons vs. no semicolons"," wars!",[11,2548,2549],{},"For me, coding was never a chore. It's the fun part, a little puzzle I'm genuinely happy to sit inside for an afternoon. And now here comes this new reality where you open your editor, paste in a spec, and watch an agent spit out in thirty seconds the code you would've lovingly typed out over the next hour. If that stings a little, if it feels like something you enjoyed is being taken away, you're not wrong and you're not alone. Some mornings it gets me too.",[11,2551,2552,2553,2556],{},"But your job, your real job as an engineer and a problem-solver, ",[52,2554,2555],{},"was never just the act of typing characters into a file."," Coding was a part of it, often the most enjoyable part, but never the whole of it. Zoom out and the actual work has always looked more like this:",[123,2558,2559,2565,2571,2577,2583,2589],{},[126,2560,2561,2564],{},[52,2562,2563],{},"Research:"," Figuring out what's possible and what others have already solved.",[126,2566,2567,2570],{},[52,2568,2569],{},"Planning and specs:"," Deciding what problem we're truly here to fix, and for whom.",[126,2572,2573,2576],{},[52,2574,2575],{},"Coding:"," Turning all of that thinking into real, running source code. The fun part, I'll happily admit.",[126,2578,2579,2582],{},[52,2580,2581],{},"Code review:"," Reading your teammates' pull requests, following the open PRs on an open source project, and judging what's ready to ship.",[126,2584,2585,2588],{},[52,2586,2587],{},"Testing:"," Writing an automated test suite, or clicking through the app by hand until you trust it.",[126,2590,2591,2594],{},[52,2592,2593],{},"Documentation:"," The one we all mumble past (\"yeah... the docs are pending, but it works\").",[11,2596,2597,2598,2601],{},"We did all six, but let's be honest about the balance: we poured most of our hours into that third bullet and sprinted through the rest. And ",[256,2599,2600],{},"that ratio"," is precisely what AI is rearranging.",[11,2603,2604],{},"This isn't the end of writing code. We'll still write plenty. But if before you spent, say, 70% of the week producing code and 30% on everything around it, the new you may find that balance flipping on its head. Less time typing code, more time reading and reviewing the code an agent produced while you were busy elsewhere.",[11,2606,2607,2608,2611],{},"And ",[52,2609,2610],{},"reviewing"," is the step where I watch a lot of people quietly fumble the whole thing.",[38,2613,2615],{"id":2614},"a-recipe-for-disaster","A Recipe for Disaster",[11,2617,2618,2619,2622],{},"Some developers have started letting the agent write the code and then merging it without ever really reading it. That's the ",[256,2620,2621],{},"vibe coding"," mantra, right?",[15,2624,2625],{},[11,2626,2627],{},"There's a new kind of coding I call \"vibe coding,\" where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. (Andrej Karpathy, Feb. 2025)",[11,2629,2630,2631,2636],{},"In that ",[46,2632,2635],{"href":2633,"rel":2634},"https://x.com/karpathy/status/1886192184808149383?lang=en",[116],"famous tweet,"," Karpathy says vibe coding isn't too bad for throwaway weekend projects. Fast forward to today, and you have companies shipping vibe-coded PRs into production like there's no tomorrow.",[11,2638,2639],{},"That's a mistake, and a costly one.",[11,2641,2642,2643,2646,2647,2650,2651],{},"Think about what you're actually doing when you build software. You're solving a ",[256,2644,2645],{},"real problem"," for ",[256,2648,2649],{},"real people",". So when something breaks at the worst possible moment, the agent is not the one who gets the phone call. The agent doesn't lose sleep, doesn't answer to the client, and doesn't carry the responsibility. ",[52,2652,2653],{},"You do.",[11,2655,2656,2657,2660],{},"When your customer loads the page and gets a big, ugly 500 error, \"Sorry, perhaps Claude merged a PR with a bug\" is not a sentence that will save you. You're still the one who has to take responsibility, fix the problem, and explain what went wrong. By all means, use AI to help you fix it, but understand that the accountability ",[256,2658,2659],{},"never left your desk"," and never will.",[11,2662,2663,2666,2667,2670],{},[52,2664,2665],{},"So don't skip the review."," Read what the agent produced with the same care you'd give a coworker's pull request, the same care you brought the first time you inherited a stranger's codebase and had to understand it before you dared touch it. ",[52,2668,2669],{},"You already own this skill."," Nothing new is being asked of you here except a shift in where your hours go: a little less typing into a blank file, a lot more reading with a critical eye.",[11,2672,2673],{},"That shift is the whole point, and leaning into it is what turns AI from a rival into an ally. Meet it there, and it stops being the thing coming for your job and becomes the thing that helps you get to the finish line faster.",[38,2675,2677],{"id":2676},"so-whats-next","So What's Next?",[11,2679,2680],{},"It doesn't matter whether you're the nervous friend at the bar who suspects AI is coming for everything, or the one who's already automated half of their week away. The move in front of you is the same one webmasters had to make twenty years ago: pick up the new tools, figure out how to make them work for you, and evolve.",[11,2682,2683],{},"Because no, AI is not going to take your job. But refusing to learn it just might leave you a step slower than the developer sitting at the next desk, someone no more talented than you who simply embraced the power-up.",[11,2685,2686],{},"Now, I have to go. A client asked for a Flash intro. Until next time!",{"title":65,"searchDepth":160,"depth":160,"links":2688},[2689,2692,2695,2696],{"id":2422,"depth":160,"text":2423,"children":2690},[2691],{"id":2461,"depth":167,"text":2462},{"id":2503,"depth":160,"text":2504,"children":2693},[2694],{"id":2524,"depth":167,"text":2525},{"id":2614,"depth":160,"text":2615},{"id":2676,"depth":160,"text":2677},"2026-07-07","AI is everywhere, and so is the question hiding underneath it: will it take my job? Here's what I think.","/img/blog/did-webmasters-go-extinct.png",{},"/blog/did-webmasters-go-extinct",{"title":2384,"description":2698},"blog/did-webmasters-go-extinct","yHuPiZXtrYCR9CMGxT63ob2g3mczN2cUX49tLdPUhFE",{"id":2706,"title":2707,"body":2708,"category":5945,"date":5946,"description":5947,"draft":1028,"extension":64,"image":5948,"meta":5949,"navigation":163,"path":5950,"seo":5951,"stem":5952,"tighten":1028,"__hash__":5953},"blog/blog/building-a-platformer-game-with-vue-and-pixijs.md","Building a Platformer Game with Vue and PixiJS",{"type":8,"value":2709,"toc":5928},[2710,2713,2724,2731,2745,2748,2751,2759,2763,2766,2773,2776,2782,2793,2797,2803,2862,2870,2876,2883,2888,2906,2909,2913,2916,2923,2926,2933,2944,2954,3089,3108,3111,3117,3123,3128,3131,3137,3141,3144,3151,3157,3167,3174,3177,3187,3190,3194,3199,3210,3221,3333,3342,3355,3364,3368,3377,3384,3550,3556,3757,3779,3782,3804,3813,3816,3820,3831,3836,3839,3843,3858,3873,3884,3964,3986,3993,3997,4004,4007,4038,4041,4159,4162,4170,4173,4176,4185,4199,4204,4214,4218,4229,4232,4427,4433,4598,4601,4608,4611,4697,4710,4717,4768,4778,4782,4785,4791,4798,4824,4835,5009,5029,5034,5041,5333,5339,5343,5346,5353,5563,5574,5577,5609,5612,5748,5765,5772,5791,5801,5811,5814,5818,5821,5891,5903,5905,5915,5923,5925],[11,2711,2712],{},"Like many of you, I spend my days building web apps: forms, dashboards, a couple of animations here and there.",[11,2714,2715,2716,2719,2720,2723],{},"Then, a few days ago, I watched a YouTube video of someone building a ",[52,2717,2718],{},"browser game",": a tiny platformer. You control a blue box, jumping over boxes and avoiding cannon shots. A few minutes into the tutorial, I realized: ",[256,2721,2722],{},"I have no idea how this works."," Loops, physics, collision math... it all sounded familiar, but very different from the reactive world I'm used to.",[11,2725,2726,2727,2730],{},"And a question popped up in my head: ",[52,2728,2729],{},"can I build a platformer game using Vue?"," Can my Vue skills help me in my game dev journey? Luckily, the answer to both questions is yes.",[11,2732,2733,2734,974,2737,2740,2741,2744],{},"I built a platformer game with ",[52,2735,2736],{},"Vue 3",[52,2738,2739],{},"PixiJS",", and almost every piece of it mapped to something you already do in Vue: a game loop is a watcher, game state is a ",[67,2742,2743],{},"ref",", the scene is a component tree, and so on.",[11,2746,2747],{},"So join me to discover how to do it! We'll walk through the seven ideas that make up every 2D game, each one paired with its Vue equivalent, with live demos you can poke at as we go.",[11,2749,2750],{},"Click this iframe to play: use the arrow keys to move and the spacebar to jump.",[2752,2753],"iframe",{"src":2754,"title":2755,"loading":2756,"scrolling":2757,"style":2758},"https://demo-vue-platformer.netlify.app/","A little platformer","lazy","no","width:100%;aspect-ratio:960/640;border:0;border-radius:16px;margin:1.5rem 0;display:block",[38,2760,2762],{"id":2761},"the-game-loop","The Game Loop",[11,2764,2765],{},"A single-page application re-renders only when the state changes. You want to minimize the number of times you repaint elements in the DOM. That's why we use the virtual DOM and other techniques to keep patching to a minimum. Touching the DOM is expensive, so we do it as little as possible.",[11,2767,2768,2769,2772],{},"In a game, that's totally different. Most likely you won't be dealing with DOM elements, but with a single ",[67,2770,2771],{},"\u003Ccanvas>",". The whole game takes place inside that canvas. The rendering model is completely different: the scene gets repainted continuously. At 60 frames per second, the canvas is redrawn 60 times every second. Each frame is a fresh snapshot, and when those snapshots come quickly enough, our eyes perceive motion.",[11,2774,2775],{},"But wait, isn't that... a lot? Recomputing everything, all the time, and repainting the whole scene many times per second? Well, yeah, that can sound like overkill in our DOM world, since we're used to waiting for specific events (a keystroke, a network response) and only re-rendering what we need.",[11,2777,2778,2779,2781],{},"But inside the ",[67,2780,2771],{},", things are different. It doesn't have a tree of expensive-to-patch elements. Instead, it's just a blank canvas that we can paint, clear, and repaint very quickly. This can still sound like a lot for a slow, turn-based game with only a few elements on screen. But once you introduce physics, collisions, or dozens of moving bullets, it makes sense to calculate where everything should be and paint it onto the canvas every frame.",[11,2783,2784,2785,2788,2789,2792],{},"And that's the game loop! The mindset shift is from ",[256,2786,2787],{},"event-driven"," to ",[256,2790,2791],{},"loop-driven",". Once that clicks, you're ready for game development.",[38,2794,2796],{"id":2795},"games-in-plain-javascript","Games in Plain JavaScript",[11,2798,2799,2800,1339],{},"In the browser, that loop is ",[67,2801,2802],{},"requestAnimationFrame",[59,2804,2808],{"className":2805,"code":2806,"language":2807,"meta":65,"style":65},"language-js shiki shiki-themes monokai","function loop() {\n  update()\n  render()\n\n  requestAnimationFrame(loop)\n}\n\nrequestAnimationFrame(loop)\n","js",[67,2809,2810,2821,2829,2836,2840,2848,2852,2856],{"__ignoreMap":65},[70,2811,2812,2815,2818],{"class":72,"line":73},[70,2813,2814],{"class":283},"function",[70,2816,2817],{"class":76}," loop",[70,2819,2820],{"class":80},"() {\n",[70,2822,2823,2826],{"class":72,"line":160},[70,2824,2825],{"class":76},"  update",[70,2827,2828],{"class":80},"()\n",[70,2830,2831,2834],{"class":72,"line":167},[70,2832,2833],{"class":76},"  render",[70,2835,2828],{"class":80},[70,2837,2838],{"class":72,"line":175},[70,2839,164],{"emptyLinePlaceholder":163},[70,2841,2842,2845],{"class":72,"line":183},[70,2843,2844],{"class":76},"  requestAnimationFrame",[70,2846,2847],{"class":80},"(loop)\n",[70,2849,2850],{"class":72,"line":191},[70,2851,384],{"class":80},[70,2853,2854],{"class":72,"line":340},[70,2855,164],{"emptyLinePlaceholder":163},[70,2857,2858,2860],{"class":72,"line":352},[70,2859,2802],{"class":76},[70,2861,2847],{"class":80},[11,2863,2864,2866,2867],{},[67,2865,2802],{}," is a browser API specifically designed for animations. Instead of asking JavaScript to run your code as fast as possible, you're asking the browser: ",[256,2868,2869],{},"\"Call this function right before you paint the next frame.\"",[11,2871,2872,2873,2875],{},"This is an important distinction. Browsers already have their own rendering pipeline. Roughly 60 times per second (or more on high-refresh-rate displays), they calculate layouts, paint pixels, and display a new frame on the screen. ",[67,2874,2802],{}," lets your code hook directly into that process, so your updates happen at exactly the right moment.",[11,2877,2878,2879,2882],{},"You could imagine replacing it with a ",[67,2880,2881],{},"setInterval"," running every 16 milliseconds, but that has a few problems. Timers aren't synchronized with the browser's rendering cycle, so they can fire too early, too late, or even while the browser is still busy painting the previous frame. That can lead to choppy animations and unnecessary work.",[11,2884,2885,2887],{},[67,2886,2802],{}," is also smarter than a timer. If the tab is hidden or minimized, the browser will automatically pause or greatly reduce how often your callback runs, saving CPU and battery life.",[11,2889,2890,2891,2893,2894,2897,2898,2901,2902,2905],{},"One thing to notice is that ",[67,2892,2802],{}," only schedules ",[52,2895,2896],{},"one"," callback. It doesn't automatically repeat. That's why the last line inside our ",[67,2899,2900],{},"loop()"," function is another call to ",[67,2903,2904],{},"requestAnimationFrame(loop)",". Each frame schedules the next one, creating an endless cycle that continues until we stop requesting new frames.",[11,2907,2908],{},"That's the foundation of nearly every browser game. Every frame, the browser says, \"It's time to draw again,\" your game updates its world, renders the result, and asks to be called back for the next frame.",[38,2910,2912],{"id":2911},"time-vs-frames","Time vs. Frames",[11,2914,2915],{},"There's one subtle problem, though.",[11,2917,2918,2919,2922],{},"We just said the browser calls our loop before every frame. But what exactly is ",[256,2920,2921],{},"a frame","?",[11,2924,2925],{},"If every screen refreshed exactly 60 times per second, life would be easy. We could move the player 5 pixels every frame and know they'd travel 300 pixels every second. But... the real world is messier.",[11,2927,2928,2929,2932],{},"Some players have 144Hz monitors. Others are on older laptops that can barely manage 30 FPS. Sometimes the browser gets busy for a moment and skips a frame. If we move everything by a fixed amount ",[52,2930,2931],{},"per frame",", then the game's speed becomes tied to the machine running it. Faster computers make the game run faster, slower ones make it run in slow motion.",[11,2934,2935,2936,2939,2940,2943],{},"What we really care about isn't ",[52,2937,2938],{},"how many frames"," have passed. We care about ",[52,2941,2942],{},"how much time"," has passed.",[11,2945,2946,2947,2950,2951,2953],{},"And that's where ",[52,2948,2949],{},"delta time"," comes in. Delta time is simply the amount of time that elapsed since the previous frame. Luckily, ",[67,2952,2802],{}," already gives us the current timestamp every time it calls our callback. By comparing it to the previous timestamp, we can calculate exactly how much time has passed:",[59,2955,2957],{"className":2805,"code":2956,"language":2807,"meta":65,"style":65},"let previousTime = 0\n\nfunction loop(currentTime) {\n  const elapsed = currentTime - previousTime\n  const deltaTime = elapsed / (1000 / 60)\n  previousTime = currentTime\n\n  update(deltaTime)\n  render()\n\n  requestAnimationFrame(loop)\n}\n\nrequestAnimationFrame(loop)\n",[67,2958,2959,2972,2976,2991,3009,3038,3048,3052,3059,3065,3069,3075,3079,3083],{"__ignoreMap":65},[70,2960,2961,2964,2967,2969],{"class":72,"line":73},[70,2962,2963],{"class":283},"let",[70,2965,2966],{"class":80}," previousTime ",[70,2968,1323],{"class":413},[70,2970,2971],{"class":1311}," 0\n",[70,2973,2974],{"class":72,"line":160},[70,2975,164],{"emptyLinePlaceholder":163},[70,2977,2978,2980,2982,2985,2988],{"class":72,"line":167},[70,2979,2814],{"class":283},[70,2981,2817],{"class":76},[70,2983,2984],{"class":80},"(",[70,2986,2987],{"class":1329},"currentTime",[70,2989,2990],{"class":80},") {\n",[70,2992,2993,2996,2999,3001,3004,3006],{"class":72,"line":175},[70,2994,2995],{"class":283},"  const",[70,2997,2998],{"class":80}," elapsed ",[70,3000,1323],{"class":413},[70,3002,3003],{"class":80}," currentTime ",[70,3005,77],{"class":413},[70,3007,3008],{"class":80}," previousTime\n",[70,3010,3011,3013,3016,3018,3020,3023,3026,3029,3032,3035],{"class":72,"line":183},[70,3012,2995],{"class":283},[70,3014,3015],{"class":80}," deltaTime ",[70,3017,1323],{"class":413},[70,3019,2998],{"class":80},[70,3021,3022],{"class":413},"/",[70,3024,3025],{"class":80}," (",[70,3027,3028],{"class":1311},"1000",[70,3030,3031],{"class":413}," /",[70,3033,3034],{"class":1311}," 60",[70,3036,3037],{"class":80},")\n",[70,3039,3040,3043,3045],{"class":72,"line":191},[70,3041,3042],{"class":80},"  previousTime ",[70,3044,1323],{"class":413},[70,3046,3047],{"class":80}," currentTime\n",[70,3049,3050],{"class":72,"line":340},[70,3051,164],{"emptyLinePlaceholder":163},[70,3053,3054,3056],{"class":72,"line":352},[70,3055,2825],{"class":76},[70,3057,3058],{"class":80},"(deltaTime)\n",[70,3060,3061,3063],{"class":72,"line":364},[70,3062,2833],{"class":76},[70,3064,2828],{"class":80},[70,3066,3067],{"class":72,"line":375},[70,3068,164],{"emptyLinePlaceholder":163},[70,3070,3071,3073],{"class":72,"line":381},[70,3072,2844],{"class":76},[70,3074,2847],{"class":80},[70,3076,3077],{"class":72,"line":474},[70,3078,384],{"class":80},[70,3080,3081],{"class":72,"line":480},[70,3082,164],{"emptyLinePlaceholder":163},[70,3084,3085,3087],{"class":72,"line":485},[70,3086,2802],{"class":76},[70,3088,2847],{"class":80},[11,3090,3091,3092,3095,3096,3099,3100,3103,3104,3107],{},"Here I'm also normalizing the value to a 60 FPS baseline. That means ",[67,3093,3094],{},"deltaTime"," is ",[67,3097,3098],{},"1.0"," at 60 FPS, ",[67,3101,3102],{},"2.0"," at 30 FPS, and ",[67,3105,3106],{},"0.5"," at 120 FPS.",[11,3109,3110],{},"Instead of saying, \"move 5 pixels every frame,\" we say, \"move 5 pixels, scaled by how long this frame took.\"",[11,3112,3113,3114,3116],{},"Multiply your movement by ",[67,3115,3094],{},", and suddenly your game behaves the same everywhere. The player covers the same distance per second whether the browser renders 30 frames or 144. Motion is based on real time, not frame count.",[11,3118,3119,3120,3122],{},"The demo below is a bare ",[67,3121,2802],{}," loop, running as you read this. Nothing is animating the count; the loop just keeps coming around.",[2752,3124],{"src":3125,"title":3126,"loading":2756,"scrolling":2757,"style":3127},"/demos/building-a-platformer-game-with-vue-and-pixijs/game-loop.html","A bare game loop counting frames","width:100%;height:200px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,3129,3130],{},"That counter is the whole engine underneath. The loop comes back around roughly 60 times a second whether your state changed or not. Every time it does, your game gets another opportunity to update the world, draw a new frame, and ask the browser to call it again.",[11,3132,3133,3134],{},"That's the fundamental shift from web development to game development. Instead of waiting for something to happen and reacting to it, you're continuously simulating the world. The loop never stops. It just keeps asking, ",[256,3135,3136],{},"\"What should the next frame look like?\"",[38,3138,3140],{"id":3139},"pixi-for-games-and-more","Pixi, for Games and More",[11,3142,3143],{},"So far, we've only been incrementing a counter. Drawing a game is a very different challenge.",[11,3145,3146,3147,3150],{},"Sure, you ",[256,3148,3149],{},"could"," use the Canvas 2D API directly, or even WebGL if you're feeling adventurous. But it doesn't take long before you're worrying about batching draw calls, managing textures, applying transforms, and solving a dozen rendering problems that have nothing to do with the game you actually want to build.",[11,3152,3153,3154,3156],{},"That's the layer ",[52,3155,2739],{}," takes care of.",[11,3158,3159,3160,3162,3163,3166],{},"PixiJS is a high-performance 2D rendering engine. It renders everything into an HTML ",[67,3161,2771],{},", using WebGL under the hood whenever possible, while exposing a friendly scene graph made up of sprites, containers, text, graphics, and other display objects. You tell Pixi ",[256,3164,3165],{},"what"," to draw; it figures out the fastest way to draw it.",[11,3168,3169,3170,3173],{},"Notice what Pixi ",[52,3171,3172],{},"doesn't"," do: It doesn't know what gravity is, it doesn't know how your enemies move, or whether your player won the game. That's our job. In other words, we have the control.",[11,3175,3176],{},"Pixi's responsibility is rendering, and it does that extremely well. That's why you'll find it powering not just games, but also interactive websites, visualizations, educational tools, and data-heavy interfaces.",[11,3178,3179,3180,3183,3184,3186],{},"It also provides its own ",[52,3181,3182],{},"ticker",", which is essentially a wrapper around ",[67,3185,2802],{},". Instead of writing and managing the game loop ourselves, we just register a callback and Pixi calls it every frame.",[11,3188,3189],{},"And once Vue enters the picture, we barely even write that.",[38,3191,3193],{"id":3192},"vue-custom-renderer-for-pixi","Vue Custom Renderer for Pixi",[11,3195,3196,3197,1130],{},"Here's something you might not know: Vue is not limited to the DOM. Of course, rendering websites and web applications is by far its most common use case, but Vue's renderer is completely independent from its reactivity system. That means we can define our own custom renderer and use the power of Vue reactivity to render to entirely different environments, like a terminal or (you guessed it) inside a ",[67,3198,2771],{},[11,3200,3201,3202,3209],{},"That's where ",[46,3203,3206],{"href":3204,"rel":3205},"https://vue3-pixi.vercel.app/",[116],[67,3207,3208],{},"vue3-pixi"," comes in. It's a custom Vue renderer for PixiJS. Instead of mixing Vue with imperative Pixi code, we can build the entire game using components, props, emits, and reactivity: the same tools we already use every day.",[11,3211,3212,3213,3216,3217,3220],{},"It also exposes the Pixi ticker as a composable called ",[67,3214,3215],{},"onTick",". You can think of it as a ",[67,3218,3219],{},"watchEffect"," that doesn't wait for dependencies: it simply runs every frame.",[59,3222,3226],{"className":3223,"code":3224,"language":3225,"meta":65,"style":65},"language-ts shiki shiki-themes monokai","import { ref } from 'vue'\nimport { onTick } from 'vue3-pixi'\n\nconst x = ref(0)\nconst speed = 2\n\nonTick(({ deltaTime }) => {\n  x.value += speed * deltaTime\n})\n","ts",[67,3227,3228,3242,3254,3258,3278,3290,3294,3312,3328],{"__ignoreMap":65},[70,3229,3230,3233,3236,3239],{"class":72,"line":73},[70,3231,3232],{"class":413},"import",[70,3234,3235],{"class":80}," { ref } ",[70,3237,3238],{"class":413},"from",[70,3240,3241],{"class":419}," 'vue'\n",[70,3243,3244,3246,3249,3251],{"class":72,"line":160},[70,3245,3232],{"class":413},[70,3247,3248],{"class":80}," { onTick } ",[70,3250,3238],{"class":413},[70,3252,3253],{"class":419}," 'vue3-pixi'\n",[70,3255,3256],{"class":72,"line":167},[70,3257,164],{"emptyLinePlaceholder":163},[70,3259,3260,3263,3266,3268,3271,3273,3276],{"class":72,"line":175},[70,3261,3262],{"class":283},"const",[70,3264,3265],{"class":80}," x ",[70,3267,1323],{"class":413},[70,3269,3270],{"class":76}," ref",[70,3272,2984],{"class":80},[70,3274,3275],{"class":1311},"0",[70,3277,3037],{"class":80},[70,3279,3280,3282,3285,3287],{"class":72,"line":183},[70,3281,3262],{"class":283},[70,3283,3284],{"class":80}," speed ",[70,3286,1323],{"class":413},[70,3288,3289],{"class":1311}," 2\n",[70,3291,3292],{"class":72,"line":191},[70,3293,164],{"emptyLinePlaceholder":163},[70,3295,3296,3298,3301,3303,3306,3309],{"class":72,"line":340},[70,3297,3215],{"class":76},[70,3299,3300],{"class":80},"(({ ",[70,3302,3094],{"class":1329},[70,3304,3305],{"class":80}," }) ",[70,3307,3308],{"class":283},"=>",[70,3310,3311],{"class":80}," {\n",[70,3313,3314,3317,3320,3322,3325],{"class":72,"line":352},[70,3315,3316],{"class":80},"  x.value ",[70,3318,3319],{"class":413},"+=",[70,3321,3284],{"class":80},[70,3323,3324],{"class":413},"*",[70,3326,3327],{"class":80}," deltaTime\n",[70,3329,3330],{"class":72,"line":364},[70,3331,3332],{"class":80},"})\n",[11,3334,3335,3336,3338,3339,3341],{},"Notice how ",[67,3337,3094],{}," is simply handed to us now. The ticker has already measured the time between frames, so all the timestamp bookkeeping from our vanilla ",[67,3340,2802],{}," loop disappears. For now, just think of speed as a constant movement rate. We'll make this more realistic when we get to physics.",[11,3343,3344,3345,3347,3348,3350,3351,3354],{},"In the real game we'd also cap ",[67,3346,3094],{},". If the browser pauses the loop (for example, because you switch tabs), the next frame arrives with a huge ",[67,3349,3094],{},". Without a limit, ",[67,3352,3353],{},"x += speed * deltaTime"," would make the player leap across the level in a single update.",[11,3356,3357,3358,954,3361,3363],{},"One important detail: the whole game runs on a ",[52,3359,3360],{},"single",[67,3362,3215],{},". Every snippet below is just a slice of that one callback, executed in order. There's no second loop applying gravity twice.",[38,3365,3367],{"id":3366},"smells-like-vue-spirit","Smells Like Vue Spirit",[11,3369,3370,3371,3373,3374],{},"With ",[67,3372,3208],{},", game code starts looking... ",[52,3375,3376],{},"like Vue.",[11,3378,3379,3380,3383],{},"The root is an ",[67,3381,3382],{},"\u003CApplication>",", which creates the canvas and starts the ticker for you.",[59,3385,3389],{"className":3386,"code":3387,"language":3388,"meta":65,"style":65},"language-vue shiki shiki-themes monokai","\u003Cscript setup lang=\"ts\">\nimport { Application } from 'vue3-pixi'\nimport { WORLD } from './game/level'\nimport World from './components/World.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CApplication\n    :width=\"WORLD.w\"\n    :height=\"WORLD.h\"\n    :background=\"0xbfe9f7\"\n    :antialias=\"true\"\n  >\n    \u003CWorld />\n  \u003C/Application>\n\u003C/template>\n","vue",[67,3390,3391,3412,3423,3435,3447,3456,3460,3468,3476,3486,3496,3506,3516,3521,3532,3542],{"__ignoreMap":65},[70,3392,3393,3396,3398,3401,3404,3406,3409],{"class":72,"line":73},[70,3394,3395],{"class":80},"\u003C",[70,3397,2051],{"class":413},[70,3399,3400],{"class":76}," setup",[70,3402,3403],{"class":76}," lang",[70,3405,1323],{"class":80},[70,3407,3408],{"class":419},"\"ts\"",[70,3410,3411],{"class":80},">\n",[70,3413,3414,3416,3419,3421],{"class":72,"line":160},[70,3415,3232],{"class":413},[70,3417,3418],{"class":80}," { Application } ",[70,3420,3238],{"class":413},[70,3422,3253],{"class":419},[70,3424,3425,3427,3430,3432],{"class":72,"line":167},[70,3426,3232],{"class":413},[70,3428,3429],{"class":80}," { WORLD } ",[70,3431,3238],{"class":413},[70,3433,3434],{"class":419}," './game/level'\n",[70,3436,3437,3439,3442,3444],{"class":72,"line":175},[70,3438,3232],{"class":413},[70,3440,3441],{"class":80}," World ",[70,3443,3238],{"class":413},[70,3445,3446],{"class":419}," './components/World.vue'\n",[70,3448,3449,3452,3454],{"class":72,"line":183},[70,3450,3451],{"class":80},"\u003C/",[70,3453,2051],{"class":413},[70,3455,3411],{"class":80},[70,3457,3458],{"class":72,"line":191},[70,3459,164],{"emptyLinePlaceholder":163},[70,3461,3462,3464,3466],{"class":72,"line":340},[70,3463,3395],{"class":80},[70,3465,2262],{"class":413},[70,3467,3411],{"class":80},[70,3469,3470,3473],{"class":72,"line":352},[70,3471,3472],{"class":80},"  \u003C",[70,3474,3475],{"class":413},"Application\n",[70,3477,3478,3481,3483],{"class":72,"line":364},[70,3479,3480],{"class":76},"    :width",[70,3482,1323],{"class":80},[70,3484,3485],{"class":419},"\"WORLD.w\"\n",[70,3487,3488,3491,3493],{"class":72,"line":375},[70,3489,3490],{"class":76},"    :height",[70,3492,1323],{"class":80},[70,3494,3495],{"class":419},"\"WORLD.h\"\n",[70,3497,3498,3501,3503],{"class":72,"line":381},[70,3499,3500],{"class":76},"    :background",[70,3502,1323],{"class":80},[70,3504,3505],{"class":419},"\"0xbfe9f7\"\n",[70,3507,3508,3511,3513],{"class":72,"line":474},[70,3509,3510],{"class":76},"    :antialias",[70,3512,1323],{"class":80},[70,3514,3515],{"class":419},"\"true\"\n",[70,3517,3518],{"class":72,"line":480},[70,3519,3520],{"class":80},"  >\n",[70,3522,3523,3526,3529],{"class":72,"line":485},[70,3524,3525],{"class":80},"    \u003C",[70,3527,3528],{"class":413},"World",[70,3530,3531],{"class":80}," />\n",[70,3533,3534,3537,3540],{"class":72,"line":496},[70,3535,3536],{"class":80},"  \u003C/",[70,3538,3539],{"class":413},"Application",[70,3541,3411],{"class":80},[70,3543,3544,3546,3548],{"class":72,"line":507},[70,3545,3451],{"class":80},[70,3547,2262],{"class":413},[70,3549,3411],{"class":80},[11,3551,3552,3555],{},[67,3553,3554],{},"\u003CWorld>"," is just another Vue component. Its template describes the current stage:",[59,3557,3559],{"className":3386,"code":3558,"language":3388,"meta":65,"style":65},"\u003Ctemplate>\n  \u003Ccontainer>\n    \u003CBackground />\n\n    \u003CPlatform\n      v-for=\"(p, i) in PLATFORMS\"\n      :key=\"`p${i}`\"\n      :rect=\"p\"\n    />\n    \u003CSaw v-for=\"(s, i) in SAWS\" :key=\"`s${i}`\" :pos=\"s\" />\n    \u003CGoal />\n\n    \u003CPlayer :active=\"active\" @hit=\"onHit\" @win=\"onWin\" />\n\n    \u003CHud :lives=\"lives\" :won=\"won\" />\n  \u003C/container>\n\u003C/template>\n",[67,3560,3561,3569,3578,3587,3591,3598,3608,3618,3628,3633,3666,3675,3679,3712,3716,3741,3749],{"__ignoreMap":65},[70,3562,3563,3565,3567],{"class":72,"line":73},[70,3564,3395],{"class":80},[70,3566,2262],{"class":413},[70,3568,3411],{"class":80},[70,3570,3571,3573,3576],{"class":72,"line":160},[70,3572,3472],{"class":80},[70,3574,3575],{"class":413},"container",[70,3577,3411],{"class":80},[70,3579,3580,3582,3585],{"class":72,"line":167},[70,3581,3525],{"class":80},[70,3583,3584],{"class":413},"Background",[70,3586,3531],{"class":80},[70,3588,3589],{"class":72,"line":175},[70,3590,164],{"emptyLinePlaceholder":163},[70,3592,3593,3595],{"class":72,"line":183},[70,3594,3525],{"class":80},[70,3596,3597],{"class":413},"Platform\n",[70,3599,3600,3603,3605],{"class":72,"line":191},[70,3601,3602],{"class":76},"      v-for",[70,3604,1323],{"class":80},[70,3606,3607],{"class":419},"\"(p, i) in PLATFORMS\"\n",[70,3609,3610,3613,3615],{"class":72,"line":340},[70,3611,3612],{"class":76},"      :key",[70,3614,1323],{"class":80},[70,3616,3617],{"class":419},"\"`p${i}`\"\n",[70,3619,3620,3623,3625],{"class":72,"line":352},[70,3621,3622],{"class":76},"      :rect",[70,3624,1323],{"class":80},[70,3626,3627],{"class":419},"\"p\"\n",[70,3629,3630],{"class":72,"line":364},[70,3631,3632],{"class":80},"    />\n",[70,3634,3635,3637,3640,3643,3645,3648,3651,3653,3656,3659,3661,3664],{"class":72,"line":375},[70,3636,3525],{"class":80},[70,3638,3639],{"class":413},"Saw",[70,3641,3642],{"class":76}," v-for",[70,3644,1323],{"class":80},[70,3646,3647],{"class":419},"\"(s, i) in SAWS\"",[70,3649,3650],{"class":76}," :key",[70,3652,1323],{"class":80},[70,3654,3655],{"class":419},"\"`s${i}`\"",[70,3657,3658],{"class":76}," :pos",[70,3660,1323],{"class":80},[70,3662,3663],{"class":419},"\"s\"",[70,3665,3531],{"class":80},[70,3667,3668,3670,3673],{"class":72,"line":381},[70,3669,3525],{"class":80},[70,3671,3672],{"class":413},"Goal",[70,3674,3531],{"class":80},[70,3676,3677],{"class":72,"line":474},[70,3678,164],{"emptyLinePlaceholder":163},[70,3680,3681,3683,3686,3689,3691,3694,3697,3699,3702,3705,3707,3710],{"class":72,"line":480},[70,3682,3525],{"class":80},[70,3684,3685],{"class":413},"Player",[70,3687,3688],{"class":76}," :active",[70,3690,1323],{"class":80},[70,3692,3693],{"class":419},"\"active\"",[70,3695,3696],{"class":76}," @hit",[70,3698,1323],{"class":80},[70,3700,3701],{"class":419},"\"onHit\"",[70,3703,3704],{"class":76}," @win",[70,3706,1323],{"class":80},[70,3708,3709],{"class":419},"\"onWin\"",[70,3711,3531],{"class":80},[70,3713,3714],{"class":72,"line":485},[70,3715,164],{"emptyLinePlaceholder":163},[70,3717,3718,3720,3723,3726,3728,3731,3734,3736,3739],{"class":72,"line":496},[70,3719,3525],{"class":80},[70,3721,3722],{"class":413},"Hud",[70,3724,3725],{"class":76}," :lives",[70,3727,1323],{"class":80},[70,3729,3730],{"class":419},"\"lives\"",[70,3732,3733],{"class":76}," :won",[70,3735,1323],{"class":80},[70,3737,3738],{"class":419},"\"won\"",[70,3740,3531],{"class":80},[70,3742,3743,3745,3747],{"class":72,"line":507},[70,3744,3536],{"class":80},[70,3746,3575],{"class":413},[70,3748,3411],{"class":80},[70,3750,3751,3753,3755],{"class":72,"line":518},[70,3752,3451],{"class":80},[70,3754,2262],{"class":413},[70,3756,3411],{"class":80},[11,3758,3759,3760,3763,3764,3767,3768,974,3771,3774,3775,3778],{},"We are using ",[67,3761,3762],{},"v-for"," to render platforms and saws, and we have a ",[67,3765,3766],{},"\u003CPlayer>"," emitting ",[67,3769,3770],{},"@hit",[67,3772,3773],{},"@win"," to its parent, just like a form component emitting ",[67,3776,3777],{},"@submit",". A game built with components, passing props down and events up.",[11,3780,3781],{},"Suddenly, it feels familiar again!",[11,3783,3784,3785,3787,3788,3791,3792,3795,3796,3799,3800,3803],{},"But remember: this uses a custom Vue renderer, so when you write ",[67,3786,3766],{},", ",[67,3789,3790],{},"\u003CHud>",", or ",[67,3793,3794],{},"\u003CGoal>",", you're ultimately creating a scene graph of PixiJS objects instead of DOM elements. We don't have access to classic ",[67,3797,3798],{},"\u003Cbutton>"," or ",[67,3801,3802],{},"\u003Cinput>"," in the canvas world (HTML in canvas is technically possible... but that's a topic for another day).",[11,3805,3806,3807,974,3809,3812],{},"Everything else is the Vue you already know: directives like ",[67,3808,3762],{},[67,3810,3811],{},"v-if",", props, refs, components, and emits. All of it works exactly as it does in a web app.",[11,3814,3815],{},"However, there's a couple of gotchas!",[1232,3817,3819],{"id":3818},"gotcha-1-containers","Gotcha 1: Containers",[11,3821,3822,3823,3826,3827,3830],{},"In a web app, a parent contains its children through CSS layout. In a scene graph, a child's position is ",[52,3824,3825],{},"relative to its parent",". Move a ",[67,3828,3829],{},"\u003Ccontainer>"," and everything inside it moves too. That's how you slide an entire level, or move an enemy and its health bar together as a single unit.",[2752,3832],{"src":3833,"title":3834,"loading":2756,"scrolling":2757,"style":3835},"/demos/building-a-platformer-game-with-vue-and-pixijs/scene-graph.html","A parent container moving its children together","width:100%;height:250px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,3837,3838],{},"So the thing painting pixels to a canvas is a Vue component tree. You already know how to build one of those.",[1232,3840,3842],{"id":3841},"gotcha-2-down-is-positive","Gotcha 2: Down Is Positive?",[11,3844,3845,3846,3849,3850,3853,3854,3857],{},"On a screen, ",[52,3847,3848],{},"Y goes down."," The origin ",[67,3851,3852],{},"(0, 0)"," sits in the top-left corner, and a bigger Y value means lower on the screen. School-math Y went ",[256,3855,3856],{},"up",", which is exactly why this trips people up.",[11,3859,3860,3861,3864,3865,3868,3869,3872],{},"It's the same as CSS ",[67,3862,3863],{},"top",": a ",[67,3866,3867],{},"top: 200px"," element sits below a ",[67,3870,3871],{},"top: 0"," one.",[11,3874,3875,3876,3879,3880,3883],{},"So, to make the player ",[52,3877,3878],{},"jump",", you set its vertical velocity to a ",[256,3881,3882],{},"negative"," number, because up means heading toward smaller Y:",[59,3885,3887],{"className":3223,"code":3886,"language":3225,"meta":65,"style":65},"// jump velocity is NEGATIVE (up is smaller Y)\nexport const PHYS = {\n  speed: 3.4,\n  gravity: 0.55,\n  jump: -11.5,\n  pw: 28,\n  ph: 28,\n}\n",[67,3888,3889,3894,3909,3919,3929,3941,3951,3960],{"__ignoreMap":65},[70,3890,3891],{"class":72,"line":73},[70,3892,3893],{"class":1301},"// jump velocity is NEGATIVE (up is smaller Y)\n",[70,3895,3896,3899,3902,3905,3907],{"class":72,"line":160},[70,3897,3898],{"class":413},"export",[70,3900,3901],{"class":283}," const",[70,3903,3904],{"class":80}," PHYS ",[70,3906,1323],{"class":413},[70,3908,3311],{"class":80},[70,3910,3911,3914,3917],{"class":72,"line":167},[70,3912,3913],{"class":80},"  speed: ",[70,3915,3916],{"class":1311},"3.4",[70,3918,294],{"class":80},[70,3920,3921,3924,3927],{"class":72,"line":175},[70,3922,3923],{"class":80},"  gravity: ",[70,3925,3926],{"class":1311},"0.55",[70,3928,294],{"class":80},[70,3930,3931,3934,3936,3939],{"class":72,"line":183},[70,3932,3933],{"class":80},"  jump: ",[70,3935,77],{"class":413},[70,3937,3938],{"class":1311},"11.5",[70,3940,294],{"class":80},[70,3942,3943,3946,3949],{"class":72,"line":191},[70,3944,3945],{"class":80},"  pw: ",[70,3947,3948],{"class":1311},"28",[70,3950,294],{"class":80},[70,3952,3953,3956,3958],{"class":72,"line":340},[70,3954,3955],{"class":80},"  ph: ",[70,3957,3948],{"class":1311},[70,3959,294],{"class":80},[70,3961,3962],{"class":72,"line":352},[70,3963,384],{"class":80},[11,3965,3966,3967,3787,3970,3973,3974,3976,3977,3980,3981,3983,3984,1130],{},"Throughout these snippets I refer to the constants as bare ",[67,3968,3969],{},"speed",[67,3971,3972],{},"gravity",", and ",[67,3975,3878],{}," (the game destructures them out of ",[67,3978,3979],{},"PHYS","). So when you see a lone ",[67,3982,3972],{}," later, that's this ",[67,3985,3926],{},[11,3987,3988,3989,3992],{},"Gravity, meanwhile, is ",[256,3990,3991],{},"positive",", constantly pulling Y back down. Up is negative, down is positive.",[1232,3994,3996],{"id":3995},"gotcha-3-physics","Gotcha 3: Physics!",[11,3998,3999,4000,4003],{},"I'm not great at math. That's why talking about a ",[256,4001,4002],{},"game physics engine"," kind of scares me. Thing is: physics for a platformer just comes down to two rules and middle-school arithmetic, run 60 times a second. Let's break it down.",[11,4005,4006],{},"You track two numbers per moving object:",[123,4008,4009,4025],{},[126,4010,4011,4014,4015,974,4018,4021,4022,4024],{},[52,4012,4013],{},"Position",", where it is: ",[67,4016,4017],{},"x",[67,4019,4020],{},"y",". These are your ",[67,4023,2743],{},"s.",[126,4026,4027,4030,4031,974,4034,4037],{},[52,4028,4029],{},"Velocity",", how fast it's moving: ",[67,4032,4033],{},"vx",[67,4035,4036],{},"vy",". Plain variables.",[11,4039,4040],{},"In the loop, that's three lines doing the heavy lifting:",[59,4042,4044],{"className":3223,"code":4043,"language":3225,"meta":65,"style":65},"onTick(({ deltaTime }) => {\n  const dt = Math.min(deltaTime, 2)\n\n  // gravity tugs velocity downward every frame (down = +)\n  vy += gravity * dt // gravity = 0.55\n\n  // velocity moves the position\n  x.value += vx * dt\n  y.value += vy * dt\n\n  // ...then we resolve collisions, next section\n})\n",[67,4045,4046,4060,4083,4087,4092,4109,4113,4118,4132,4146,4150,4155],{"__ignoreMap":65},[70,4047,4048,4050,4052,4054,4056,4058],{"class":72,"line":73},[70,4049,3215],{"class":76},[70,4051,3300],{"class":80},[70,4053,3094],{"class":1329},[70,4055,3305],{"class":80},[70,4057,3308],{"class":283},[70,4059,3311],{"class":80},[70,4061,4062,4064,4067,4069,4072,4075,4078,4081],{"class":72,"line":160},[70,4063,2995],{"class":283},[70,4065,4066],{"class":80}," dt ",[70,4068,1323],{"class":413},[70,4070,4071],{"class":80}," Math.",[70,4073,4074],{"class":76},"min",[70,4076,4077],{"class":80},"(deltaTime, ",[70,4079,4080],{"class":1311},"2",[70,4082,3037],{"class":80},[70,4084,4085],{"class":72,"line":167},[70,4086,164],{"emptyLinePlaceholder":163},[70,4088,4089],{"class":72,"line":175},[70,4090,4091],{"class":1301},"  // gravity tugs velocity downward every frame (down = +)\n",[70,4093,4094,4097,4099,4102,4104,4106],{"class":72,"line":183},[70,4095,4096],{"class":80},"  vy ",[70,4098,3319],{"class":413},[70,4100,4101],{"class":80}," gravity ",[70,4103,3324],{"class":413},[70,4105,4066],{"class":80},[70,4107,4108],{"class":1301},"// gravity = 0.55\n",[70,4110,4111],{"class":72,"line":191},[70,4112,164],{"emptyLinePlaceholder":163},[70,4114,4115],{"class":72,"line":340},[70,4116,4117],{"class":1301},"  // velocity moves the position\n",[70,4119,4120,4122,4124,4127,4129],{"class":72,"line":352},[70,4121,3316],{"class":80},[70,4123,3319],{"class":413},[70,4125,4126],{"class":80}," vx ",[70,4128,3324],{"class":413},[70,4130,4131],{"class":80}," dt\n",[70,4133,4134,4137,4139,4142,4144],{"class":72,"line":364},[70,4135,4136],{"class":80},"  y.value ",[70,4138,3319],{"class":413},[70,4140,4141],{"class":80}," vy ",[70,4143,3324],{"class":413},[70,4145,4131],{"class":80},[70,4147,4148],{"class":72,"line":375},[70,4149,164],{"emptyLinePlaceholder":163},[70,4151,4152],{"class":72,"line":381},[70,4153,4154],{"class":1301},"  // ...then we resolve collisions, next section\n",[70,4156,4157],{"class":72,"line":474},[70,4158,3332],{"class":80},[11,4160,4161],{},"The ordering matters: velocity updates before position. This is a simple physics choice. There are two ways to update movement each frame:",[123,4163,4164,4167],{},[126,4165,4166],{},"Move the object, then apply forces",[126,4168,4169],{},"Apply forces, then move the object",[11,4171,4172],{},"They look almost identical in simple cases like jumping. The difference is tiny, sometimes just a fraction of a pixel per frame.",[11,4174,4175],{},"But the order matters when things get more dynamic, like springs, bouncing, or anything that should feel stable over time. One ordering can slowly add extra energy into the system, making motion feel slightly “off” after many frames. This version avoids that and stays stable, which is why it's the common default in games.",[11,4177,4178,4179,4181,4182,4184],{},"A jump is just setting ",[67,4180,4036],{}," to a large negative number once. Gravity does the rest: it slows the rise, pauses at the top, then accelerates the fall. The parabolic arc is emergent. Nobody draws that curve; it falls out of adding ",[67,4183,3926],{}," to a number every frame.",[11,4186,4187,4188,4191,4192,4194,4195,4198],{},"Tap ",[52,4189,4190],{},"Jump"," and watch ",[67,4193,4036],{},". It starts at ",[67,4196,4197],{},"-11.5",", climbs toward zero as the box rises, crosses zero at the peak, then goes positive on the way down:",[2752,4200],{"src":4201,"title":4202,"loading":2756,"scrolling":2757,"style":4203},"/demos/building-a-platformer-game-with-vue-and-pixijs/gravity.html","A jumping box driven by gravity and velocity","width:100%;height:280px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,4205,4206,4207,974,4210,4213],{},"There are no \"correct\" numbers here. Bigger gravity makes heavier, snappier jumps; smaller gravity gives floaty moon physics. Game feel is mostly twiddling these constants until the jump feels right under your thumb. This game landed on ",[67,4208,4209],{},"gravity 0.55",[67,4211,4212],{},"jump -11.5"," after a lot of tapping.",[1232,4215,4217],{"id":4216},"gotcha-4-handling-input","Gotcha 4: Handling Input",[11,4219,4220,4221,4224,4225,4228],{},"Games ",[52,4222,4223],{},"poll"," input instead of reacting to it. In a web form you handle a ",[67,4226,4227],{},"@keydown"," the moment it arrives, but that's too jittery for a game: held keys auto-repeat with gaps, and simultaneous inputs like left-plus-jump become inconsistent. So instead of reacting directly, you keep a running set of which keys are currently held, and every frame the loop reads that set.",[11,4230,4231],{},"The events only maintain state. They never move anything:",[59,4233,4235],{"className":3223,"code":4234,"language":3225,"meta":65,"style":65},"const keys = new Set\u003Cstring>()\n\nfunction onKeyDown(e: KeyboardEvent) {\n  keys.add(e.key)\n}\n\nfunction onKeyUp(e: KeyboardEvent) {\n  keys.delete(e.key)\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', onKeyDown)\n  window.addEventListener('keyup', onKeyUp)\n})\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeyDown)\n  window.removeEventListener('keyup', onKeyUp)\n})\n",[67,4236,4237,4260,4264,4284,4295,4299,4303,4320,4329,4333,4337,4349,4365,4379,4383,4387,4398,4411,4423],{"__ignoreMap":65},[70,4238,4239,4241,4244,4246,4249,4252,4254,4257],{"class":72,"line":73},[70,4240,3262],{"class":283},[70,4242,4243],{"class":80}," keys ",[70,4245,1323],{"class":413},[70,4247,4248],{"class":413}," new",[70,4250,4251],{"class":76}," Set",[70,4253,3395],{"class":80},[70,4255,4256],{"class":283},"string",[70,4258,4259],{"class":80},">()\n",[70,4261,4262],{"class":72,"line":160},[70,4263,164],{"emptyLinePlaceholder":163},[70,4265,4266,4268,4271,4273,4276,4278,4282],{"class":72,"line":167},[70,4267,2814],{"class":283},[70,4269,4270],{"class":76}," onKeyDown",[70,4272,2984],{"class":80},[70,4274,4275],{"class":1329},"e",[70,4277,1339],{"class":413},[70,4279,4281],{"class":4280},"soZtE"," KeyboardEvent",[70,4283,2990],{"class":80},[70,4285,4286,4289,4292],{"class":72,"line":175},[70,4287,4288],{"class":80},"  keys.",[70,4290,4291],{"class":76},"add",[70,4293,4294],{"class":80},"(e.key)\n",[70,4296,4297],{"class":72,"line":183},[70,4298,384],{"class":80},[70,4300,4301],{"class":72,"line":191},[70,4302,164],{"emptyLinePlaceholder":163},[70,4304,4305,4307,4310,4312,4314,4316,4318],{"class":72,"line":340},[70,4306,2814],{"class":283},[70,4308,4309],{"class":76}," onKeyUp",[70,4311,2984],{"class":80},[70,4313,4275],{"class":1329},[70,4315,1339],{"class":413},[70,4317,4281],{"class":4280},[70,4319,2990],{"class":80},[70,4321,4322,4324,4327],{"class":72,"line":352},[70,4323,4288],{"class":80},[70,4325,4326],{"class":76},"delete",[70,4328,4294],{"class":80},[70,4330,4331],{"class":72,"line":364},[70,4332,384],{"class":80},[70,4334,4335],{"class":72,"line":375},[70,4336,164],{"emptyLinePlaceholder":163},[70,4338,4339,4342,4345,4347],{"class":72,"line":381},[70,4340,4341],{"class":76},"onMounted",[70,4343,4344],{"class":80},"(() ",[70,4346,3308],{"class":283},[70,4348,3311],{"class":80},[70,4350,4351,4354,4357,4359,4362],{"class":72,"line":474},[70,4352,4353],{"class":80},"  window.",[70,4355,4356],{"class":76},"addEventListener",[70,4358,2984],{"class":80},[70,4360,4361],{"class":419},"'keydown'",[70,4363,4364],{"class":80},", onKeyDown)\n",[70,4366,4367,4369,4371,4373,4376],{"class":72,"line":480},[70,4368,4353],{"class":80},[70,4370,4356],{"class":76},[70,4372,2984],{"class":80},[70,4374,4375],{"class":419},"'keyup'",[70,4377,4378],{"class":80},", onKeyUp)\n",[70,4380,4381],{"class":72,"line":485},[70,4382,3332],{"class":80},[70,4384,4385],{"class":72,"line":496},[70,4386,164],{"emptyLinePlaceholder":163},[70,4388,4389,4392,4394,4396],{"class":72,"line":507},[70,4390,4391],{"class":76},"onUnmounted",[70,4393,4344],{"class":80},[70,4395,3308],{"class":283},[70,4397,3311],{"class":80},[70,4399,4400,4402,4405,4407,4409],{"class":72,"line":518},[70,4401,4353],{"class":80},[70,4403,4404],{"class":76},"removeEventListener",[70,4406,2984],{"class":80},[70,4408,4361],{"class":419},[70,4410,4364],{"class":80},[70,4412,4413,4415,4417,4419,4421],{"class":72,"line":525},[70,4414,4353],{"class":80},[70,4416,4404],{"class":76},[70,4418,2984],{"class":80},[70,4420,4375],{"class":419},[70,4422,4378],{"class":80},[70,4424,4425],{"class":72,"line":536},[70,4426,3332],{"class":80},[11,4428,4429,4430,4432],{},"That same single ",[67,4431,3215],{}," reads them every frame and converts held keys into velocity:",[59,4434,4436],{"className":3223,"code":4435,"language":3225,"meta":65,"style":65},"onTick(() => {\n  const left =\n    keys.has('ArrowLeft') || keys.has('a') || keys.has('A')\n\n  const right =\n    keys.has('ArrowRight') || keys.has('d') || keys.has('D')\n\n  vx = (right ? speed : 0) - (left ? speed : 0)\n})\n",[67,4437,4438,4448,4458,4502,4506,4515,4554,4558,4594],{"__ignoreMap":65},[70,4439,4440,4442,4444,4446],{"class":72,"line":73},[70,4441,3215],{"class":76},[70,4443,4344],{"class":80},[70,4445,3308],{"class":283},[70,4447,3311],{"class":80},[70,4449,4450,4452,4455],{"class":72,"line":160},[70,4451,2995],{"class":283},[70,4453,4454],{"class":80}," left ",[70,4456,4457],{"class":413},"=\n",[70,4459,4460,4463,4466,4468,4471,4474,4477,4480,4482,4484,4487,4489,4491,4493,4495,4497,4500],{"class":72,"line":167},[70,4461,4462],{"class":80},"    keys.",[70,4464,4465],{"class":76},"has",[70,4467,2984],{"class":80},[70,4469,4470],{"class":419},"'ArrowLeft'",[70,4472,4473],{"class":80},") ",[70,4475,4476],{"class":413},"||",[70,4478,4479],{"class":80}," keys.",[70,4481,4465],{"class":76},[70,4483,2984],{"class":80},[70,4485,4486],{"class":419},"'a'",[70,4488,4473],{"class":80},[70,4490,4476],{"class":413},[70,4492,4479],{"class":80},[70,4494,4465],{"class":76},[70,4496,2984],{"class":80},[70,4498,4499],{"class":419},"'A'",[70,4501,3037],{"class":80},[70,4503,4504],{"class":72,"line":175},[70,4505,164],{"emptyLinePlaceholder":163},[70,4507,4508,4510,4513],{"class":72,"line":183},[70,4509,2995],{"class":283},[70,4511,4512],{"class":80}," right ",[70,4514,4457],{"class":413},[70,4516,4517,4519,4521,4523,4526,4528,4530,4532,4534,4536,4539,4541,4543,4545,4547,4549,4552],{"class":72,"line":191},[70,4518,4462],{"class":80},[70,4520,4465],{"class":76},[70,4522,2984],{"class":80},[70,4524,4525],{"class":419},"'ArrowRight'",[70,4527,4473],{"class":80},[70,4529,4476],{"class":413},[70,4531,4479],{"class":80},[70,4533,4465],{"class":76},[70,4535,2984],{"class":80},[70,4537,4538],{"class":419},"'d'",[70,4540,4473],{"class":80},[70,4542,4476],{"class":413},[70,4544,4479],{"class":80},[70,4546,4465],{"class":76},[70,4548,2984],{"class":80},[70,4550,4551],{"class":419},"'D'",[70,4553,3037],{"class":80},[70,4555,4556],{"class":72,"line":340},[70,4557,164],{"emptyLinePlaceholder":163},[70,4559,4560,4563,4565,4568,4570,4572,4574,4577,4579,4581,4584,4586,4588,4590,4592],{"class":72,"line":352},[70,4561,4562],{"class":80},"  vx ",[70,4564,1323],{"class":413},[70,4566,4567],{"class":80}," (right ",[70,4569,2922],{"class":413},[70,4571,3284],{"class":80},[70,4573,1339],{"class":413},[70,4575,4576],{"class":1311}," 0",[70,4578,4473],{"class":80},[70,4580,77],{"class":413},[70,4582,4583],{"class":80}," (left ",[70,4585,2922],{"class":413},[70,4587,3284],{"class":80},[70,4589,1339],{"class":413},[70,4591,4576],{"class":1311},[70,4593,3037],{"class":80},[70,4595,4596],{"class":72,"line":364},[70,4597,3332],{"class":80},[11,4599,4600],{},"Keyboard events are fast and bursty; the loop is slow and steady. Letting events only update state, and letting the loop read that state, keeps movement smooth. Walking and jumping at the same time just works.",[11,4602,4603,4604,4607],{},"Jumping is the exception. Holding a key triggers auto-repeat, so if jump just checked “is the key down?”, you'd bounce like a pogo stick. Instead we detect the ",[256,4605,4606],{},"edge"," (the moment the key is first pressed) and store a one-shot flag.",[11,4609,4610],{},"The keydown handler becomes:",[59,4612,4614],{"className":3223,"code":4613,"language":3225,"meta":65,"style":65},"function onKeyDown(e: KeyboardEvent) {\n  keys.add(e.key)\n\n  if (isJump(e.key)) {\n    // only the first press, not auto-repeat\n    if (!e.repeat) wantJump = true\n    e.preventDefault()\n  }\n}\n",[67,4615,4616,4632,4640,4644,4657,4662,4679,4689,4693],{"__ignoreMap":65},[70,4617,4618,4620,4622,4624,4626,4628,4630],{"class":72,"line":73},[70,4619,2814],{"class":283},[70,4621,4270],{"class":76},[70,4623,2984],{"class":80},[70,4625,4275],{"class":1329},[70,4627,1339],{"class":413},[70,4629,4281],{"class":4280},[70,4631,2990],{"class":80},[70,4633,4634,4636,4638],{"class":72,"line":160},[70,4635,4288],{"class":80},[70,4637,4291],{"class":76},[70,4639,4294],{"class":80},[70,4641,4642],{"class":72,"line":167},[70,4643,164],{"emptyLinePlaceholder":163},[70,4645,4646,4649,4651,4654],{"class":72,"line":175},[70,4647,4648],{"class":413},"  if",[70,4650,3025],{"class":80},[70,4652,4653],{"class":76},"isJump",[70,4655,4656],{"class":80},"(e.key)) {\n",[70,4658,4659],{"class":72,"line":183},[70,4660,4661],{"class":1301},"    // only the first press, not auto-repeat\n",[70,4663,4664,4667,4669,4672,4675,4677],{"class":72,"line":191},[70,4665,4666],{"class":413},"    if",[70,4668,3025],{"class":80},[70,4670,4671],{"class":413},"!",[70,4673,4674],{"class":80},"e.repeat) wantJump ",[70,4676,1323],{"class":413},[70,4678,2203],{"class":1311},[70,4680,4681,4684,4687],{"class":72,"line":340},[70,4682,4683],{"class":80},"    e.",[70,4685,4686],{"class":76},"preventDefault",[70,4688,2828],{"class":80},[70,4690,4691],{"class":72,"line":352},[70,4692,378],{"class":80},[70,4694,4695],{"class":72,"line":364},[70,4696,384],{"class":80},[11,4698,4699,3095,4702,4705,4706,4709],{},[67,4700,4701],{},"e.repeat",[67,4703,4704],{},"false"," on the initial press and ",[67,4707,4708],{},"true"," for the browser's auto-generated repeats. Using it ensures one press produces exactly one jump.",[11,4711,4712,4713,4716],{},"The loop consumes that flag. Early in the same tick, it checks both the request and the ",[67,4714,4715],{},"onGround"," state from the previous frame's collision step, then applies the jump:",[59,4718,4720],{"className":3223,"code":4719,"language":3225,"meta":65,"style":65},"if (wantJump && onGround) {\n  vy = jump\n  onGround = false\n  wantJump = false\n}\n",[67,4721,4722,4736,4745,4755,4764],{"__ignoreMap":65},[70,4723,4724,4727,4730,4733],{"class":72,"line":73},[70,4725,4726],{"class":413},"if",[70,4728,4729],{"class":80}," (wantJump ",[70,4731,4732],{"class":413},"&&",[70,4734,4735],{"class":80}," onGround) {\n",[70,4737,4738,4740,4742],{"class":72,"line":160},[70,4739,4096],{"class":80},[70,4741,1323],{"class":413},[70,4743,4744],{"class":80}," jump\n",[70,4746,4747,4750,4752],{"class":72,"line":167},[70,4748,4749],{"class":80},"  onGround ",[70,4751,1323],{"class":413},[70,4753,4754],{"class":1311}," false\n",[70,4756,4757,4760,4762],{"class":72,"line":175},[70,4758,4759],{"class":80},"  wantJump ",[70,4761,1323],{"class":413},[70,4763,4754],{"class":1311},[70,4765,4766],{"class":72,"line":183},[70,4767,384],{"class":80},[11,4769,4770,4771,4773,4774,4777],{},"That ties it together: collision sets ",[67,4772,4715],{},", input sets ",[67,4775,4776],{},"wantJump",", and the loop decides when both conditions are true.",[38,4779,4781],{"id":4780},"lets-make-things-collide","Let's Make Things Collide",[11,4783,4784],{},"Alright, we're ready to start building the actual platformer!",[11,4786,4787,4788,1130],{},"But first, a problem we created and never solved. The player has velocity and gravity now, so they fall. And they keep falling, straight through every platform, off the bottom of the screen, gone. Nothing stops them, because nothing is ",[256,4789,4790],{},"checking",[11,4792,4793,4794,4797],{},"That check is most of what a platformer is. Every frame, before anything else moves, you ask one yes/no question of every platform: ",[52,4795,4796],{},"is the player's box overlapping this one?"," If it is, you shove the player back out so they end up resting against it instead of sunk inside it.",[11,4799,4800,4801,4804,4805,3787,4807,3787,4809,3973,4812,4815,4816,4819,4820,4823],{},"You've done something similar before: in the DOM, ",[67,4802,4803],{},"getBoundingClientRect()"," hands you an ",[67,4806,4017],{},[67,4808,4020],{},[67,4810,4811],{},"width",[67,4813,4814],{},"height",", and you compare two of those boxes to see if a dropdown clears its trigger or a tooltip runs off-screen. In a game, collision is that same comparison, just run 60 times a second. Every platform in the level is a ",[67,4817,4818],{},"Rect",", a plain ",[67,4821,4822],{},"{ x, y, w, h }",", the same four numbers that bounding box gives you.",[11,4825,4826,4827,4830,4831,4834],{},"The comparison has an intimidating name, ",[52,4828,4829],{},"AABB"," (Axis-Aligned Bounding Box), and a friendly definition: two rectangles overlap only when they overlap on ",[256,4832,4833],{},"both"," the X and Y axes. Miss on either one and there's a gap between them. Here it is straight from the game, annotated so each line reads in plain English:",[59,4836,4838],{"className":3223,"code":4837,"language":3225,"meta":65,"style":65},"function overlaps(\n  ax: number, ay: number,\n  aw: number, ah: number,\n  b: Rect,\n) {\n  return (\n    // a's left is left of b's right\n    ax \u003C b.x + b.w &&\n    // a's right is right of b's left\n    ax + aw > b.x &&\n    // a's top is above b's bottom\n    ay \u003C b.y + b.h &&\n    // a's bottom is below b's top\n    ay + ah > b.y\n  )\n}\n",[67,4839,4840,4850,4871,4891,4903,4907,4915,4920,4939,4944,4959,4964,4981,4986,5000,5005],{"__ignoreMap":65},[70,4841,4842,4844,4847],{"class":72,"line":73},[70,4843,2814],{"class":283},[70,4845,4846],{"class":76}," overlaps",[70,4848,4849],{"class":80},"(\n",[70,4851,4852,4855,4857,4860,4862,4865,4867,4869],{"class":72,"line":160},[70,4853,4854],{"class":1329},"  ax",[70,4856,1339],{"class":413},[70,4858,4859],{"class":283}," number",[70,4861,3787],{"class":80},[70,4863,4864],{"class":1329},"ay",[70,4866,1339],{"class":413},[70,4868,4859],{"class":283},[70,4870,294],{"class":80},[70,4872,4873,4876,4878,4880,4882,4885,4887,4889],{"class":72,"line":167},[70,4874,4875],{"class":1329},"  aw",[70,4877,1339],{"class":413},[70,4879,4859],{"class":283},[70,4881,3787],{"class":80},[70,4883,4884],{"class":1329},"ah",[70,4886,1339],{"class":413},[70,4888,4859],{"class":283},[70,4890,294],{"class":80},[70,4892,4893,4896,4898,4901],{"class":72,"line":175},[70,4894,4895],{"class":1329},"  b",[70,4897,1339],{"class":413},[70,4899,4900],{"class":4280}," Rect",[70,4902,294],{"class":80},[70,4904,4905],{"class":72,"line":183},[70,4906,2990],{"class":80},[70,4908,4909,4912],{"class":72,"line":191},[70,4910,4911],{"class":413},"  return",[70,4913,4914],{"class":80}," (\n",[70,4916,4917],{"class":72,"line":340},[70,4918,4919],{"class":1301},"    // a's left is left of b's right\n",[70,4921,4922,4925,4927,4930,4933,4936],{"class":72,"line":352},[70,4923,4924],{"class":80},"    ax ",[70,4926,3395],{"class":413},[70,4928,4929],{"class":80}," b.x ",[70,4931,4932],{"class":413},"+",[70,4934,4935],{"class":80}," b.w ",[70,4937,4938],{"class":413},"&&\n",[70,4940,4941],{"class":72,"line":364},[70,4942,4943],{"class":1301},"    // a's right is right of b's left\n",[70,4945,4946,4948,4950,4953,4955,4957],{"class":72,"line":375},[70,4947,4924],{"class":80},[70,4949,4932],{"class":413},[70,4951,4952],{"class":80}," aw ",[70,4954,1356],{"class":413},[70,4956,4929],{"class":80},[70,4958,4938],{"class":413},[70,4960,4961],{"class":72,"line":381},[70,4962,4963],{"class":1301},"    // a's top is above b's bottom\n",[70,4965,4966,4969,4971,4974,4976,4979],{"class":72,"line":474},[70,4967,4968],{"class":80},"    ay ",[70,4970,3395],{"class":413},[70,4972,4973],{"class":80}," b.y ",[70,4975,4932],{"class":413},[70,4977,4978],{"class":80}," b.h ",[70,4980,4938],{"class":413},[70,4982,4983],{"class":72,"line":480},[70,4984,4985],{"class":1301},"    // a's bottom is below b's top\n",[70,4987,4988,4990,4992,4995,4997],{"class":72,"line":485},[70,4989,4968],{"class":80},[70,4991,4932],{"class":413},[70,4993,4994],{"class":80}," ah ",[70,4996,1356],{"class":413},[70,4998,4999],{"class":80}," b.y\n",[70,5001,5002],{"class":72,"line":496},[70,5003,5004],{"class":80},"  )\n",[70,5006,5007],{"class":72,"line":507},[70,5008,384],{"class":80},[11,5010,5011,5012,5014,5015,5017,5018,5021,5022,5025,5026,5028],{},"If that returns ",[67,5013,4708],{}," while the player is falling, you snap their feet to the top of the platform and zero out ",[67,5016,4036],{},". Now they're standing. The box below tracks back and forth and flips to ",[52,5019,5020],{},"red"," the instant ",[67,5023,5024],{},"overlaps()"," turns ",[67,5027,4708],{}," against the wall:",[2752,5030],{"src":5031,"title":5032,"loading":2756,"scrolling":2757,"style":5033},"/demos/building-a-platformer-game-with-vue-and-pixijs/collision.html","Two rectangles overlapping (AABB collision)","width:100%;height:220px;border:0;border-radius:16px;margin:1.5rem 0;display:block",[11,5035,5036,5037,5040],{},"Detecting the overlap is half the job. ",[256,5038,5039],{},"Resolving"," it is the other half, and there's one move that makes it all click: handle one axis at a time. The loop applies horizontal movement and pushes the player out of any wall it hit, then applies vertical movement and pushes out of any floor or ceiling:",[59,5042,5044],{"className":3223,"code":5043,"language":3225,"meta":65,"style":65},"// horizontal move, then resolve against every platform\nx.value += vx * dt\nfor (const p of PLATFORMS) {\n  if (overlaps(x.value, y.value, pw, ph, p)) {\n    // moving right: snap to the wall's left face\n    if (vx > 0) x.value = p.x - pw\n    // moving left: snap to its right face\n    else if (vx \u003C 0) x.value = p.x + p.w\n    vx = 0\n  }\n}\n\n// vertical move, then resolve again\ny.value += vy * dt\nonGround = false\nfor (const p of PLATFORMS) {\n  if (overlaps(x.value, y.value, pw, ph, p)) {\n    if (vy > 0) {\n      // landed on top\n      y.value = p.y - ph\n      onGround = true\n      vy = 0\n    } else if (vy \u003C 0) {\n      // bonked your head\n      y.value = p.y + p.h\n      vy = 0\n    }\n  }\n}\n",[67,5045,5046,5051,5064,5082,5094,5099,5123,5128,5153,5162,5166,5170,5174,5179,5192,5201,5215,5225,5238,5243,5258,5267,5276,5294,5299,5312,5320,5325,5329],{"__ignoreMap":65},[70,5047,5048],{"class":72,"line":73},[70,5049,5050],{"class":1301},"// horizontal move, then resolve against every platform\n",[70,5052,5053,5056,5058,5060,5062],{"class":72,"line":160},[70,5054,5055],{"class":80},"x.value ",[70,5057,3319],{"class":413},[70,5059,4126],{"class":80},[70,5061,3324],{"class":413},[70,5063,4131],{"class":80},[70,5065,5066,5069,5071,5073,5076,5079],{"class":72,"line":167},[70,5067,5068],{"class":413},"for",[70,5070,3025],{"class":80},[70,5072,3262],{"class":283},[70,5074,5075],{"class":80}," p ",[70,5077,5078],{"class":413},"of",[70,5080,5081],{"class":80}," PLATFORMS) {\n",[70,5083,5084,5086,5088,5091],{"class":72,"line":175},[70,5085,4648],{"class":413},[70,5087,3025],{"class":80},[70,5089,5090],{"class":76},"overlaps",[70,5092,5093],{"class":80},"(x.value, y.value, pw, ph, p)) {\n",[70,5095,5096],{"class":72,"line":183},[70,5097,5098],{"class":1301},"    // moving right: snap to the wall's left face\n",[70,5100,5101,5103,5106,5108,5110,5113,5115,5118,5120],{"class":72,"line":191},[70,5102,4666],{"class":413},[70,5104,5105],{"class":80}," (vx ",[70,5107,1356],{"class":413},[70,5109,4576],{"class":1311},[70,5111,5112],{"class":80},") x.value ",[70,5114,1323],{"class":413},[70,5116,5117],{"class":80}," p.x ",[70,5119,77],{"class":413},[70,5121,5122],{"class":80}," pw\n",[70,5124,5125],{"class":72,"line":340},[70,5126,5127],{"class":1301},"    // moving left: snap to its right face\n",[70,5129,5130,5133,5136,5138,5140,5142,5144,5146,5148,5150],{"class":72,"line":352},[70,5131,5132],{"class":413},"    else",[70,5134,5135],{"class":413}," if",[70,5137,5105],{"class":80},[70,5139,3395],{"class":413},[70,5141,4576],{"class":1311},[70,5143,5112],{"class":80},[70,5145,1323],{"class":413},[70,5147,5117],{"class":80},[70,5149,4932],{"class":413},[70,5151,5152],{"class":80}," p.w\n",[70,5154,5155,5158,5160],{"class":72,"line":364},[70,5156,5157],{"class":80},"    vx ",[70,5159,1323],{"class":413},[70,5161,2971],{"class":1311},[70,5163,5164],{"class":72,"line":375},[70,5165,378],{"class":80},[70,5167,5168],{"class":72,"line":381},[70,5169,384],{"class":80},[70,5171,5172],{"class":72,"line":474},[70,5173,164],{"emptyLinePlaceholder":163},[70,5175,5176],{"class":72,"line":480},[70,5177,5178],{"class":1301},"// vertical move, then resolve again\n",[70,5180,5181,5184,5186,5188,5190],{"class":72,"line":485},[70,5182,5183],{"class":80},"y.value ",[70,5185,3319],{"class":413},[70,5187,4141],{"class":80},[70,5189,3324],{"class":413},[70,5191,4131],{"class":80},[70,5193,5194,5197,5199],{"class":72,"line":496},[70,5195,5196],{"class":80},"onGround ",[70,5198,1323],{"class":413},[70,5200,4754],{"class":1311},[70,5202,5203,5205,5207,5209,5211,5213],{"class":72,"line":507},[70,5204,5068],{"class":413},[70,5206,3025],{"class":80},[70,5208,3262],{"class":283},[70,5210,5075],{"class":80},[70,5212,5078],{"class":413},[70,5214,5081],{"class":80},[70,5216,5217,5219,5221,5223],{"class":72,"line":518},[70,5218,4648],{"class":413},[70,5220,3025],{"class":80},[70,5222,5090],{"class":76},[70,5224,5093],{"class":80},[70,5226,5227,5229,5232,5234,5236],{"class":72,"line":525},[70,5228,4666],{"class":413},[70,5230,5231],{"class":80}," (vy ",[70,5233,1356],{"class":413},[70,5235,4576],{"class":1311},[70,5237,2990],{"class":80},[70,5239,5240],{"class":72,"line":536},[70,5241,5242],{"class":1301},"      // landed on top\n",[70,5244,5245,5248,5250,5253,5255],{"class":72,"line":547},[70,5246,5247],{"class":80},"      y.value ",[70,5249,1323],{"class":413},[70,5251,5252],{"class":80}," p.y ",[70,5254,77],{"class":413},[70,5256,5257],{"class":80}," ph\n",[70,5259,5260,5263,5265],{"class":72,"line":558},[70,5261,5262],{"class":80},"      onGround ",[70,5264,1323],{"class":413},[70,5266,2203],{"class":1311},[70,5268,5269,5272,5274],{"class":72,"line":567},[70,5270,5271],{"class":80},"      vy ",[70,5273,1323],{"class":413},[70,5275,2971],{"class":1311},[70,5277,5278,5281,5284,5286,5288,5290,5292],{"class":72,"line":572},[70,5279,5280],{"class":80},"    } ",[70,5282,5283],{"class":413},"else",[70,5285,5135],{"class":413},[70,5287,5231],{"class":80},[70,5289,3395],{"class":413},[70,5291,4576],{"class":1311},[70,5293,2990],{"class":80},[70,5295,5296],{"class":72,"line":577},[70,5297,5298],{"class":1301},"      // bonked your head\n",[70,5300,5301,5303,5305,5307,5309],{"class":72,"line":583},[70,5302,5247],{"class":80},[70,5304,1323],{"class":413},[70,5306,5252],{"class":80},[70,5308,4932],{"class":413},[70,5310,5311],{"class":80}," p.h\n",[70,5313,5314,5316,5318],{"class":72,"line":588},[70,5315,5271],{"class":80},[70,5317,1323],{"class":413},[70,5319,2971],{"class":1311},[70,5321,5322],{"class":72,"line":594},[70,5323,5324],{"class":80},"    }\n",[70,5326,5327],{"class":72,"line":599},[70,5328,378],{"class":80},[70,5330,5331],{"class":72,"line":605},[70,5332,384],{"class":80},[11,5334,5335,5336,5338],{},"Splitting the axes is what does the work. The same handful of lines makes \"slide along a wall while falling\" and \"land softly on a ledge\" both work. Corners and very fast movers need more care (resolution order matters, and the dt clamp earns its keep here), but per-axis is the clean backbone. Notice ",[67,5337,4715],{}," gets recomputed here every frame, the exact flag the jump code checks before letting you launch.",[38,5340,5342],{"id":5341},"sharp-saws-and-one-goal","Sharp Saws and One Goal!",[11,5344,5345],{},"Two things in the level aren't platforms: the spinning saw that hurts you and the goal you're trying to reach. They need collision too.",[11,5347,5348,5349,5352],{},"The saw is round, so treating it like a rectangle would feel wrong near the edges. Instead it uses ",[52,5350,5351],{},"circle vs box"," collision: you take the saw's center, clamp it to the player's rectangle to find the closest point, then check how far that point is from the center.",[59,5354,5356],{"className":3223,"code":5355,"language":3225,"meta":65,"style":65},"const r = SAW_RADIUS - 4 // slightly forgiving\n\nfor (const s of SAWS) {\n  // closest X on player box\n  const nx = Math.max(x.value, Math.min(s.x, x.value + pw))\n  // closest Y on player box\n  const ny = Math.max(y.value, Math.min(s.y, y.value + ph))\n\n  const dx = s.x - nx\n  const dy = s.y - ny\n\n  if (dx * dx + dy * dy \u003C r * r) {\n    emit('hit')\n    respawn()\n    return\n  }\n}\n",[67,5357,5358,5378,5382,5398,5403,5430,5435,5461,5465,5482,5499,5503,5531,5543,5550,5555,5559],{"__ignoreMap":65},[70,5359,5360,5362,5365,5367,5370,5372,5375],{"class":72,"line":73},[70,5361,3262],{"class":283},[70,5363,5364],{"class":80}," r ",[70,5366,1323],{"class":413},[70,5368,5369],{"class":80}," SAW_RADIUS ",[70,5371,77],{"class":413},[70,5373,5374],{"class":1311}," 4",[70,5376,5377],{"class":1301}," // slightly forgiving\n",[70,5379,5380],{"class":72,"line":160},[70,5381,164],{"emptyLinePlaceholder":163},[70,5383,5384,5386,5388,5390,5393,5395],{"class":72,"line":167},[70,5385,5068],{"class":413},[70,5387,3025],{"class":80},[70,5389,3262],{"class":283},[70,5391,5392],{"class":80}," s ",[70,5394,5078],{"class":413},[70,5396,5397],{"class":80}," SAWS) {\n",[70,5399,5400],{"class":72,"line":175},[70,5401,5402],{"class":1301},"  // closest X on player box\n",[70,5404,5405,5407,5410,5412,5414,5417,5420,5422,5425,5427],{"class":72,"line":183},[70,5406,2995],{"class":283},[70,5408,5409],{"class":80}," nx ",[70,5411,1323],{"class":413},[70,5413,4071],{"class":80},[70,5415,5416],{"class":76},"max",[70,5418,5419],{"class":80},"(x.value, Math.",[70,5421,4074],{"class":76},[70,5423,5424],{"class":80},"(s.x, x.value ",[70,5426,4932],{"class":413},[70,5428,5429],{"class":80}," pw))\n",[70,5431,5432],{"class":72,"line":191},[70,5433,5434],{"class":1301},"  // closest Y on player box\n",[70,5436,5437,5439,5442,5444,5446,5448,5451,5453,5456,5458],{"class":72,"line":340},[70,5438,2995],{"class":283},[70,5440,5441],{"class":80}," ny ",[70,5443,1323],{"class":413},[70,5445,4071],{"class":80},[70,5447,5416],{"class":76},[70,5449,5450],{"class":80},"(y.value, Math.",[70,5452,4074],{"class":76},[70,5454,5455],{"class":80},"(s.y, y.value ",[70,5457,4932],{"class":413},[70,5459,5460],{"class":80}," ph))\n",[70,5462,5463],{"class":72,"line":352},[70,5464,164],{"emptyLinePlaceholder":163},[70,5466,5467,5469,5472,5474,5477,5479],{"class":72,"line":364},[70,5468,2995],{"class":283},[70,5470,5471],{"class":80}," dx ",[70,5473,1323],{"class":413},[70,5475,5476],{"class":80}," s.x ",[70,5478,77],{"class":413},[70,5480,5481],{"class":80}," nx\n",[70,5483,5484,5486,5489,5491,5494,5496],{"class":72,"line":375},[70,5485,2995],{"class":283},[70,5487,5488],{"class":80}," dy ",[70,5490,1323],{"class":413},[70,5492,5493],{"class":80}," s.y ",[70,5495,77],{"class":413},[70,5497,5498],{"class":80}," ny\n",[70,5500,5501],{"class":72,"line":381},[70,5502,164],{"emptyLinePlaceholder":163},[70,5504,5505,5507,5510,5512,5514,5516,5518,5520,5522,5524,5526,5528],{"class":72,"line":474},[70,5506,4648],{"class":413},[70,5508,5509],{"class":80}," (dx ",[70,5511,3324],{"class":413},[70,5513,5471],{"class":80},[70,5515,4932],{"class":413},[70,5517,5488],{"class":80},[70,5519,3324],{"class":413},[70,5521,5488],{"class":80},[70,5523,3395],{"class":413},[70,5525,5364],{"class":80},[70,5527,3324],{"class":413},[70,5529,5530],{"class":80}," r) {\n",[70,5532,5533,5536,5538,5541],{"class":72,"line":480},[70,5534,5535],{"class":76},"    emit",[70,5537,2984],{"class":80},[70,5539,5540],{"class":419},"'hit'",[70,5542,3037],{"class":80},[70,5544,5545,5548],{"class":72,"line":485},[70,5546,5547],{"class":76},"    respawn",[70,5549,2828],{"class":80},[70,5551,5552],{"class":72,"line":496},[70,5553,5554],{"class":413},"    return\n",[70,5556,5557],{"class":72,"line":507},[70,5558,378],{"class":80},[70,5560,5561],{"class":72,"line":518},[70,5562,384],{"class":80},[11,5564,5565,5566,5569,5570,5573],{},"That ",[67,5567,5568],{},"dx*dx + dy*dy \u003C r*r"," is the whole trick. It avoids ",[67,5571,5572],{},"Math.sqrt"," entirely. You only care if you're inside the radius, not the exact distance.",[11,5575,5576],{},"The goal, a little flag, is simpler. It's just a rectangle, so it reuses the same overlap check as platforms:",[59,5578,5580],{"className":3223,"code":5579,"language":3225,"meta":65,"style":65},"if (overlaps(x.value, y.value, pw, ph, GOAL)) {\n  emit('win')\n}\n",[67,5581,5582,5593,5605],{"__ignoreMap":65},[70,5583,5584,5586,5588,5590],{"class":72,"line":73},[70,5585,4726],{"class":413},[70,5587,3025],{"class":80},[70,5589,5090],{"class":76},[70,5591,5592],{"class":80},"(x.value, y.value, pw, ph, GOAL)) {\n",[70,5594,5595,5598,5600,5603],{"class":72,"line":160},[70,5596,5597],{"class":76},"  emit",[70,5599,2984],{"class":80},[70,5601,5602],{"class":419},"'win'",[70,5604,3037],{"class":80},[70,5606,5607],{"class":72,"line":167},[70,5608,384],{"class":80},[11,5610,5611],{},"Both cases just emit events upward. The player doesn't “decide” anything. It only reports what happened. The actual game state lives one level above, in Vue reactivity:",[59,5613,5615],{"className":3223,"code":5614,"language":3225,"meta":65,"style":65},"const lives = ref(START_LIVES)\nconst won = ref(false)\n\nconst active = computed(() => !won.value)\n\nfunction onHit() {\n  lives.value -= 1\n  if (lives.value \u003C= 0) lives.value = START_LIVES\n}\n\nfunction onWin() {\n  won.value = true\n}\n",[67,5616,5617,5631,5648,5652,5674,5678,5687,5698,5718,5722,5726,5735,5744],{"__ignoreMap":65},[70,5618,5619,5621,5624,5626,5628],{"class":72,"line":73},[70,5620,3262],{"class":283},[70,5622,5623],{"class":80}," lives ",[70,5625,1323],{"class":413},[70,5627,3270],{"class":76},[70,5629,5630],{"class":80},"(START_LIVES)\n",[70,5632,5633,5635,5638,5640,5642,5644,5646],{"class":72,"line":160},[70,5634,3262],{"class":283},[70,5636,5637],{"class":80}," won ",[70,5639,1323],{"class":413},[70,5641,3270],{"class":76},[70,5643,2984],{"class":80},[70,5645,4704],{"class":1311},[70,5647,3037],{"class":80},[70,5649,5650],{"class":72,"line":167},[70,5651,164],{"emptyLinePlaceholder":163},[70,5653,5654,5656,5659,5661,5664,5666,5668,5671],{"class":72,"line":175},[70,5655,3262],{"class":283},[70,5657,5658],{"class":80}," active ",[70,5660,1323],{"class":413},[70,5662,5663],{"class":76}," computed",[70,5665,4344],{"class":80},[70,5667,3308],{"class":283},[70,5669,5670],{"class":413}," !",[70,5672,5673],{"class":80},"won.value)\n",[70,5675,5676],{"class":72,"line":183},[70,5677,164],{"emptyLinePlaceholder":163},[70,5679,5680,5682,5685],{"class":72,"line":191},[70,5681,2814],{"class":283},[70,5683,5684],{"class":76}," onHit",[70,5686,2820],{"class":80},[70,5688,5689,5692,5695],{"class":72,"line":340},[70,5690,5691],{"class":80},"  lives.value ",[70,5693,5694],{"class":413},"-=",[70,5696,5697],{"class":1311}," 1\n",[70,5699,5700,5702,5705,5708,5710,5713,5715],{"class":72,"line":352},[70,5701,4648],{"class":413},[70,5703,5704],{"class":80}," (lives.value ",[70,5706,5707],{"class":413},"\u003C=",[70,5709,4576],{"class":1311},[70,5711,5712],{"class":80},") lives.value ",[70,5714,1323],{"class":413},[70,5716,5717],{"class":80}," START_LIVES\n",[70,5719,5720],{"class":72,"line":364},[70,5721,384],{"class":80},[70,5723,5724],{"class":72,"line":375},[70,5725,164],{"emptyLinePlaceholder":163},[70,5727,5728,5730,5733],{"class":72,"line":381},[70,5729,2814],{"class":283},[70,5731,5732],{"class":76}," onWin",[70,5734,2820],{"class":80},[70,5736,5737,5740,5742],{"class":72,"line":474},[70,5738,5739],{"class":80},"  won.value ",[70,5741,1323],{"class":413},[70,5743,2203],{"class":1311},[70,5745,5746],{"class":72,"line":480},[70,5747,384],{"class":80},[11,5749,5750,5753,5754,5757,5758,5761,5762,1130],{},[67,5751,5752],{},"respawn()"," stays inside the player, where it resets position and velocity. ",[67,5755,5756],{},"onHit"," just adjusts lives. Simple separation: the player handles ",[256,5759,5760],{},"where you are",", the world handles ",[256,5763,5764],{},"what that means",[11,5766,5767,5768,5771],{},"The important line here is ",[67,5769,5770],{},"active",". It flows straight into the player:",[59,5773,5775],{"className":3223,"code":5774,"language":3225,"meta":65,"style":65},"if (!props.active) return\n",[67,5776,5777],{"__ignoreMap":65},[70,5778,5779,5781,5783,5785,5788],{"class":72,"line":73},[70,5780,4726],{"class":413},[70,5782,3025],{"class":80},[70,5784,4671],{"class":413},[70,5786,5787],{"class":80},"props.active) ",[70,5789,5790],{"class":413},"return\n",[11,5792,5793,5794,5797,5798,5800],{},"So the moment ",[67,5795,5796],{},"won"," flips to ",[67,5799,4708],{},", the entire simulation stops updating. No more physics, no more movement, just a frozen world.",[11,5802,5803,5804,5807,5808,5810],{},"And the HUD is just another Vue component reacting to the same state. ",[67,5805,5806],{},"lives"," drives the hearts, ",[67,5809,5796],{}," drives the victory screen.",[11,5812,5813],{},"At this point, the whole game is just state flowing through components, and a loop deciding when that state gets updated.",[38,5815,5817],{"id":5816},"from-start-to-game-over","From Start to Game Over",[11,5819,5820],{},"Here's everything above in the order it actually happens inside a single tick of the loop:",[5822,5823,5824,5837,5851,5859,5865,5873,5885],"ol",{},[126,5825,5826,5829,5830,5833,5834,5836],{},[52,5827,5828],{},"Read input."," Check which keys are currently in the ",[67,5831,5832],{},"keys"," set, and whether ",[67,5835,4776],{}," was armed.",[126,5838,5839,775,5842,974,5844,5846,5847,5850],{},[52,5840,5841],{},"Jump.",[67,5843,4776],{},[67,5845,4715],{}," are true, set ",[67,5848,5849],{},"vy = jump"," and consume the flag.",[126,5852,5853,954,5856,1130],{},[52,5854,5855],{},"Apply gravity.",[67,5857,5858],{},"vy += gravity * dt",[126,5860,5861,5864],{},[52,5862,5863],{},"Move + resolve X."," Apply horizontal velocity, then push out of any wall collisions.",[126,5866,5867,5870,5871,1130],{},[52,5868,5869],{},"Move + resolve Y."," Apply vertical velocity, then snap to floors or ceilings, and recompute ",[67,5872,4715],{},[126,5874,5875,5878,5879,3799,5882,1130],{},[52,5876,5877],{},"Check the world."," Did we hit a saw, fall into a pit, or reach the goal? Emit ",[67,5880,5881],{},"hit",[67,5883,5884],{},"win",[126,5886,5887,5890],{},[52,5888,5889],{},"Render."," Pixi draws the updated scene, and the loop repeats.",[11,5892,5893,5894,5896,5897,5899,5900,5902],{},"Steps 1–6 are everything inside ",[67,5895,3215],{},". Step 7 is automatic: you're only mutating reactive ",[67,5898,2743],{},"s, and ",[67,5901,3208],{}," turns that into a redraw, just like Vue re-renders a template when state changes.",[38,5904,2337],{"id":2336},[11,5906,5907,5908,5910,5911,5914],{},"That's the entire platformer: a loop, a few ",[67,5909,2743],{},"s, and a lot of adding numbers. The blue box can now jump over platforms, avoid blades and reach the flag. Under the hood it's just ",[67,5912,5913],{},"vy += 0.55",", a rectangle overlap test, and Vue's reactivity doing what it does best. Suddenly this doesn't feel too alien, right? Let me tell you: if you were able to ship that dashboard or build that crazy data table, you already have what it takes to build a game!",[11,5916,5917,5918,4671],{},"Did you learn something new? Did you build a game? ",[46,5919,5922],{"href":5920,"rel":5921},"https://x.com/nicodevs",[116],"Let me know",[11,5924,2361],{},[1013,5926,5927],{},"html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .s7s5_, html code.shiki .s7s5_{--shiki-default:#AE81FF}html pre.shiki code .sW0Xf, html code.shiki .sW0Xf{--shiki-default:#FD971F;--shiki-default-font-style:italic}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .soZtE, html code.shiki .soZtE{--shiki-default:#A6E22E;--shiki-default-text-decoration:underline}",{"title":65,"searchDepth":160,"depth":160,"links":5929},[5930,5931,5932,5933,5934,5935,5941,5942,5943,5944],{"id":2761,"depth":160,"text":2762},{"id":2795,"depth":160,"text":2796},{"id":2911,"depth":160,"text":2912},{"id":3139,"depth":160,"text":3140},{"id":3192,"depth":160,"text":3193},{"id":3366,"depth":160,"text":3367,"children":5936},[5937,5938,5939,5940],{"id":3818,"depth":167,"text":3819},{"id":3841,"depth":167,"text":3842},{"id":3995,"depth":167,"text":3996},{"id":4216,"depth":167,"text":4217},{"id":4780,"depth":160,"text":4781},{"id":5341,"depth":160,"text":5342},{"id":5816,"depth":160,"text":5817},{"id":2336,"depth":160,"text":2337},"Vue","2026-06-26","Can I build a platformer game using Vue? Can my Vue skills help me in my game dev journey? Luckily, the answer to both questions is yes.","/img/blog/building-a-platformer-game-with-vue-and-pixijs.png",{},"/blog/building-a-platformer-game-with-vue-and-pixijs",{"title":2707,"description":5947},"blog/building-a-platformer-game-with-vue-and-pixijs","D0RgoTGCh65wb0I_whdMtWDTz1vvyoFa79SVGMqreVs",{"id":5,"title":6,"body":5955,"category":1025,"date":1026,"description":1027,"draft":1028,"extension":64,"image":1029,"meta":6699,"navigation":163,"path":1031,"seo":6700,"stem":1033,"tighten":1028,"__hash__":1034},{"type":8,"value":5956,"toc":6690},[5957,5959,5963,5965,5967,5971,5973,5975,5977,5983,5985,5997,6001,6005,6007,6009,6011,6016,6018,6030,6032,6034,6070,6072,6108,6110,6112,6114,6118,6122,6212,6214,6216,6220,6526,6528,6530,6620,6626,6628,6630,6632,6636,6638,6642,6644,6646,6678,6680,6682,6684,6686,6688],[11,5958,13],{},[15,5960,5961],{},[11,5962,19],{},[11,5964,22],{},[11,5966,25],{},[15,5968,5969],{},[11,5970,30],{},[11,5972,33],{},[11,5974,36],{},[38,5976,41],{"id":40},[11,5978,44,5979,50,5981],{},[46,5980,49],{"href":48},[52,5982,54],{},[11,5984,57],{},[59,5986,5987],{"className":61,"code":62,"filename":63,"language":64,"meta":65,"style":65},[67,5988,5989],{"__ignoreMap":65},[70,5990,5991,5993,5995],{"class":72,"line":73},[70,5992,77],{"class":76},[70,5994,81],{"class":80},[70,5996,85],{"class":84},[11,5998,88,5999,92],{},[67,6000,91],{},[11,6002,95,6003,98],{},[67,6004,63],{},[38,6006,102],{"id":101},[11,6008,105],{},[11,6010,108],{},[11,6012,111,6013,118],{},[46,6014,117],{"href":114,"rel":6015},[116],[11,6017,121],{},[123,6019,6020,6022,6024,6026,6028],{},[126,6021,128],{},[126,6023,131],{},[126,6025,134],{},[126,6027,137],{},[126,6029,140],{},[11,6031,143],{},[11,6033,146],{},[59,6035,6036],{"className":61,"code":149,"language":64,"meta":65,"style":65},[67,6037,6038,6042,6046,6052,6058,6064],{"__ignoreMap":65},[70,6039,6040],{"class":72,"line":73},[70,6041,157],{"class":156},[70,6043,6044],{"class":72,"line":160},[70,6045,164],{"emptyLinePlaceholder":163},[70,6047,6048,6050],{"class":72,"line":167},[70,6049,77],{"class":76},[70,6051,172],{"class":80},[70,6053,6054,6056],{"class":72,"line":175},[70,6055,77],{"class":76},[70,6057,180],{"class":80},[70,6059,6060,6062],{"class":72,"line":183},[70,6061,77],{"class":76},[70,6063,188],{"class":80},[70,6065,6066,6068],{"class":72,"line":191},[70,6067,77],{"class":76},[70,6069,196],{"class":80},[11,6071,199],{},[59,6073,6074],{"className":61,"code":202,"language":64,"meta":65,"style":65},[67,6075,6076,6080,6084,6090,6096,6102],{"__ignoreMap":65},[70,6077,6078],{"class":72,"line":73},[70,6079,209],{"class":156},[70,6081,6082],{"class":72,"line":160},[70,6083,164],{"emptyLinePlaceholder":163},[70,6085,6086,6088],{"class":72,"line":167},[70,6087,77],{"class":76},[70,6089,220],{"class":80},[70,6091,6092,6094],{"class":72,"line":175},[70,6093,77],{"class":76},[70,6095,227],{"class":80},[70,6097,6098,6100],{"class":72,"line":183},[70,6099,77],{"class":76},[70,6101,234],{"class":80},[70,6103,6104,6106],{"class":72,"line":191},[70,6105,77],{"class":76},[70,6107,241],{"class":80},[11,6109,244],{},[11,6111,247],{},[38,6113,251],{"id":250},[11,6115,254,6116,259],{},[256,6117,258],{},[11,6119,262,6120,266],{},[67,6121,265],{},[59,6123,6124],{"className":269,"code":270,"filename":265,"language":271,"meta":65,"style":65},[67,6125,6126,6130,6140,6150,6160,6166,6176,6186,6196,6204,6208],{"__ignoreMap":65},[70,6127,6128],{"class":72,"line":73},[70,6129,278],{"class":80},[70,6131,6132,6134,6136,6138],{"class":72,"line":160},[70,6133,284],{"class":283},[70,6135,287],{"class":80},[70,6137,291],{"class":290},[70,6139,294],{"class":80},[70,6141,6142,6144,6146,6148],{"class":72,"line":167},[70,6143,299],{"class":283},[70,6145,287],{"class":80},[70,6147,291],{"class":290},[70,6149,294],{"class":80},[70,6151,6152,6154,6156,6158],{"class":72,"line":175},[70,6153,310],{"class":283},[70,6155,287],{"class":80},[70,6157,315],{"class":290},[70,6159,294],{"class":80},[70,6161,6162,6164],{"class":72,"line":183},[70,6163,322],{"class":283},[70,6165,325],{"class":80},[70,6167,6168,6170,6172,6174],{"class":72,"line":191},[70,6169,330],{"class":283},[70,6171,287],{"class":80},[70,6173,335],{"class":290},[70,6175,294],{"class":80},[70,6177,6178,6180,6182,6184],{"class":72,"line":340},[70,6179,343],{"class":283},[70,6181,287],{"class":80},[70,6183,335],{"class":290},[70,6185,294],{"class":80},[70,6187,6188,6190,6192,6194],{"class":72,"line":352},[70,6189,355],{"class":283},[70,6191,287],{"class":80},[70,6193,335],{"class":290},[70,6195,294],{"class":80},[70,6197,6198,6200,6202],{"class":72,"line":364},[70,6199,367],{"class":283},[70,6201,287],{"class":80},[70,6203,372],{"class":290},[70,6205,6206],{"class":72,"line":375},[70,6207,378],{"class":80},[70,6209,6210],{"class":72,"line":381},[70,6211,384],{"class":80},[11,6213,387],{},[11,6215,390],{},[11,6217,393,6218,397],{},[67,6219,396],{},[59,6221,6222],{"className":61,"code":400,"filename":401,"language":64,"meta":65,"style":65},[67,6223,6224,6228,6236,6244,6248,6252,6256,6260,6264,6268,6276,6280,6284,6288,6298,6308,6318,6324,6334,6344,6354,6362,6366,6370,6374,6378,6382,6386,6390,6394,6398,6402,6410,6414,6418,6422,6426,6430,6434,6438,6442,6446,6450,6454,6458,6462,6466,6470,6474,6478,6482,6486,6490,6494,6498,6502,6506,6510,6520],{"__ignoreMap":65},[70,6225,6226],{"class":72,"line":73},[70,6227,408],{"class":80},[70,6229,6230,6232,6234],{"class":72,"line":160},[70,6231,414],{"class":413},[70,6233,287],{"class":80},[70,6235,420],{"class":419},[70,6237,6238,6240,6242],{"class":72,"line":167},[70,6239,425],{"class":413},[70,6241,287],{"class":80},[70,6243,430],{"class":419},[70,6245,6246],{"class":72,"line":175},[70,6247,408],{"class":80},[70,6249,6250],{"class":72,"line":183},[70,6251,164],{"emptyLinePlaceholder":163},[70,6253,6254],{"class":72,"line":191},[70,6255,443],{"class":80},[70,6257,6258],{"class":72,"line":340},[70,6259,164],{"emptyLinePlaceholder":163},[70,6261,6262],{"class":72,"line":352},[70,6263,452],{"class":156},[70,6265,6266],{"class":72,"line":364},[70,6267,164],{"emptyLinePlaceholder":163},[70,6269,6270,6272,6274],{"class":72,"line":375},[70,6271,461],{"class":80},[70,6273,464],{"class":84},[70,6275,467],{"class":80},[70,6277,6278],{"class":72,"line":381},[70,6279,164],{"emptyLinePlaceholder":163},[70,6281,6282],{"class":72,"line":474},[70,6283,477],{"class":80},[70,6285,6286],{"class":72,"line":480},[70,6287,278],{"class":80},[70,6289,6290,6292,6294,6296],{"class":72,"line":485},[70,6291,284],{"class":283},[70,6293,287],{"class":80},[70,6295,291],{"class":290},[70,6297,294],{"class":80},[70,6299,6300,6302,6304,6306],{"class":72,"line":496},[70,6301,299],{"class":283},[70,6303,287],{"class":80},[70,6305,291],{"class":290},[70,6307,294],{"class":80},[70,6309,6310,6312,6314,6316],{"class":72,"line":507},[70,6311,310],{"class":283},[70,6313,287],{"class":80},[70,6315,315],{"class":290},[70,6317,294],{"class":80},[70,6319,6320,6322],{"class":72,"line":518},[70,6321,322],{"class":283},[70,6323,325],{"class":80},[70,6325,6326,6328,6330,6332],{"class":72,"line":525},[70,6327,330],{"class":283},[70,6329,287],{"class":80},[70,6331,335],{"class":290},[70,6333,294],{"class":80},[70,6335,6336,6338,6340,6342],{"class":72,"line":536},[70,6337,343],{"class":283},[70,6339,287],{"class":80},[70,6341,335],{"class":290},[70,6343,294],{"class":80},[70,6345,6346,6348,6350,6352],{"class":72,"line":547},[70,6347,355],{"class":283},[70,6349,287],{"class":80},[70,6351,335],{"class":290},[70,6353,294],{"class":80},[70,6355,6356,6358,6360],{"class":72,"line":558},[70,6357,367],{"class":283},[70,6359,287],{"class":80},[70,6361,372],{"class":290},[70,6363,6364],{"class":72,"line":567},[70,6365,378],{"class":80},[70,6367,6368],{"class":72,"line":572},[70,6369,384],{"class":80},[70,6371,6372],{"class":72,"line":577},[70,6373,580],{"class":80},[70,6375,6376],{"class":72,"line":583},[70,6377,164],{"emptyLinePlaceholder":163},[70,6379,6380],{"class":72,"line":588},[70,6381,591],{"class":156},[70,6383,6384],{"class":72,"line":594},[70,6385,164],{"emptyLinePlaceholder":163},[70,6387,6388],{"class":72,"line":599},[70,6389,602],{"class":84},[70,6391,6392],{"class":72,"line":605},[70,6393,164],{"emptyLinePlaceholder":163},[70,6395,6396],{"class":72,"line":610},[70,6397,613],{"class":156},[70,6399,6400],{"class":72,"line":616},[70,6401,164],{"emptyLinePlaceholder":163},[70,6403,6404,6406,6408],{"class":72,"line":621},[70,6405,624],{"class":80},[70,6407,627],{"class":84},[70,6409,630],{"class":80},[70,6411,6412],{"class":72,"line":633},[70,6413,164],{"emptyLinePlaceholder":163},[70,6415,6416],{"class":72,"line":638},[70,6417,641],{"class":84},[70,6419,6420],{"class":72,"line":644},[70,6421,164],{"emptyLinePlaceholder":163},[70,6423,6424],{"class":72,"line":649},[70,6425,652],{"class":156},[70,6427,6428],{"class":72,"line":655},[70,6429,164],{"emptyLinePlaceholder":163},[70,6431,6432],{"class":72,"line":660},[70,6433,663],{"class":84},[70,6435,6436],{"class":72,"line":666},[70,6437,164],{"emptyLinePlaceholder":163},[70,6439,6440],{"class":72,"line":671},[70,6441,674],{"class":156},[70,6443,6444],{"class":72,"line":677},[70,6445,164],{"emptyLinePlaceholder":163},[70,6447,6448],{"class":72,"line":682},[70,6449,685],{"class":80},[70,6451,6452],{"class":72,"line":688},[70,6453,164],{"emptyLinePlaceholder":163},[70,6455,6456],{"class":72,"line":693},[70,6457,696],{"class":84},[70,6459,6460],{"class":72,"line":699},[70,6461,164],{"emptyLinePlaceholder":163},[70,6463,6464],{"class":72,"line":704},[70,6465,707],{"class":156},[70,6467,6468],{"class":72,"line":710},[70,6469,164],{"emptyLinePlaceholder":163},[70,6471,6472],{"class":72,"line":715},[70,6473,718],{"class":84},[70,6475,6476],{"class":72,"line":721},[70,6477,164],{"emptyLinePlaceholder":163},[70,6479,6480],{"class":72,"line":726},[70,6481,729],{"class":156},[70,6483,6484],{"class":72,"line":732},[70,6485,164],{"emptyLinePlaceholder":163},[70,6487,6488],{"class":72,"line":737},[70,6489,740],{"class":80},[70,6491,6492],{"class":72,"line":743},[70,6493,164],{"emptyLinePlaceholder":163},[70,6495,6496],{"class":72,"line":748},[70,6497,751],{"class":84},[70,6499,6500],{"class":72,"line":754},[70,6501,164],{"emptyLinePlaceholder":163},[70,6503,6504],{"class":72,"line":759},[70,6505,762],{"class":156},[70,6507,6508],{"class":72,"line":765},[70,6509,164],{"emptyLinePlaceholder":163},[70,6511,6512,6514,6516,6518],{"class":72,"line":770},[70,6513,77],{"class":76},[70,6515,775],{"class":80},[70,6517,464],{"class":84},[70,6519,780],{"class":80},[70,6521,6522,6524],{"class":72,"line":783},[70,6523,77],{"class":76},[70,6525,788],{"class":80},[38,6527,792],{"id":791},[11,6529,795],{},[59,6531,6532],{"className":61,"code":798,"filename":799,"language":64,"meta":65,"style":65},[67,6533,6534,6538,6546,6554,6558,6562,6566,6570,6580,6590,6596,6610],{"__ignoreMap":65},[70,6535,6536],{"class":72,"line":73},[70,6537,408],{"class":80},[70,6539,6540,6542,6544],{"class":72,"line":160},[70,6541,414],{"class":413},[70,6543,287],{"class":80},[70,6545,814],{"class":419},[70,6547,6548,6550,6552],{"class":72,"line":167},[70,6549,425],{"class":413},[70,6551,287],{"class":80},[70,6553,823],{"class":419},[70,6555,6556],{"class":72,"line":175},[70,6557,408],{"class":80},[70,6559,6560],{"class":72,"line":183},[70,6561,164],{"emptyLinePlaceholder":163},[70,6563,6564],{"class":72,"line":191},[70,6565,836],{"class":156},[70,6567,6568],{"class":72,"line":340},[70,6569,164],{"emptyLinePlaceholder":163},[70,6571,6572,6574,6576,6578],{"class":72,"line":352},[70,6573,845],{"class":76},[70,6575,848],{"class":80},[70,6577,851],{"class":84},[70,6579,854],{"class":80},[70,6581,6582,6584,6586,6588],{"class":72,"line":364},[70,6583,859],{"class":76},[70,6585,848],{"class":80},[70,6587,851],{"class":84},[70,6589,866],{"class":80},[70,6591,6592,6594],{"class":72,"line":375},[70,6593,871],{"class":76},[70,6595,874],{"class":80},[70,6597,6598,6600,6602,6604,6606,6608],{"class":72,"line":381},[70,6599,879],{"class":76},[70,6601,848],{"class":80},[70,6603,884],{"class":84},[70,6605,887],{"class":80},[70,6607,890],{"class":84},[70,6609,893],{"class":80},[70,6611,6612,6614,6616,6618],{"class":72,"line":474},[70,6613,898],{"class":76},[70,6615,848],{"class":80},[70,6617,851],{"class":84},[70,6619,905],{"class":80},[11,6621,908,6622,911,6624,914],{},[67,6623,91],{},[67,6625,396],{},[11,6627,917],{},[38,6629,921],{"id":920},[11,6631,924],{},[15,6633,6634],{},[11,6635,929],{},[11,6637,932],{},[11,6639,935,6640,939],{},[256,6641,938],{},[38,6643,943],{"id":942},[11,6645,946],{},[123,6647,6648,6658,6666,6672],{},[126,6649,6650,954,6652,957,6654,960,6656,964],{},[52,6651,953],{},[67,6653,91],{},[67,6655,396],{},[67,6657,963],{},[126,6659,6660,970,6662,974,6664,978],{},[52,6661,969],{},[67,6663,973],{},[67,6665,977],{},[126,6667,6668,954,6670,986],{},[52,6669,983],{},[67,6671,963],{},[126,6673,6674,992,6676,995],{},[52,6675,991],{},[67,6677,265],{},[11,6679,998],{},[38,6681,1002],{"id":1001},[11,6683,1005],{},[11,6685,1008],{},[11,6687,1011],{},[1013,6689,1015],{},{"title":65,"searchDepth":160,"depth":160,"links":6691},[6692,6693,6694,6695,6696,6697,6698],{"id":40,"depth":160,"text":41},{"id":101,"depth":160,"text":102},{"id":250,"depth":160,"text":251},{"id":791,"depth":160,"text":792},{"id":920,"depth":160,"text":921},{"id":942,"depth":160,"text":943},{"id":1001,"depth":160,"text":1002},{},{"title":6,"description":1027},[6702,7748,7952],{"id":1036,"title":1037,"body":6703,"category":1025,"date":2375,"description":2376,"draft":1028,"extension":64,"image":2377,"meta":7746,"navigation":163,"path":48,"seo":7747,"stem":2380,"tighten":1028,"__hash__":2381},{"type":8,"value":6704,"toc":7736},[6705,6711,6715,6717,6719,6725,6727,6731,6737,6739,6741,6743,6751,6755,6765,6767,6803,6805,6817,6823,6827,6829,6831,6835,6837,6839,6841,6853,6855,6863,6868,6872,7022,7028,7040,7042,7044,7046,7048,7052,7054,7086,7088,7094,7098,7100,7104,7106,7142,7146,7148,7150,7154,7156,7170,7172,7176,7181,7195,7197,7471,7477,7481,7653,7657,7709,7713,7715,7717,7719,7721,7723,7728,7732,7734],[11,6706,1042,6707,1046,6709,1050],{},[256,6708,1045],{},[256,6710,1049],{},[11,6712,1053,6713,1057],{},[52,6714,1056],{},[11,6716,1060],{},[11,6718,1063],{},[15,6720,6721],{},[11,6722,1068,6723,1072],{},[256,6724,1071],{},[11,6726,1075],{},[15,6728,6729],{},[11,6730,1080],{},[11,6732,1083,6733,1087,6735],{},[256,6734,1086],{},[256,6736,1090],{},[38,6738,1094],{"id":1093},[11,6740,1097],{},[11,6742,1100],{},[11,6744,1103,6745,1107,6747,1111,6749,1114],{},[67,6746,1106],{},[67,6748,1110],{},[67,6750,63],{},[11,6752,6753,1119],{},[67,6754,63],{},[123,6756,6757,6763],{},[126,6758,1124,6759,1127,6761,1130],{},[67,6760,414],{},[67,6762,425],{},[126,6764,1133],{},[11,6766,1136],{},[59,6768,6769],{"className":61,"code":1139,"filename":1140,"language":64,"meta":65,"style":65},[67,6770,6771,6775,6783,6791,6795,6799],{"__ignoreMap":65},[70,6772,6773],{"class":72,"line":73},[70,6774,408],{"class":80},[70,6776,6777,6779,6781],{"class":72,"line":160},[70,6778,414],{"class":413},[70,6780,287],{"class":80},[70,6782,1155],{"class":419},[70,6784,6785,6787,6789],{"class":72,"line":167},[70,6786,425],{"class":413},[70,6788,287],{"class":80},[70,6790,1164],{"class":419},[70,6792,6793],{"class":72,"line":175},[70,6794,408],{"class":80},[70,6796,6797],{"class":72,"line":183},[70,6798,164],{"emptyLinePlaceholder":163},[70,6800,6801],{"class":72,"line":191},[70,6802,1177],{"class":80},[11,6804,1180],{},[123,6806,6807,6813],{},[126,6808,6809,1188,6811,1192],{},[52,6810,1187],{},[67,6812,1191],{},[126,6814,6815,1198],{},[52,6816,1197],{},[1200,6818,6819],{"color":1202,"icon":1203},[11,6820,1206,6821,1210],{},[67,6822,1209],{},[11,6824,1213,6825,1216],{},[67,6826,425],{},[11,6828,1219],{},[38,6830,1223],{"id":1222},[11,6832,1226,6833,1230],{},[52,6834,1229],{},[1232,6836,1235],{"id":1234},[11,6838,1238],{},[11,6840,1241],{},[59,6842,6843],{"className":1244,"code":1245,"filename":63,"language":1246,"meta":65,"style":65},[67,6844,6845,6849],{"__ignoreMap":65},[70,6846,6847],{"class":72,"line":73},[70,6848,1253],{"class":413},[70,6850,6851],{"class":72,"line":160},[70,6852,1258],{"class":76},[11,6854,1261],{},[11,6856,1264,6857,1268,6859,1272,6861,1276],{},[67,6858,1267],{},[67,6860,1271],{},[67,6862,1275],{},[59,6864,6866],{"className":6865,"code":1281,"language":1282,"meta":65},[1280],[67,6867,1281],{"__ignoreMap":65},[11,6869,6870,1289],{},[67,6871,1275],{},[59,6873,6874],{"className":1292,"code":1293,"filename":1275,"language":1294,"meta":65,"style":65},[67,6875,6876,6880,6888,6920,6942,6946,6950,6970,6974,6978,7006,7010,7014],{"__ignoreMap":65},[70,6877,6878],{"class":72,"line":73},[70,6879,1302],{"class":1301},[70,6881,6882,6884,6886],{"class":72,"line":160},[70,6883,1308],{"class":1307},[70,6885,1312],{"class":1311},[70,6887,1315],{"class":419},[70,6889,6890,6892,6894,6896,6898,6900,6902,6904,6906,6908,6910,6912,6914,6916,6918],{"class":72,"line":167},[70,6891,1320],{"class":80},[70,6893,1323],{"class":413},[70,6895,1326],{"class":419},[70,6897,1330],{"class":1329},[70,6899,1333],{"class":413},[70,6901,1336],{"class":80},[70,6903,1339],{"class":413},[70,6905,1342],{"class":80},[70,6907,1130],{"class":419},[70,6909,1347],{"class":80},[70,6911,1350],{"class":419},[70,6913,1353],{"class":80},[70,6915,1356],{"class":419},[70,6917,1359],{"class":1329},[70,6919,1362],{"class":419},[70,6921,6922,6924,6926,6928,6930,6932,6934,6936,6938,6940],{"class":72,"line":175},[70,6923,1367],{"class":80},[70,6925,1323],{"class":413},[70,6927,1326],{"class":419},[70,6929,1374],{"class":1329},[70,6931,1377],{"class":413},[70,6933,1380],{"class":80},[70,6935,1130],{"class":419},[70,6937,1385],{"class":80},[70,6939,1359],{"class":1329},[70,6941,1362],{"class":419},[70,6943,6944],{"class":72,"line":183},[70,6945,164],{"emptyLinePlaceholder":163},[70,6947,6948],{"class":72,"line":191},[70,6949,1398],{"class":1301},[70,6951,6952,6954,6956,6958,6960,6962,6964,6966,6968],{"class":72,"line":340},[70,6953,1271],{"class":76},[70,6955,1405],{"class":1311},[70,6957,1408],{"class":419},[70,6959,1411],{"class":80},[70,6961,1326],{"class":419},[70,6963,1416],{"class":1311},[70,6965,1419],{"class":419},[70,6967,1422],{"class":1311},[70,6969,1425],{"class":419},[70,6971,6972],{"class":72,"line":352},[70,6973,164],{"emptyLinePlaceholder":163},[70,6975,6976],{"class":72,"line":364},[70,6977,1434],{"class":1301},[70,6979,6980,6982,6984,6986,6988,6990,6992,6994,6996,6998,7000,7002,7004],{"class":72,"line":375},[70,6981,1271],{"class":76},[70,6983,1405],{"class":1311},[70,6985,1408],{"class":419},[70,6987,1411],{"class":80},[70,6989,1326],{"class":419},[70,6991,1405],{"class":1311},[70,6993,1451],{"class":419},[70,6995,1454],{"class":1311},[70,6997,1457],{"class":419},[70,6999,1422],{"class":1311},[70,7001,1408],{"class":419},[70,7003,1464],{"class":80},[70,7005,1362],{"class":419},[70,7007,7008],{"class":72,"line":381},[70,7009,164],{"emptyLinePlaceholder":163},[70,7011,7012],{"class":72,"line":474},[70,7013,1475],{"class":1301},[70,7015,7016,7018,7020],{"class":72,"line":480},[70,7017,1480],{"class":76},[70,7019,1483],{"class":1311},[70,7021,1425],{"class":419},[11,7023,1488,7024,1491,7026,1495],{},[67,7025,63],{},[67,7027,1494],{},[59,7029,7030],{"className":61,"code":1498,"language":64,"meta":65,"style":65},[67,7031,7032],{"__ignoreMap":65},[70,7033,7034,7036,7038],{"class":72,"line":73},[70,7035,1505],{"class":80},[70,7037,1508],{"class":84},[70,7039,1511],{"class":80},[11,7041,1514],{},[11,7043,1517],{},[1232,7045,1521],{"id":1520},[11,7047,1524],{},[11,7049,1527,7050,1130],{},[67,7051,63],{},[11,7053,1532],{},[59,7055,7056],{"className":61,"code":1535,"filename":63,"language":64,"meta":65,"style":65},[67,7057,7058,7072],{"__ignoreMap":65},[70,7059,7060,7062,7064,7066,7068,7070],{"class":72,"line":73},[70,7061,77],{"class":76},[70,7063,1544],{"class":80},[70,7065,1547],{"class":1311},[70,7067,1550],{"class":80},[70,7069,1547],{"class":419},[70,7071,1555],{"class":80},[70,7073,7074,7076,7078,7080,7082,7084],{"class":72,"line":160},[70,7075,77],{"class":76},[70,7077,1562],{"class":80},[70,7079,1565],{"class":1311},[70,7081,1550],{"class":80},[70,7083,1565],{"class":419},[70,7085,1572],{"class":80},[11,7087,1575],{},[11,7089,1578,7090,1582,7092,1585],{},[52,7091,1581],{},[67,7093,63],{},[11,7095,1588,7096,1591],{},[67,7097,63],{},[1232,7099,1595],{"id":1594},[11,7101,1598,7102,1602],{},[67,7103,1601],{},[11,7105,1605],{},[59,7107,7108],{"className":61,"code":1608,"language":64,"meta":65,"style":65},[67,7109,7110,7114,7122,7130,7138],{"__ignoreMap":65},[70,7111,7112],{"class":72,"line":73},[70,7113,408],{"class":80},[70,7115,7116,7118,7120],{"class":72,"line":160},[70,7117,414],{"class":413},[70,7119,287],{"class":80},[70,7121,1623],{"class":419},[70,7123,7124,7126,7128],{"class":72,"line":167},[70,7125,425],{"class":413},[70,7127,287],{"class":80},[70,7129,1632],{"class":419},[70,7131,7132,7134,7136],{"class":72,"line":175},[70,7133,1601],{"class":413},[70,7135,287],{"class":80},[70,7137,1641],{"class":419},[70,7139,7140],{"class":72,"line":183},[70,7141,408],{"class":80},[11,7143,1648,7144,1652],{},[67,7145,1651],{},[1654,7147],{},[38,7149,1659],{"id":1658},[11,7151,1662,7152,1665],{},[67,7153,91],{},[11,7155,1668],{},[123,7157,7158,7160,7162,7164,7166,7168],{},[126,7159,1673],{},[126,7161,1676],{},[126,7163,1679],{},[126,7165,1682],{},[126,7167,1685],{},[126,7169,1688],{},[11,7171,1691],{},[11,7173,1694,7174,1697],{},[67,7175,63],{},[59,7177,7179],{"className":7178,"code":1701,"language":1282,"meta":65},[1280],[67,7180,1701],{"__ignoreMap":65},[123,7182,7183,7187,7191],{},[126,7184,7185,1710],{},[67,7186,63],{},[126,7188,7189,1716],{},[67,7190,1715],{},[126,7192,7193,1722],{},[67,7194,1721],{},[11,7196,1725],{},[59,7198,7199],{"className":61,"code":1728,"filename":63,"language":64,"meta":65,"style":65},[67,7200,7201,7205,7213,7221,7229,7233,7237,7241,7245,7249,7253,7257,7261,7265,7269,7273,7277,7283,7287,7291,7295,7301,7305,7309,7313,7319,7323,7327,7331,7345,7349,7355,7359,7363,7383,7413,7417,7421,7425,7429,7433,7437,7441,7445,7449,7453,7459,7465],{"__ignoreMap":65},[70,7202,7203],{"class":72,"line":73},[70,7204,408],{"class":80},[70,7206,7207,7209,7211],{"class":72,"line":160},[70,7208,414],{"class":413},[70,7210,287],{"class":80},[70,7212,1743],{"class":419},[70,7214,7215,7217,7219],{"class":72,"line":167},[70,7216,425],{"class":413},[70,7218,287],{"class":80},[70,7220,1752],{"class":419},[70,7222,7223,7225,7227],{"class":72,"line":175},[70,7224,1601],{"class":413},[70,7226,287],{"class":80},[70,7228,1761],{"class":419},[70,7230,7231],{"class":72,"line":183},[70,7232,408],{"class":80},[70,7234,7235],{"class":72,"line":191},[70,7236,164],{"emptyLinePlaceholder":163},[70,7238,7239],{"class":72,"line":340},[70,7240,1774],{"class":156},[70,7242,7243],{"class":72,"line":352},[70,7244,164],{"emptyLinePlaceholder":163},[70,7246,7247],{"class":72,"line":364},[70,7248,1783],{"class":80},[70,7250,7251],{"class":72,"line":375},[70,7252,164],{"emptyLinePlaceholder":163},[70,7254,7255],{"class":72,"line":381},[70,7256,1792],{"class":156},[70,7258,7259],{"class":72,"line":474},[70,7260,164],{"emptyLinePlaceholder":163},[70,7262,7263],{"class":72,"line":480},[70,7264,1801],{"class":84},[70,7266,7267],{"class":72,"line":485},[70,7268,164],{"emptyLinePlaceholder":163},[70,7270,7271],{"class":72,"line":496},[70,7272,836],{"class":156},[70,7274,7275],{"class":72,"line":507},[70,7276,164],{"emptyLinePlaceholder":163},[70,7278,7279,7281],{"class":72,"line":518},[70,7280,845],{"class":76},[70,7282,1820],{"class":80},[70,7284,7285],{"class":72,"line":525},[70,7286,164],{"emptyLinePlaceholder":163},[70,7288,7289],{"class":72,"line":536},[70,7290,1829],{"class":84},[70,7292,7293],{"class":72,"line":547},[70,7294,164],{"emptyLinePlaceholder":163},[70,7296,7297,7299],{"class":72,"line":558},[70,7298,859],{"class":76},[70,7300,1840],{"class":80},[70,7302,7303],{"class":72,"line":567},[70,7304,164],{"emptyLinePlaceholder":163},[70,7306,7307],{"class":72,"line":572},[70,7308,1849],{"class":84},[70,7310,7311],{"class":72,"line":577},[70,7312,164],{"emptyLinePlaceholder":163},[70,7314,7315,7317],{"class":72,"line":583},[70,7316,871],{"class":76},[70,7318,1860],{"class":80},[70,7320,7321],{"class":72,"line":588},[70,7322,164],{"emptyLinePlaceholder":163},[70,7324,7325],{"class":72,"line":594},[70,7326,1869],{"class":84},[70,7328,7329],{"class":72,"line":599},[70,7330,164],{"emptyLinePlaceholder":163},[70,7332,7333,7335,7337,7339,7341,7343],{"class":72,"line":605},[70,7334,879],{"class":76},[70,7336,1880],{"class":80},[70,7338,1715],{"class":1311},[70,7340,1550],{"class":80},[70,7342,1715],{"class":419},[70,7344,1889],{"class":80},[70,7346,7347],{"class":72,"line":610},[70,7348,164],{"emptyLinePlaceholder":163},[70,7350,7351,7353],{"class":72,"line":616},[70,7352,898],{"class":76},[70,7354,1900],{"class":80},[70,7356,7357],{"class":72,"line":621},[70,7358,164],{"emptyLinePlaceholder":163},[70,7360,7361],{"class":72,"line":633},[70,7362,1909],{"class":80},[70,7364,7365,7367,7369,7371,7373,7375,7377,7379,7381],{"class":72,"line":638},[70,7366,1914],{"class":76},[70,7368,1917],{"class":419},[70,7370,1920],{"class":1311},[70,7372,1923],{"class":419},[70,7374,1926],{"class":419},[70,7376,1914],{"class":76},[70,7378,1931],{"class":419},[70,7380,1934],{"class":1311},[70,7382,1937],{"class":419},[70,7384,7385,7387,7389,7391,7393,7395,7397,7399,7401,7403,7405,7407,7409,7411],{"class":72,"line":644},[70,7386,1942],{"class":76},[70,7388,1945],{"class":419},[70,7390,1948],{"class":419},[70,7392,1951],{"class":1311},[70,7394,1350],{"class":413},[70,7396,1956],{"class":419},[70,7398,1959],{"class":80},[70,7400,1356],{"class":413},[70,7402,1964],{"class":1311},[70,7404,1967],{"class":419},[70,7406,1970],{"class":1311},[70,7408,1973],{"class":419},[70,7410,1976],{"class":413},[70,7412,1979],{"class":80},[70,7414,7415],{"class":72,"line":649},[70,7416,1984],{"class":419},[70,7418,7419],{"class":72,"line":655},[70,7420,1989],{"class":80},[70,7422,7423],{"class":72,"line":660},[70,7424,580],{"class":80},[70,7426,7427],{"class":72,"line":666},[70,7428,164],{"emptyLinePlaceholder":163},[70,7430,7431],{"class":72,"line":671},[70,7432,2002],{"class":156},[70,7434,7435],{"class":72,"line":677},[70,7436,164],{"emptyLinePlaceholder":163},[70,7438,7439],{"class":72,"line":682},[70,7440,2011],{"class":80},[70,7442,7443],{"class":72,"line":688},[70,7444,164],{"emptyLinePlaceholder":163},[70,7446,7447],{"class":72,"line":693},[70,7448,2020],{"class":156},[70,7450,7451],{"class":72,"line":699},[70,7452,164],{"emptyLinePlaceholder":163},[70,7454,7455,7457],{"class":72,"line":704},[70,7456,77],{"class":76},[70,7458,2031],{"class":80},[70,7460,7461,7463],{"class":72,"line":710},[70,7462,77],{"class":76},[70,7464,2038],{"class":80},[70,7466,7467,7469],{"class":72,"line":715},[70,7468,77],{"class":76},[70,7470,2045],{"class":80},[11,7472,2048,7473,2052,7475],{},[52,7474,2051],{},[52,7476,2055],{},[11,7478,2058,7479],{},[52,7480,2061],{},[59,7482,7483],{"className":1292,"code":2064,"filename":1721,"language":1294,"meta":65,"style":65},[67,7484,7485,7489,7493,7497,7501,7509,7513,7549,7585,7589,7607,7619,7627,7641],{"__ignoreMap":65},[70,7486,7487],{"class":72,"line":73},[70,7488,1302],{"class":1301},[70,7490,7491],{"class":72,"line":160},[70,7492,2075],{"class":1301},[70,7494,7495],{"class":72,"line":167},[70,7496,2080],{"class":1301},[70,7498,7499],{"class":72,"line":175},[70,7500,2085],{"class":1301},[70,7502,7503,7505,7507],{"class":72,"line":183},[70,7504,1308],{"class":1307},[70,7506,1312],{"class":1311},[70,7508,1315],{"class":419},[70,7510,7511],{"class":72,"line":191},[70,7512,164],{"emptyLinePlaceholder":163},[70,7514,7515,7517,7519,7521,7523,7525,7527,7529,7531,7533,7535,7537,7539,7541,7543,7545,7547],{"class":72,"line":340},[70,7516,2102],{"class":80},[70,7518,1323],{"class":413},[70,7520,1326],{"class":419},[70,7522,1330],{"class":1329},[70,7524,1333],{"class":413},[70,7526,1336],{"class":80},[70,7528,1339],{"class":413},[70,7530,2117],{"class":80},[70,7532,1130],{"class":419},[70,7534,1347],{"class":80},[70,7536,1350],{"class":419},[70,7538,2126],{"class":80},[70,7540,2129],{"class":419},[70,7542,2132],{"class":80},[70,7544,1356],{"class":419},[70,7546,1359],{"class":1329},[70,7548,1362],{"class":419},[70,7550,7551,7553,7555,7557,7559,7561,7563,7565,7567,7569,7571,7573,7575,7577,7579,7581,7583],{"class":72,"line":352},[70,7552,2143],{"class":80},[70,7554,1323],{"class":413},[70,7556,1326],{"class":419},[70,7558,1374],{"class":1329},[70,7560,1333],{"class":413},[70,7562,1336],{"class":80},[70,7564,1339],{"class":413},[70,7566,2117],{"class":80},[70,7568,1130],{"class":419},[70,7570,1347],{"class":80},[70,7572,1350],{"class":419},[70,7574,2126],{"class":80},[70,7576,2129],{"class":419},[70,7578,2132],{"class":80},[70,7580,1356],{"class":419},[70,7582,1359],{"class":1329},[70,7584,1362],{"class":419},[70,7586,7587],{"class":72,"line":364},[70,7588,164],{"emptyLinePlaceholder":163},[70,7590,7591,7593,7595,7597,7599,7601,7603,7605],{"class":72,"line":375},[70,7592,1914],{"class":76},[70,7594,2186],{"class":419},[70,7596,1917],{"class":419},[70,7598,2191],{"class":1311},[70,7600,2194],{"class":1311},[70,7602,2197],{"class":419},[70,7604,2200],{"class":413},[70,7606,2203],{"class":1307},[70,7608,7609,7611,7613,7615,7617],{"class":72,"line":381},[70,7610,1914],{"class":76},[70,7612,2210],{"class":419},[70,7614,1408],{"class":419},[70,7616,2215],{"class":80},[70,7618,1362],{"class":419},[70,7620,7621,7623,7625],{"class":72,"line":474},[70,7622,1914],{"class":76},[70,7624,2224],{"class":419},[70,7626,2227],{"class":1311},[70,7628,7629,7631,7633,7635,7637,7639],{"class":72,"line":480},[70,7630,1914],{"class":76},[70,7632,2210],{"class":419},[70,7634,2236],{"class":1311},[70,7636,1408],{"class":419},[70,7638,2241],{"class":80},[70,7640,1362],{"class":419},[70,7642,7643,7645,7647,7649,7651],{"class":72,"line":485},[70,7644,1914],{"class":76},[70,7646,2186],{"class":419},[70,7648,2252],{"class":419},[70,7650,2200],{"class":413},[70,7652,2203],{"class":1307},[11,7654,2259,7655,2263],{},[52,7656,2262],{},[59,7658,7659],{"className":61,"code":2266,"filename":1715,"language":64,"meta":65,"style":65},[67,7660,7661,7665,7669,7673,7677,7681,7685,7691,7695,7699,7703],{"__ignoreMap":65},[70,7662,7663],{"class":72,"line":73},[70,7664,2273],{"class":156},[70,7666,7667],{"class":72,"line":160},[70,7668,164],{"emptyLinePlaceholder":163},[70,7670,7671],{"class":72,"line":167},[70,7672,2282],{"class":80},[70,7674,7675],{"class":72,"line":175},[70,7676,164],{"emptyLinePlaceholder":163},[70,7678,7679],{"class":72,"line":183},[70,7680,2291],{"class":156},[70,7682,7683],{"class":72,"line":191},[70,7684,164],{"emptyLinePlaceholder":163},[70,7686,7687,7689],{"class":72,"line":340},[70,7688,77],{"class":76},[70,7690,2302],{"class":80},[70,7692,7693],{"class":72,"line":352},[70,7694,164],{"emptyLinePlaceholder":163},[70,7696,7697],{"class":72,"line":364},[70,7698,2311],{"class":156},[70,7700,7701],{"class":72,"line":375},[70,7702,164],{"emptyLinePlaceholder":163},[70,7704,7705,7707],{"class":72,"line":381},[70,7706,845],{"class":76},[70,7708,2322],{"class":80},[11,7710,2325,7711,2328],{},[67,7712,973],{},[11,7714,2331],{},[1654,7716],{},[38,7718,2337],{"id":2336},[11,7720,2340],{},[11,7722,2343],{},[11,7724,2346,7725,2352],{},[46,7726,2351],{"href":2349,"rel":7727},[116],[11,7729,44,7730,2358],{},[46,7731,2357],{"href":1031},[11,7733,2361],{},[1013,7735,2364],{},{"title":65,"searchDepth":160,"depth":160,"links":7737},[7738,7739,7744,7745],{"id":1093,"depth":160,"text":1094},{"id":1222,"depth":160,"text":1223,"children":7740},[7741,7742,7743],{"id":1234,"depth":167,"text":1235},{"id":1520,"depth":167,"text":1521},{"id":1594,"depth":167,"text":1595},{"id":1658,"depth":160,"text":1659},{"id":2336,"depth":160,"text":2337},{},{"title":1037,"description":2376},{"id":2383,"title":2384,"body":7749,"category":1025,"date":2697,"description":2698,"draft":1028,"extension":64,"image":2699,"meta":7950,"navigation":163,"path":2701,"seo":7951,"stem":2703,"tighten":1028,"__hash__":2704},{"type":8,"value":7750,"toc":7940},[7751,7757,7759,7763,7765,7769,7771,7773,7775,7779,7783,7785,7787,7789,7791,7795,7797,7799,7801,7805,7807,7809,7815,7819,7821,7823,7825,7827,7831,7833,7835,7837,7839,7841,7845,7847,7853,7855,7859,7885,7889,7891,7895,7897,7901,7905,7910,7912,7920,7924,7930,7932,7934,7936,7938],[11,7752,2389,7753,2393,7755,2397],{},[52,7754,2392],{},[256,7756,2396],{},[11,7758,2400],{},[15,7760,7761],{},[11,7762,2405],{},[11,7764,2408],{},[15,7766,7767],{},[11,7768,2413],{},[11,7770,2416],{},[11,7772,2419],{},[38,7774,2423],{"id":2422},[11,7776,2426,7777,2430],{},[52,7778,2429],{},[11,7780,2433,7781,2437],{},[256,7782,2436],{},[11,7784,2440],{},[11,7786,2443],{},[11,7788,2446],{},[11,7790,2449],{},[11,7792,2452,7793,2455],{},[52,7794,2429],{},[11,7796,2458],{},[1232,7798,2462],{"id":2461},[11,7800,2465],{},[15,7802,7803],{},[11,7804,2470],{},[11,7806,2473],{},[11,7808,2476],{},[11,7810,2479,7811,2483,7813,2487],{},[52,7812,2482],{},[67,7814,2486],{},[11,7816,2490,7817,2494],{},[256,7818,2493],{},[11,7820,2497],{},[11,7822,2500],{},[38,7824,2504],{"id":2503},[11,7826,2507],{},[11,7828,7829],{},[52,7830,2512],{},[11,7832,2515],{},[11,7834,2518],{},[11,7836,2521],{},[1232,7838,2525],{"id":2524},[11,7840,2528],{},[15,7842,7843],{},[11,7844,2533],{},[11,7846,2536],{},[11,7848,2539,7849,974,7851,2546],{},[256,7850,2542],{},[256,7852,2545],{},[11,7854,2549],{},[11,7856,2552,7857,2556],{},[52,7858,2555],{},[123,7860,7861,7865,7869,7873,7877,7881],{},[126,7862,7863,2564],{},[52,7864,2563],{},[126,7866,7867,2570],{},[52,7868,2569],{},[126,7870,7871,2576],{},[52,7872,2575],{},[126,7874,7875,2582],{},[52,7876,2581],{},[126,7878,7879,2588],{},[52,7880,2587],{},[126,7882,7883,2594],{},[52,7884,2593],{},[11,7886,2597,7887,2601],{},[256,7888,2600],{},[11,7890,2604],{},[11,7892,2607,7893,2611],{},[52,7894,2610],{},[38,7896,2615],{"id":2614},[11,7898,2618,7899,2622],{},[256,7900,2621],{},[15,7902,7903],{},[11,7904,2627],{},[11,7906,2630,7907,2636],{},[46,7908,2635],{"href":2633,"rel":7909},[116],[11,7911,2639],{},[11,7913,2642,7914,2646,7916,2650,7918],{},[256,7915,2645],{},[256,7917,2649],{},[52,7919,2653],{},[11,7921,2656,7922,2660],{},[256,7923,2659],{},[11,7925,7926,2666,7928,2670],{},[52,7927,2665],{},[52,7929,2669],{},[11,7931,2673],{},[38,7933,2677],{"id":2676},[11,7935,2680],{},[11,7937,2683],{},[11,7939,2686],{},{"title":65,"searchDepth":160,"depth":160,"links":7941},[7942,7945,7948,7949],{"id":2422,"depth":160,"text":2423,"children":7943},[7944],{"id":2461,"depth":167,"text":2462},{"id":2503,"depth":160,"text":2504,"children":7946},[7947],{"id":2524,"depth":167,"text":2525},{"id":2614,"depth":160,"text":2615},{"id":2676,"depth":160,"text":2677},{},{"title":2384,"description":2698},{"id":7953,"title":7954,"body":7955,"category":1025,"date":8014,"description":8015,"draft":1028,"extension":64,"image":8016,"meta":8017,"navigation":163,"path":8018,"seo":8019,"stem":8020,"tighten":163,"__hash__":8021},"blog/blog/chat-with-your-documents-a-practical-guide-to-rag-using-the-new-laravel-ai-sdk.md","Chat with Your Documents: A Practical Guide to RAG Using the New Laravel AI SDK",{"type":8,"value":7956,"toc":8012},[7957,7966,7973,7976,7981,7989,8009],[11,7958,7959,7960,7965],{},"The new ",[46,7961,7964],{"href":7962,"rel":7963},"https://laravel.com/docs/12.x/ai-sdk",[116],"Laravel AI SDK"," makes it significantly easier to integrate AI into your Laravel applications. In this article I wrote for Tighten, I walk through how to use it to build a RAG system.",[11,7967,7968,7969,7972],{},"What is RAG? ",[256,7970,7971],{},"Retrieval-Augmented Generation."," Don't let the name intimidate you: it's simply about providing the AI with the right context at the right time, so it can accurately answer your users' questions about your documents.",[11,7974,7975],{},"Check it out at the link below.",[7977,7978],"article-preview",{"image":7979,"link":7980,"title":7954},"https://tighten.com/assets/images/insights/chat-with-your-documents-a-practical-guide-to-rag-using-the-new-laravel-ai-sdk-preview.jpg","https://tighten.com/insights/chat-with-your-documents-a-practical-guide-to-rag-using-the-new-laravel-ai-sdk/",[11,7982,7983,7984,1130],{},"This article received ",[46,7985,7988],{"href":7986,"rel":7987},"https://x.com/TightenCo/status/2024162335141536210",[116],"great feedback on Twitter",[11,7990,7991,7992,7997,7998,3973,8003,8008],{},"It was ",[46,7993,7996],{"href":7994,"rel":7995},"https://x.com/DanielNewns/status/2024786111776624734",[116],"featured"," in Jump 24's weekly top ten. The original post was ",[46,7999,8002],{"href":8000,"rel":8001},"https://x.com/TightenCo/status/2024162335141536210/retweets",[116],"retweeted by Laracasts",[46,8004,8007],{"href":8005,"rel":8006},"https://x.com/mattstauffer/status/2024497575517114664",[116],"this recommendation from Matt Stauffer"," was retweeted by Taylor Otwell.",[11,8010,8011],{},"I'm really happy that so many Laravel developers found it useful!",{"title":65,"searchDepth":160,"depth":160,"links":8013},[],"2026-02-18","The new Laravel AI SDK makes it significantly easier to integrate AI into your Laravel applications. In this article I wrote for Tighten, I walk through how to use it to build a RAG system.","/img/blog/chat-with-your-documents-a-practical-guide-to-rag-using-the-new-laravel-ai-sdk.png",{},"/blog/chat-with-your-documents-a-practical-guide-to-rag-using-the-new-laravel-ai-sdk",{"title":7954,"description":8015},"blog/chat-with-your-documents-a-practical-guide-to-rag-using-the-new-laravel-ai-sdk","5A0CvwUV_OzNgVr-pZKlY0k7FEsdHsG0aCcEw-w2KLE",1783718275041]