[{"data":1,"prerenderedAt":577},["ShallowReactive",2],{"content-\u002Fplugins\u002Faio-design-system\u002Faio-neobrutalism":3,"children-\u002Fplugins\u002Faio-design-system\u002Faio-neobrutalism":576},{"id":4,"title":5,"author":6,"body":7,"budget_tier":6,"build_tags":6,"created":6,"description":567,"document_type":568,"extension":569,"game":6,"install":36,"investment_tier":6,"league":6,"meta":570,"navigation":571,"patch":6,"path":572,"plugin":24,"profit_per_hour":6,"ratings":6,"seo":573,"skills_count":6,"status":6,"stem":574,"strategy_tier":6,"tags":6,"updated":6,"version":6,"weight":6,"__hash__":575},"content\u002Fplugins\u002Faio-design-system\u002Faio-neobrutalism.md","aio-neobrutalism",null,{"type":8,"value":9,"toc":541},"minimark",[10,37,42,47,52,55,65,68,96,100,103,141,144,152,156,188,192,195,220,223,227,231,273,277,285,289,293,299,303,309,313,339,343,347,377,381,411,415,438,442,465,469,511,515],[11,12,13],"blockquote",{},[14,15,16,17,25,26,25,30,33,34],"p",{},"From plugin ",[18,19,21],"a",{"href":20},"\u002Fplugins\u002Faio-design-system",[22,23,24],"strong",{},"aio-design-system"," · ",[27,28,29],"code",{},"v1.0.2",[22,31,32],{},"Install:"," ",[27,35,36],{},"\u002Fplugin install aio-design-system@aiocean-plugins",[38,39,41],"h1",{"id":40},"neobrutalism-design-system-bootstrapper","Neobrutalism Design System Bootstrapper",[43,44,46],"h2",{"id":45},"objective-workflow","Objective Workflow",[48,49,51],"h3",{"id":50},"phase-1-detect-identify-project-tech-stack","Phase 1: DETECT — Identify Project Tech Stack",[14,53,54],{},"Scan the project root to determine the web framework and styling approach:",[56,57,63],"pre",{"className":58,"code":60,"language":61,"meta":62},[59],"language-bash","# Check for package.json, framework config files, CSS preprocessors\nls package.json tsconfig.json vite.config.* next.config.* nuxt.config.* tailwind.config.* postcss.config.* 2>\u002Fdev\u002Fnull\n","bash","",[27,64,60],{"__ignoreMap":62},[14,66,67],{},"Identify:",[69,70,71,78,84,90],"ul",{},[72,73,74,77],"li",{},[22,75,76],{},"Framework",": React, Vue, Svelte, Next.js, Nuxt, Astro, plain HTML",[72,79,80,83],{},[22,81,82],{},"Styling",": Tailwind CSS, CSS Modules, styled-components, Sass\u002FLess, plain CSS",[72,85,86,89],{},[22,87,88],{},"Component library",": shadcn\u002Fui, Radix, MUI, Vuetify, or none",[72,91,92,95],{},[22,93,94],{},"Entry points",": main CSS file, layout files, global styles location",[48,97,99],{"id":98},"phase-2-generate-create-css-tokens-and-base-styles","Phase 2: GENERATE — Create CSS Tokens and Base Styles",[14,101,102],{},"Based on detected stack, generate the appropriate token format:",[69,104,105,115,125,131],{},[72,106,107,110,111,114],{},[22,108,109],{},"Tailwind",": Extend ",[27,112,113],{},"theme"," in tailwind config with neobrutalism tokens (borders, shadows, colors)",[72,116,117,120,121,124],{},[22,118,119],{},"CSS Variables",": Generate ",[27,122,123],{},":root"," block with all design tokens",[72,126,127,130],{},[22,128,129],{},"styled-components\u002FCSS-in-JS",": Generate a theme object",[72,132,133,136,137,140],{},[22,134,135],{},"Plain CSS",": Copy ",[18,138,139],{"href":139},"code\u002Fbase.css"," directly",[14,142,143],{},"Always include the neobrutalism fonts:",[56,145,150],{"className":146,"code":148,"language":149,"meta":62},[147],"language-html","\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Bricolage+Grotesque:wght@200..800&display=swap\" rel=\"stylesheet\" \u002F>\n","html",[27,151,148],{"__ignoreMap":62},[48,153,155],{"id":154},"phase-3-apply-transform-existing-ui-components","Phase 3: APPLY — Transform Existing UI Components",[157,158,159,162,185],"ol",{},[72,160,161],{},"List all UI component files in the project (buttons, cards, inputs, modals, nav)",[72,163,164,165],{},"For each component, apply the 6 Rules (see reference below):\n",[69,166,167,170,173,176,179,182],{},[72,168,169],{},"Add thick black borders (2-4px solid #000)",[72,171,172],{},"Replace soft shadows with hard shadows (4px 4px 0 #000)",[72,174,175],{},"Remove border-radius or reduce to 0px",[72,177,178],{},"Replace gradients with solid vibrant colors",[72,180,181],{},"Increase font weights to 700-900",[72,183,184],{},"Add press-down or elevate-up interaction patterns",[72,186,187],{},"Prioritize: buttons first, then cards, then inputs, then navigation",[48,189,191],{"id":190},"phase-4-review-show-beforeafter","Phase 4: REVIEW — Show Before\u002FAfter",[14,193,194],{},"For each transformed component:",[69,196,197,204,210,213],{},[72,198,199,200,203],{},"Show the ",[22,201,202],{},"before"," state (existing styles)",[72,205,199,206,209],{},[22,207,208],{},"after"," state (neobrutalism styles)",[72,211,212],{},"Flag any anti-patterns found (blurred shadows, gradients, excessive radius)",[72,214,215,216,219],{},"Verify hover states and ",[27,217,218],{},"cursor: pointer"," on all interactive elements",[221,222],"hr",{},[43,224,226],{"id":225},"reference-material","Reference Material",[43,228,230],{"id":229},"the-6-rules","The 6 Rules",[157,232,233,239,249,255,261,267],{},[72,234,235,238],{},[22,236,237],{},"Thick black borders",": 2-4px solid #000",[72,240,241,244,245,248],{},[22,242,243],{},"Hard shadows",": ",[27,246,247],{},"4px 4px 0 #000"," (NEVER blur)",[72,250,251,254],{},[22,252,253],{},"Sharp corners",": 0px border-radius",[72,256,257,260],{},[22,258,259],{},"Vibrant colors",": 2-3 accent colors max, high contrast",[72,262,263,266],{},[22,264,265],{},"Bold typography",": weights 700-900",[72,268,269,272],{},[22,270,271],{},"No gradients",": solid colors only",[43,274,276],{"id":275},"core-tokens","Core Tokens",[56,278,283],{"className":279,"code":281,"language":282,"meta":62},[280],"language-css","\u002F* Borders *\u002F\nborder: 2px solid #000; \u002F* inputs *\u002F\nborder: 3px solid #000; \u002F* cards, containers *\u002F\n\n\u002F* Shadows *\u002F\nbox-shadow: 4px 4px 0 #000; \u002F* standard *\u002F\nbox-shadow: 8px 8px 0 #000; \u002F* modals *\u002F\n\n\u002F* Timing *\u002F\ntransition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);\n","css",[27,284,281],{"__ignoreMap":62},[43,286,288],{"id":287},"two-interaction-patterns","Two Interaction Patterns",[48,290,292],{"id":291},"press-down-buttons","Press-Down (Buttons)",[56,294,297],{"className":295,"code":296,"language":282,"meta":62},[280],"\u002F* Default: elevated *\u002F\nbox-shadow: 4px 4px 0 #000;\n\n\u002F* Hover: lands where shadow was *\u002F\nhover {\n  transform: translate(4px, 4px);\n  box-shadow: none;\n  background: #000;\n  color: #fff;\n}\n\n\u002F* Active: tactile feedback *\u002F\nactive {\n  scale: 0.95;\n}\n",[27,298,296],{"__ignoreMap":62},[48,300,302],{"id":301},"elevate-up-navigation","Elevate-Up (Navigation)",[56,304,307],{"className":305,"code":306,"language":282,"meta":62},[280],"\u002F* Default: flat *\u002F\nborder: transparent;\nbox-shadow: none;\n\n\u002F* Hover: lifts up *\u002F\nhover {\n  box-shadow: 4px 4px 0 #000;\n  transform: translate(-1px, -1px);\n  border-color: #000;\n}\n",[27,308,306],{"__ignoreMap":62},[43,310,312],{"id":311},"anti-patterns","Anti-Patterns",[69,314,315,318,321,324,327,330,333],{},[72,316,317],{},"Blurred shadows",[72,319,320],{},"Gradients",[72,322,323],{},"Excessive border-radius (>30px)",[72,325,326],{},"More than 3 accent colors",[72,328,329],{},"Transitions >300ms",[72,331,332],{},"Missing hover states on interactive elements",[72,334,335,336,338],{},"Missing ",[27,337,218],{}," on clickable elements",[43,340,342],{"id":341},"component-references","Component References",[48,344,346],{"id":345},"interactive","Interactive",[69,348,349,356,363,370],{},[72,350,351,355],{},[18,352,354],{"href":353},"references\u002Fbutton","Button"," - variants, sizes, states",[72,357,358,362],{},[18,359,361],{"href":360},"references\u002Finput","Input"," - form inputs, focus",[72,364,365,369],{},[18,366,368],{"href":367},"references\u002Fselect","Select"," - dropdowns, menus",[72,371,372,376],{},[18,373,375],{"href":374},"references\u002Fcheckbox","Checkbox"," - checkboxes, switches",[48,378,380],{"id":379},"containers","Containers",[69,382,383,390,397,404],{},[72,384,385,389],{},[18,386,388],{"href":387},"references\u002Fcard","Card"," - static vs clickable",[72,391,392,396],{},[18,393,395],{"href":394},"references\u002Fdialog","Dialog"," - modals",[72,398,399,403],{},[18,400,402],{"href":401},"references\u002Fsheet","Sheet"," - slide-over panels",[72,405,406,410],{},[18,407,409],{"href":408},"references\u002Ftabs","Tabs"," - tab navigation",[48,412,414],{"id":413},"feedback","Feedback",[69,416,417,424,431],{},[72,418,419,423],{},[18,420,422],{"href":421},"references\u002Fbadge","Badge"," - tags, status",[72,425,426,430],{},[18,427,429],{"href":428},"references\u002Falert","Alert"," - inline notifications",[72,432,433,437],{},[18,434,436],{"href":435},"references\u002Ftoast","Toast"," - temporary notifications",[48,439,441],{"id":440},"supporting","Supporting",[69,443,444,451,458],{},[72,445,446,450],{},[18,447,449],{"href":448},"references\u002Fpopover","Popover"," - floating content",[72,452,453,457],{},[18,454,456],{"href":455},"references\u002Ftable","Table"," - data tables",[72,459,460,464],{},[18,461,463],{"href":462},"references\u002Flabel","Label"," - typography",[48,466,468],{"id":467},"system","System",[69,470,471,477,483,490,497,504],{},[72,472,473,476],{},[18,474,475],{"href":139},"Base CSS"," - complete stylesheet (copy to project)",[72,478,479,482],{},[18,480,119],{"href":481},"references\u002Fcss-variables"," - complete tokens",[72,484,485,489],{},[18,486,488],{"href":487},"references\u002Fcolors","Colors"," - palette reference",[72,491,492,496],{},[18,493,495],{"href":494},"references\u002Finteraction-patterns","Interaction Patterns"," - detailed patterns",[72,498,499,503],{},[18,500,502],{"href":501},"references\u002Faffordances","Affordances"," - clickable vs static",[72,505,506,510],{},[18,507,509],{"href":508},"references\u002Fdecorations","Decorations"," - sketchy effects",[43,512,514],{"id":513},"resources","Resources",[69,516,517,524,533],{},[72,518,519,523],{},[18,520,522],{"href":521},"neobrutalism-research-report","Research Report"," - comprehensive research",[72,525,526,532],{},[18,527,531],{"href":528,"rel":529},"https:\u002F\u002Fwww.neobrutalism.dev\u002F",[530],"nofollow","Neobrutalism.dev"," - ShadCN components",[72,534,535,540],{},[18,536,539],{"href":537,"rel":538},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fneobrutalism\u002F",[530],"NN\u002FG Article"," - definition",{"title":62,"searchDepth":542,"depth":542,"links":543},2,[544,551,552,553,554,558,559,566],{"id":45,"depth":542,"text":46,"children":545},[546,548,549,550],{"id":50,"depth":547,"text":51},3,{"id":98,"depth":547,"text":99},{"id":154,"depth":547,"text":155},{"id":190,"depth":547,"text":191},{"id":225,"depth":542,"text":226},{"id":229,"depth":542,"text":230},{"id":275,"depth":542,"text":276},{"id":287,"depth":542,"text":288,"children":555},[556,557],{"id":291,"depth":547,"text":292},{"id":301,"depth":547,"text":302},{"id":311,"depth":542,"text":312},{"id":341,"depth":542,"text":342,"children":560},[561,562,563,564,565],{"id":345,"depth":547,"text":346},{"id":379,"depth":547,"text":380},{"id":413,"depth":547,"text":414},{"id":440,"depth":547,"text":441},{"id":467,"depth":547,"text":468},{"id":513,"depth":542,"text":514},"Apply neobrutalism design to a web project — detects tech stack, generates CSS tokens, and transforms existing UI components.","skill","md",{},true,"\u002Fplugins\u002Faio-design-system\u002Faio-neobrutalism",{"title":5,"description":567},"plugins\u002Faio-design-system\u002Faio-neobrutalism","s_l2FK7wqSBG5-CdwoHQXF32Rzsu_reX4TdmYlqcqP4",[],1779707416256]