PromptBase
Upgrade
Close icon
General
Home
Marketplace
Create
Hire
Login
Chat
Sell
Explore

Skill Details

Runtime
(gpt-5.6)
Example user message
[userMessage]: The mobile navigation in our React app breaks at smaller widths: menu items overflow horizontally, the drawer cannot be closed reliably, and keyboard focus is inconsistent. Inspect the existing components and Tailwind styles, fix the root causes without restructuring the app, and validate the relevant behavior.
Example agent response
I inspected the existing navigation component, its state handling, Tailwind classes, and related responsive styles before changing anything. Implemented: Corrected the responsive overflow/layout behavior at narrow widths. Fixed the drawer close interaction without introducing a new state layer. Preserved the existing component architecture and styling conventions. Added appropriate focus behavior and keyboard-accessible interaction. Removed the conflicting utility classes responsible for the layout issue. Validation: Checked the affected component for React/state consistency. Verified the responsive class logic and interactive states. Confirmed no new dependency was required. I did not claim browser/runtime verification where the environment did not provide it.
↗ Cursor Skill

React UI Tailwind Frontend Engineer

Add to Cart
Instant accessInstant access
Usage rightsCommercial use
Money-back guaranteeMoney‑back
By purchasing this skill, you agree to our terms of service
GPT-5.6
Tested icon
Guide icon
Free credits icon
Build, debug, refactor, and review modern React interfaces with Tailwind CSS using a production-focused engineering workflow. Inspect accessible codebases before changes, preserve existing architecture, solve root causes, and validate changes where possible. Handle responsive layouts, reusable components, accessibility, UI states, interactions, styling consistency, dependency discipline, and maintainable implementation without unnecessary rewrites.
...more
Added 2 weeks ago
Report
Browse Marketplace