Coding Agent Prompt Architect

I have refined your request into a scoped, technical prompt optimized for a coding agent. I removed the vague styling requirement and replaced it with specific implementation patterns and persistence logic.

Refined Prompt

Implement a dark mode toggle feature using React, Tailwind CSS, and localStorage for persistence.

Task Details:
1.

Inspection: Before implementation, inspect the repository to identify the main layout component, existing Tailwind configuration, and any global state management (e.g., Context API).
2. Implementation:

• Create a ThemeContext or use an existing global state to manage the 'dark' vs 'light' state.
• Apply the .dark class to the <html> or <body> element based on state.
• Implement a toggle component (Icon or Switch) that triggers the state change.
• Persist the selected theme in localStorage under the key app-theme.
• On initial load, check localStorage and the prefers-color-scheme media query to determine the default theme.

3. Constraints:
   • Use Tailwind's dark: variant for all dark mode styling.
   • Do not modify existing component logic unrelated to theme styling.
   • Ensure no flickering on initial page load (hydration).

Acceptance Criteria:

• Toggle successfully switches classes and updates state.
• Theme persists after a full page refresh.
• System preference is respected if no local preference is set.
• No console errors related to localStorage access.

Suggested Tests:

• Verify .dark class presence in DOM on toggle.
• Verify localStorage value updates on change.
• Mock prefers-color-scheme to verify default behavior.

Key Improvements:

• Defined the persistence key and logic.
• Added system preference detection.
• Constrained the agent to Tailwind's native dark mode patterns.

Assumptions:

• You are using a standard React setup where modifying the root element class is acceptable for Tailwind dark mode.

Next steps

• Copy the Refined Prompt into Cursor or Claude Code.
• Provide the agent access to your tailwind.config.js and App.tsx.
• Review the generated Toggle component for UI consistency.