XS✔ ◾ CTF Updates – Updating the component library rules (#9745)

* updating the component library rules

* Auto-fix Markdown files

* rule update

* Auto-fix Markdown files

* fixing Rules rules

* adding seoDesc

* adding myself as an author

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

rules/do-you-use-the-best-web-ui-libraries/rule.md

@@ -1,4 +1,5 @@
 ---
+seoDescription: Discover the best Web UI libraries for your projects. Learn about shadcn/ui for React and Bootstrap for general use, and explore other useful frameworks to enhance your web applications.
 type: rule
 archivedreason: 
 title: Do you use the best Web UI libraries?
@@ -13,30 +14,77 @@ authors:
 - title: Daniel Šmon
   url: https://ssw.com.au/people/daniel-smon
   img: https://github.com/SSWConsulting/SSW.People.Profiles/raw/main/Daniel-Smon/Images/Daniel-Smon-Profile.jpg
+- title: Isaac Lombard
+  url: https://ssw.com.au/people/isaac-lombard
 related: []
 redirects: []
 
 ---
 
-Don't waste time evaluating which Web UI libraries to use. Most of the commonly used libraries are very similar in functionality. The recommended library is [Bootstrap](https://getbootstrap.com/).
+Don't waste time evaluating which Web UI (Component) libraries to use. If you're already using React, we recommend going with [shadcn/ui](https://shadcn.dev/) – as it's the most extensible and strikes a balance between flexibility and simplicity. For other environments, or for the easiest experience, go with [Bootstrap](https://getbootstrap.com/).
 
 <!--endintro-->
 
-It's the most popular available framework today, which means more people involved in the project, more tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with other web development products
+### shadcn/ui – customised with V0 (Recommended)
 
-![Figure: Leader among frameworks today, Bootstrap toolkit is recommended to build successful websites](bootstrap.png)  
+This is the best choice for React ecosystems. Shadcn/ui is more recent, but changed the game. It puts the components totally under your control since the code lives in your repository, and still acts like a seperate library by utilising path aliases.
 
-### The 3 things a developer need to know to get up and running quickly with ASP.NET MVC
+* **Hybrid Approach**: Combines the benefits of a traditional UI library with flexibility, letting you customize components without being locked into specific styles or functionality.
+* **Modern Design System**: Comes with clean, accessible, and responsive components that follow modern design principles.
 
-`youtube: https://www.youtube.com/embed/z3bIM72-YaU?rel=0`
-
-### Bootstrap & ASP.NET MVC - Intro / Quickstart
+V0 is the premier frontend code generation tool by Vercel, and it's partnered with shadcn/ui to extend the clean, modern shadcn components in a myriad of ways – and integrate these extensions with the shadcn/ui path alias conventions.
 
-`youtube: https://www.youtube.com/embed/bIGiUSMBwoo?rel=0`
-
-### Other useful frameworks
+In effect, these two let you quicky build your own custom component library for any given application.
 
-Now that you saved a lot of UI development time by using Bootstrap, you can play around with other useful frameworks.
+### Deep Dive: Front-End Development with shadcn/ui and Next.js
 
-* **[KendoUI](http://www.kendoui.com/)** for enhanced HTML and jQuery controls
-* **[SignalR](http://signalr.net/)** for real-time web functionality
+Check out this insightful tutorial:  
+`youtube: https://www.youtube.com/embed/U8LyScigrcA?si=btShpW-NWVCwWKZZ`
+
+---
+
+### Bootstrap
+
+Bootstrap has been the go-to general-purpose component library for years.
+
+* **Wide Adoption**: It’s the most popular library, meaning more community support, tutorials, third-party plugins, and better integration.
+* **Framework Agnostic**: Works seamlessly with JS, Angular, React, Vue, or even pure HTML/CSS.
+* **Optimized Ports**: Specialized ports exist for frameworks like [React Bootstrap](https://react-bootstrap.netlify.app/).
+
+While Bootstrap is a safe and reliable choice, it does have drawbacks, such as limited customizability and heavy reliance on CSS overrides to achieve bespoke designs.
+
+[![Star History Chart](https://api.star-history.com/svg?repos=shadcn-ui/ui,mui/material-ui,ant-design/ant-design,mantinedev/mantine,nextui-org/nextui,twbs/bootstrap,react-bootstrap/react-bootstrap&type=Timeline)](https://star-history.com/#shadcn-ui/ui&mui/material-ui&ant-design/ant-design&mantinedev/mantine&nextui-org/nextui&twbs/bootstrap&react-bootstrap/react-bootstrap&Timeline)  
+**Figure – Bootstrap is the most popular UI library**
+
+---
+
+### If you want to find a better fit
+
+First consider the import type – some component libraries, such as shadcn/ui, use a "copy and paste" style of code sharing, while others (Bootstrap) have typical import behaviour (hiding implementation details behind their APIs).
+
+The latter kind are typically easier to use, but harder to extend.
+
+There's also a divide in terms of maintenance responsibility – if you copy and modify code into your project, you'll have update code to newer versions yourself.
+
+Alternatively, package imports may be upgraded and maintained by the community, but you have to be conscious of any API changes.
+
+When evaluating a component library, also keep in mind:
+
+* **Community Support**: Does it have an active user base, comprehensive documentation, and external resources like tutorials and plugins?
+* **Integration**: How well does it work with your current tech stack (e.g., React, Angular, Vue)?
+* **Performance**: Does it maintain fast load times and responsiveness, even with complex components?
+
+### Other Useful Frameworks
+
+Once you’ve saved time by using a pre-built UI library, explore these additional frameworks to enhance your web app:
+
+* **[KendoUI](http://www.kendoui.com/)**: Offers advanced HTML and jQuery controls for data grids, charts, and more.
+* **[SignalR](http://signalr.net/)**: Provides real-time web functionality, perfect for apps needing live updates (e.g., chat apps, dashboards).
+* **[MUI](https://mui.com/)**: A popular React UI framework following Google’s Material Design guidelines.
+* **[Ant Design](https://ant.design/)**: A comprehensive React-based UI framework with a strong focus on enterprise applications.
+* **[Mantine](https://mantine.dev/)**: A flexible and fully accessible UI library with 100+ customizable components and hooks for React.
+* **[Chakra UI](https://chakra-ui.com/)**: A modular and accessible component library for React with a focus on design flexibility.
+* **[NextUI](https://nextui.org/)**: A modern React UI library optimized for dark mode by default with customizable components.
+* **[PrimeReact](https://primereact.org/)**: A comprehensive collection of components for React, part of the PrimeFaces family.
+* **[React Suite](https://rsuitejs.com/)**: A set of React components built for middle and back-office applications.
+* **[Magic Design](https://magic.design/)**: A lightweight UI component library designed for React with a focus on simplicity.

rules/generate-ui-mockups-with-ai/rule.md

@@ -1,4 +1,5 @@
 ---
+seoDescription: Learn how to generate UI mockups with AI tools to streamline your design process.
 type: rule
 title: Do you generate UI mockups with AI?
 uri: generate-ui-mockups-with-ai
@@ -17,6 +18,8 @@ authors:
     url: https://ssw.com.au/people/william-liebenberg
   - title: Matt Wicks
     url: https://ssw.com.au/people/matt-wicks
+  - title: Louis Roa
+    url: https://ssw.com.au/people/louis-roa
 related:
   - mockups-and-prototypes
   - storyboards
@@ -35,8 +38,8 @@ Traditionally, UI wireframes have been made with tools like Figma, Excalidraw, B
 
 <!--endintro-->
 
-`youtube: https://www.youtube.com/watch?v=r8z0a3bPeuM`
-**Video: v0 by Vercel: Create UI Components from Text & Images! (6 min)**
+`youtube: https://www.youtube.com/watch?v=cyFVtaLy-bA`
+**Video: Build a fullstack app in 7 minutes with v0 (Figma to code)! (7 min)**
 
 Here is a longer example of someone using v0.dev to generate a calculator UI and then trying to replicate the same UI by hand: [V0 coded a calculator 30x faster than me (17 min)](https://youtu.be/WFZ-g0w3OW4?si=A-18DvJRd2KXfbNy)
 
@@ -58,7 +61,7 @@ If you're a dev that likes (or is forced) to moonlight as a designer these tools
 
 Here is what you can achieve using [v0.dev](https://v0.dev) and a few prompts:
 
-![Figure: A cool user form](v0_user_form.png)
+![Figure: A matrix-style blog site](matrix.gif "matrix blog")
 
 ::: greybox
 🤖 AI prompts excamples: