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.
By purchasing this skill, you agree to our terms of service
GPT-5.6
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
