[{"data":1,"prerenderedAt":78},["ShallowReactive",2],{"portfolio:social-links":3,"posts:clean-component-boundaries":20},[4,8,12,16],{"id":5,"platform":5,"url":6,"label":7},"github","https:\u002F\u002Fgithub.com\u002Fpiioni","GitHub",{"id":9,"platform":9,"url":10,"label":11},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fjuan-rangel-002294300\u002F?locale=en_US","LinkedIn",{"id":13,"platform":13,"url":14,"label":15},"twitter","https:\u002F\u002Ftwitter.com\u002FJuann936","Twitter",{"id":17,"platform":17,"url":18,"label":19},"email","mailto:piioni.unwell796@slmail.me","Email",{"id":21,"title":22,"body":23,"description":63,"draft":64,"extension":65,"meta":66,"navigation":67,"path":68,"publishedAt":69,"seo":70,"slug":71,"stem":72,"tags":73,"__hash__":77},"posts\u002Fposts\u002Fclean-component-boundaries.md","Clean Component Boundaries in Frontend Projects",{"type":24,"value":25,"toc":59},"minimark",[26,30,33,56],[27,28,29],"p",{},"When every component is allowed to do everything, your codebase becomes fragile.",[27,31,32],{},"I use a three-level model:",[34,35,36,44,50],"ol",{},[37,38,39,43],"li",{},[40,41,42],"strong",{},"Base",": tiny reusable primitives",[37,45,46,49],{},[40,47,48],{},"Compound",": product-specific compositions",[37,51,52,55],{},[40,53,54],{},"Sections",": page-level feature slices",[27,57,58],{},"This keeps dependencies explicit and prevents style duplication.",{"title":60,"searchDepth":61,"depth":61,"links":62},"",2,[],"A practical split between primitives, compound components, and sections for long-term maintainability.",false,"md",{},true,"\u002Fposts\u002Fclean-component-boundaries","2026-03-14",{"title":22,"description":63},"clean-component-boundaries","posts\u002Fclean-component-boundaries",[74,75,76],"Clean Architecture","Components","Vue","1AaXfrdl2IE6Wl8c5VjfihsslKGmjple375iBmtWnA4",1777398847615]