This issue outlines a set of hands-on activities for the UI team to explore and leverage AI in our UI/UX development workflow using [Cursor](https://www.cursor.so/). The goal is to improve code quality, enhance accessibility, accelerate development, and experiment with modern CSS techniques.
## Activity 1: AI-Assisted CSS Refactoring
Goal: Make the CSS for a specific part of our product's user interface cleaner and easier to read using AI.
#### Action Items:
- Choose a Section: Pick one existing UI section or component within our product's HTML/CSS codebase that you believe could benefit from cleaner CSS.
- Prompt AI: "Review this CSS for this UI section. Make it more readable and efficient. Point out any redundant styles and use BEM naming convention, Use Tailwind classes instead of custom classes whenever possible"
## Activity 2: AI-Driven Accessibility Check for NeetoForm end user interface
Goal: Make NeetoForm easier for everyone to use, especially people using screen readers, by using AI to help us find and fix common accessibility issues.
#### Action Items:
- Prompt AI: "Check the form inputs for accessibility. Suggest appropriate ARIA attributes (like aria-label, aria-describedby), semantic HTML improvements, or any other best practices for screen readers and keyboard navigation."
- Apply Fixes: Add the recommended accessibility improvements. Make sure the <label> is correctly connected to the <input> (using for and id), and add aria-label or other ARIA attributes if the AI suggests them.
## Activity 3: AI-Powered Responsiveness Enhancement
Goal: Use AI to make an existing non-responsive screen mobile-friendly.
#### Action Items:
- Choose a Screen: Identify and select one existing UI screen in our product that currently does not adapt well to different screen sizes.
- Prompt AI for Responsiveness: "This screen is not responsive. Add CSS to make its layout adapt for smaller screens (e.g., phones). Make elements stack vertically or adjust their size when the screen is narrow. Use modern CSS techniques like media queries, Flexbox, or Grid. Use Tailwind classes whenever appropriate"
## Activity 4: Leverage AI to Implement Container Queries in NeetoMolecule
Goal: Experiment with CSS Container Queries, which let parts of our UI adapt to the size of their container, not just the whole browser window. We'll use AI to help us convert some styles to use this new feature.
#### Action Items:
- Focus Area: Work on the NeetoMolecule component.
- Find Use Cases: Identify 2–3 places where NeetoMolecule is used within containers of different widths (e.g., sidebar vs main area).
- Analyze Current Responsiveness: Check for any @media rules currently being used.
- Use AI Prompt: "Convert these styles to use CSS Container Queries so the component responds to its parent container's width."
- Test Responsiveness:
- Confirm layout adapts correctly to container sizes.
- Ensure no visual issues or overlaps appear across different widths.
@praveen-murali-ind _a