Generated by Rank Math SEO, this is an llms.txt file designed to help LLMs better understand and index this website.

# Nathan Onn: Web Developer

## Sitemaps
[XML Sitemap](https://www.nathanonn.com/sitemap_index.xml): Includes all crawlable and indexable pages.

## Posts
- [Your AI Agent Can See Your Passwords. Here’s How to Fix That.](https://www.nathanonn.com/claude-code-function-hooks-credential-guard/): Claude Code Function Hooks are a new capability, currently behind a feature flag and in a community feedback phase. If you want to follow the discussion, it's GitHub proposal #91870, filed September 2026. Nothing here has officially shipped yet — everything in this post was tested against a working build, but the API could change before general availability.
- [How to Install Any Skill in ChatGPT Work (Web version) With One Prompt](https://www.nathanonn.com/install-skills-chatgpt-work-web/): OpenAI launched ChatGPT Work in early July 2026 with two versions: a desktop app reworked from the old Codex application, and a web version that runs entirely in the browser.
- [How I Remixed a Design System Into Something Original With One Command](https://www.nathanonn.com/remix-design-system/): In I Extracted a Website's Entire Design System Using This Skill, I showed how to pull a complete design system from any website. Colors, typography, spacing, components, a visual gallery — everything matching the original.
- [How to Turn AI-Generated HTML Into WordPress Blocks (Without Breaking Them)](https://www.nathanonn.com/ai-html-to-wordpress-blocks/): You ask AI to design a landing page.
- [The Missing Step That Makes AI-Built WordPress Plugins Look Professional](https://www.nathanonn.com/prototype-wordpress-plugin-before-building/): Something nagged after the last experiment.
- [Can GPT-5.6-Luna Max Build a CodeCanyon-Grade WordPress Plugin?](https://www.nathanonn.com/gpt-5-6-luna-max-wordpress-plugin/): Everything was identical — the requirements document, the skill, the bash script. One flag changed in the Codex terminal: I swapped GPT-5.5 for gpt-5.6-luna max, a model that's 25x cheaper per token.
- [GPT-5.6 Sol Outside Codex, Part 2: The Copilot CLI Setup That Manages Context For You](https://www.nathanonn.com/gpt-56-sol-copilot-cli-setup/): In GPT-5.6 Sol Is Way Better in Claude Code (Here's How to Set It Up), I walked you through running Sol inside Claude Code using a local proxy -- and asked you to try it yourself.
- [GPT-5.6 Sol Is Way Better in Claude Code (Here’s How to Set It Up)](https://www.nathanonn.com/gpt-56-sol-claude-code-setup/): I was halfway through Theo's video when I opened a new terminal.
- [The Skill That Makes Claude Use Your Design System Without Being Told](https://www.nathanonn.com/design-system-skill-claude-code/): Instead of a folder you point at, you get a design system skill Claude Code already knows when to trigger.
- [I Extracted a Website’s Entire Design System Using This Skill](https://www.nathanonn.com/extract-design-system-from-website/): I ran the token extraction on a site I'd been eyeing using the "extract-design-md" skill.
- [I Taught Claude to Steal (Ethically) a Design System I Actually Like](https://www.nathanonn.com/design-md-from-website/): We're going to extract a DESIGN.md from a website, get a clean, reusable spec, and then prove it works by handing that file to Claude Design and watching it build a brand-new page that still looks like the original.
- [Stop Losing Work When You Compact Claude Code (The Handoff-Doc Skill)](https://www.nathanonn.com/claude-code-handoff-doc-skill/): Early resets force a healthy rhythm. Working in 15-20% chunks means each new session starts fresh, with full model quality. The Claude Code handoff doc bridges the gap between sessions — capturing enough state that the fresh session can continue without re-reading the transcript. The work stays continuous even though each chunk gets a clean window.
- [Generate Images in Claude Code (using Codex plugin)](https://www.nathanonn.com/claude-code-image-generation-skill/): So here's the state of Claude Code image generation in mid-2026: the thing you want exists, it's excellent, and it's sitting in the tool next door. Keeping Codex open in a second terminal works — but it drags back the exact switching tax I wrote about all the way back in Claude Code vs Codex: Why I Use Both (And You Should Too).
- [The Three Files That Made Codex /goal Reliable Enough to Walk Away From](https://www.nathanonn.com/codex-goal-command-three-files/): The first time I ran a codex goal command on something that mattered, I sat there for twenty-eight minutes pretending to check email while the terminal scrolled.
- [I Gave Codex a Requirements Doc and Got a CodeCanyon-Grade Plugin Back](https://www.nathanonn.com/codex-goal-wordpress-plugin-requirements-doc/): Everything I've built with the codex goal command up to this point has fit inside a demo. The autologin plugin took twenty-eight minutes. How I Chained Two Codex /goal Runs to Build a Complete CLI Tool scaled the pattern to two linked goals. How I Used 8 Codex /goal Runs to Build a Browser Game From Scratch pushed it to eight.
- [Your Codex Skills Should Evolve With Your Project (Ion Viper Part 2)](https://www.nathanonn.com/codex-goal-command-browser-game-part-2/): After Part 1, Ion Viper was a working project — code, tests, game systems all in place. The codex goal command had built it, and the skill had no way to continue from it.
- [How I Used 8 Codex /goal Runs to Build a Browser Game From Scratch](https://www.nathanonn.com/codex-goal-command-browser-game/): The honest caveat, same as always: the codex goal command produced the code, but the spec produced the outcome. This time the spec wasn't a single goal trio — it was eight of them, generated all at once by a skill that understands how games decompose.
- [How I Chained Two Codex /goal Runs to Build a Complete CLI Tool](https://www.nathanonn.com/codex-goal-command-cli-tool/): The codex goal command scales beyond single features.
- [How to Use Codex /goal to Build WordPress Plugins (My Spec-to-Ship Workflow)](https://www.nathanonn.com/codex-goal-command-wordpress-plugin/): That's a different shape of AI assistance from the usual prompt-and-watch loop. Worth pausing on — because the honest caveat lands fast. The codex goal command is not magic. Garbage spec in, garbage outcome out. The other half of the win was an Agent skill I built called wp-spec-to-goal, which turns a vague paragraph into the GOAL.md, VERIFY.md, and PROGRESS.md trio that Codex actually needs to finish.
- [Never Let Claude Code Auto-Compact Again](https://www.nathanonn.com/claude-code-never-auto-compact/): Auto-compact fires when the context is full — not when your task is at a clean boundary. Here's how to stay in control with a status line, manual compact instructions, and a HANDOFF.md habit.
- [How to Run Firecrawl for Free in the Cloud (No API Key Needed)](https://www.nathanonn.com/firecrawl-claude-code-setup-codespaces/): Run the full Firecrawl stack on a free GitHub Codespaces 16 GB cloud machine — no API keys, 5-minute setup, and wired into Claude Code via a single tunnel command.
- [The “Real” Context Engineering with Claude Code, Explained](https://www.nathanonn.com/context-engineering-with-claude-code-explained/): Every context engineering Claude Code technique I've taught maps to one of six layers — each solving a different problem, each building on the one below it.
- [Talk Like a Caveman, Save > 75% on Claude Code Usage (I Tested It)](https://www.nathanonn.com/claude-code-caveman-mode/): Here's what claude code caveman mode looks like in practice:
- [Codex Reviews My Code Inside Claude Code — But I Don’t Trust It Blindly](https://www.nathanonn.com/codex-plugin-claude-code-review/): On March 30, 2026, OpenAI shipped an official Claude Code Codex plugin (openai/codex-plugin-cc). It lets you run Codex code reviews, adversarial reviews, and delegate tasks to Codex — all from inside your Claude Code session.
- [Workflow Engineering in Action: Building a Reddit Summarizer From Scratch With Claude Code](https://www.nathanonn.com/claude-code-workflow-engineering-reddit-summarizer/): And here's the part that matters for you: I built it using the Claude Code Workflow Engineering process I described in the previous issue. Start to finish. No shortcuts. No "eh, I'll just wing this part."
- [Workflow Engineering: Why Your AI Development Process Matters More Than Your Prompts](https://www.nathanonn.com/workflow-engineering-ai-development-process/): Workflow Engineering is the practice of designing multi-step, artifact-driven processes where each step produces a concrete output that becomes the input for the next step — and where the process itself is reusable across projects.
- [The Claude Code Skill Creator Now Has Evals (And My Skills Finally Have Proof They Work)](https://www.nathanonn.com/claude-code-skill-creator-guide/): The Claude Code skill creator plugin just got a massive upgrade. And honestly? It solves the exact problem I've been complaining about for months.
- [The Single File That Makes or Breaks Your Claude Code Workflow](https://www.nathanonn.com/claude-md-highest-leverage-file/): My CLAUDE.md file had grown to over 1,500 lines. Every coding convention I'd ever learned. Every edge case I'd encountered. Code snippets for common patterns. Integration examples for every third-party service we used. Database schema references. The works.
- [I Found a Better Way to Design Pages in Claude Code (And I’m a Little Mad I Didn’t Know Sooner)](https://www.nathanonn.com/claude-code-playground-skill-visual-design-workflow/): It's called the Claude Code Playground skill. And it changes everything about how you approach design work.
- [I Showed You the Wrong Way to Do Claude Code Testing. Let Me Fix That.](https://www.nathanonn.com/claude-code-testing-task-management-workflow/): Let me make this concrete with Claude Code testing:
- [How to Make Claude Code Test and Fix Its Own Work (The Ralph Loop Method)](https://www.nathanonn.com/claude-code-testing-ralph-loop-verification/): Let me show you exactly how I set this up for Claude Code testing.
- [How to Make Claude Code Actually Build What You Designed](https://www.nathanonn.com/claude-code-implementation-workflow-test-plan-sub-agents/): And that process? It's what I've been calling the Claude Code implementation workflow. Let me show you what I mean.
- [The 3-Phase Method for Bulletproof Specs When You’re Not Starting From Scratch](https://www.nathanonn.com/claude-code-spec-driven-development-3-phase-method/): This is where Claude Code spec-driven development comes in.
- [The Dip Is Coming For Every Vibe Coder (And That’s Okay)](https://www.nathanonn.com/the-dip-vibe-coding/): When I turned ten, my parents gifted me a battleship model kit.
- [How to Write Better Requirements with Claude (Stop Letting AI Assume)](https://www.nathanonn.com/how-to-write-better-requirements-with-claude/): But here's the real insight—the one that made me completely rethink how I approach Claude Code requirements:
- [How to Build Self-Evolving Claude Code Rules (So You Stop Fixing the Same Mistakes)](https://www.nathanonn.com/how-to-build-evolving-claude-code-rules/): The correction I'd made? It lived and died in that single session. I never added it to my Claude Code rules. Never updated my project guidelines. Never captured what we'd learned together.
- [Stop Arguing With Your AI. Start Showing It What You See.](https://www.nathanonn.com/claude-code-debugging-visibility-methods/): After countless Claude Code debugging sessions—some triumphant, many humbling—I've noticed two categories that consistently send AI spinning:
- [The 4 Golden Rules of Vibe Coding (A Year-End Manifesto)](https://www.nathanonn.com/4-golden-rules-of-vibe-coding/): What follows are the 4 immutable laws of Vibe Coding I discovered this year. They turned chaotic AI sessions into systematic, predictable wins. Once you see them, you can't unsee them.
- [Claude Code Sandbox Explained: Stop Pressing Enter 50 Times a Day](https://www.nathanonn.com/claude-code-sandbox-explained/): Here's where Claude Code Sandbox comes in—and it flips the entire model on its head.
- [Building WordPress Abilities API Extensions for Third-Party Plugins (SEO Edition)](https://www.nathanonn.com/wordpress-abilities-api-seo-extension/): In my previous post about internal linking, I promised to show you how to build WordPress Abilities API extensions for other people's plugins.
- [I Built an AI-Powered Internal Links Plugin Using WordPress 6.9’s Abilities API and Claude Code](https://www.nathanonn.com/wordpress-abilities-api-internal-linking/): This is what the WordPress Abilities API makes possible.
- [My App Looked Like Everyone Else’s Until I Discovered This Claude Skill Trick](https://www.nathanonn.com/claude-skill-design-system-reusable-frontend/): Here's a confession…
- [How I Built a Claude Skill That Makes Claude Code Never Forget What It Learns](https://www.nathanonn.com/make-claude-code-remember-everything-with-this-skill/): Let's say you're debugging.
- [Claude Skills Part 3: How to Make Claude Code Master Any Library in 15 Minutes (Even If It Launched Yesterday)](https://www.nathanonn.com/claude-skills-part-3-how-to-make-claude-code-master-any-library-in-15-minutes-even-if-it-launched-yesterday/): Claude Skills package documentation in a way that makes Claude understand not just WHAT the API is, but HOW to use it correctly. The difference between knowing the words to a song and understanding why it makes people cry.
- [How AI Agents Completely Eliminated My WordPress Click-and-Repeat Hell (And Your Clients Will Never Know)](https://www.nathanonn.com/how-ai-agents-completely-eliminated-my-wordpress-click-and-repeat-hell-and-your-clients-will-never-know/): Quick note: If you're expecting Claude Skills Part 3 this week - it's coming next week! I'm presenting this WordPress automation topic at WordCamp Taiwan 2025, so I'm switching up the schedule. Part 3 of the Claude Skills series (the one you've been waiting for drops next week. Trust me, it'll be worth the wait.
- [Claude Skills Part 2: How to Turn Your Battle-Tested Code Into a Reusable Superpower](https://www.nathanonn.com/claude-skills-part-2-how-to-turn-your-battle-tested-code-into-a-reusable-superpower/): You've built the perfect authentication system.
- [Claude Skills: Your “I Know Kung Fu” Moment Has Arrived (Part 1 of 3)](https://www.nathanonn.com/claude-skills-your-i-know-kung-fu-moment-has-arrived-part-1-of-3/): You're building your fifth Next.js app this month.
- [Codex plans with ASCII Wireframes → Claude Code builds → Codex reviews](https://www.nathanonn.com/codex-plans-with-ascii-wireframes-%e2%86%92-claude-code-builds-%e2%86%92-codex-reviews/): I used to dive straight into The Codex-Claude Code Workflow and watch it build features.
- [How I Vibe Code With 3 AI Agents Using Git Worktrees (Without Breaking Anything)](https://www.nathanonn.com/how-i-vibe-code-with-3-ai-agents-using-git-worktrees-without-breaking-anything/): You know that feeling when you're vibe coding with Claude Code and it suggests a "minor database refactor" - then suddenly your entire local database is corrupted?
- [Claude Opus 4.1 vs GPT-5 vs GPT-5 Codex: The Bash Bug That Revealed Their Differences](https://www.nathanonn.com/claude-opus-4-1-vs-gpt-5-vs-gpt-5-codex-the-bash-bug-that-revealed-their-differences/): A real-world debugging session that shows how Claude Opus 4.1, GPT-5, and GPT-5 Codex handle the same problem differently - with surprising results.
- [The Latest Codex CLI Commands That Will Save Your Sanity (And Your Rate Limits)](https://www.nathanonn.com/the-latest-codex-cli-commands-that-will-save-your-sanity-and-your-rate-limits/): You fire up Codex CLI for a quick task.
- [The Codex-Claude Code Workflow: How I Plan With GPT-5 and Execute With Claude Code](https://www.nathanonn.com/the-codex-claude-code-workflow-how-i-plan-with-gpt-5-and-execute-with-claude-code/): I used to dive straight into Claude Code's Plan Mode and ask it to build features.
- [Claude Code vs Codex: Why I Use Both (And You Should Too)](https://www.nathanonn.com/claude-code-vs-codex-why-i-use-both-and-you-should-too/): Everyone’s asking “Claude Code vs Codex - which one should I use?”
- [How a Read-Only Sub-Agent Saved My Context Window (And Fixed My WordPress Theme)](https://www.nathanonn.com/how-a-read-only-sub-agent-saved-my-context-window-and-fixed-my-wordpress-theme/): I was staring at my WordPress theme's newsletter page, confused.
- [The Claude Code Date Bug That’s Sabotaging Your Web Searches (And The 3-Minute Fix)](https://www.nathanonn.com/the-claude-code-date-bug-thats-sabotaging-your-web-searches-and-the-3-minute-fix/): You fire up Claude Code to research the latest email authentication methods.
- [Why GPT-5 Thinking Mode Beats Claude 4 Opus for Brainstorming PRDs (And It’s Not Even Close)](https://www.nathanonn.com/why-gpt-5-thinking-mode-beats-claude-4-opus-for-brainstorming-prds-and-its-not-even-close/): A few weeks ago, I wrote about "Stop Asking Claude Code to 'Build Me an App' - Here's How to Actually Get What You Want", where I shared my PRD brainstorming workflow with Claude 4 Opus.
- [How GPT-5 Thinking Mode Turns Complex Research Into Perfect Claude Code Prompts ](https://www.nathanonn.com/how-gpt-5-thinking-mode-turns-complex-research-into-perfect-claude-code-prompts/): I just discovered a workflow that completely changed how I approach complex integrations with Claude Code.
- [How I “Vibe Code” a WordPress Plugin in 50 Minutes with Claude Code](https://www.nathanonn.com/how-i-vibe-code-a-wordpress-plugin-in-50-minutes-with-claude-code/): A few months ago, I presented a talk called "Build Your First WordPress Plugin with The Power of AI (Even if You Can't Code!)" at WordCamp Johor Bharu 2025.
- [How to Build Comprehensive Project Rules with Claude Code](https://www.nathanonn.com/how-to-build-comprehensive-project-rules-with-claude-code/): I had the perfect idea for a WordPress plugin.
- [Stop Asking Claude Code to “Build Me an App” – Here’s How to Actually Get What You Want](https://www.nathanonn.com/stop-asking-claude-code-to-build-me-an-app-heres-how-to-actually-get-what-you-want/): You fire up Claude Code and type “build me a task management app.”
- [How To Stop Claude Code From Overengineering Everything](https://www.nathanonn.com/how-to-stop-claude-code-from-overengineering-everything/): Claude Code is incredible.
- [How to Double Your Claude Code Usage Limits (Without Upgrading to Max)](https://www.nathanonn.com/how-to-double-your-claude-code-usage-limits-without-upgrading-to-max/): You know the feeling.
- [How I Discovered The Claude Code Feature That 10x’d My Development Speed (And Why You’re Probably Missing It)](https://www.nathanonn.com/how-i-discovered-the-claude-code-feature-that-10xd-my-development-speed-and-why-youre-probably-missing-it/): Let me tell you about the most underrated feature in Claude Code.
- [Stop Repeating Yourself: Onboard Claude Code with a CLAUDE.md Guide](https://www.nathanonn.com/stop-repeating-yourself-onboard-claude-code-with-a-claude-md-guide/): Have you ever encountered this before?
- [3 Tips of Getting the Most Out of Claude Code](https://www.nathanonn.com/3-tips-of-getting-the-most-out-of-claude-code/): I remember the first time I tried Claude Code.
- [[RESOURCES] Mastering Vibe Coding with Claude Code ](https://www.nathanonn.com/mastering-vibe-coding-with-claude-code/): Slides View the slides in Gamma.app Prompts 01. Write step-by-step guide based on the preferred tech stack CopyCopiedShow all 39 linesCollapseI want to learn how to build a AI Chat web app using React and Firebase. Here's the tech stack I want to used: Frontend: - React 18 (typescript) with Vite: For building the user interface.
- React Router v6: For client-side routing.
- React useContext: For context and global state management.
- Shadcn UI: For building the UI components.
- Tailwind CSS: For styling components.
- Framer Motion: For animations and transitions.
- Lucide React: For icons.
- Sonner: For displaying toast notifications. Backend: - Firebase: For database and backend logic.
- Firebase Firestore: For database. AI Integration: - Firebase AI Logic: For calling the Gemini AI API via Firebase JS SDK. Authentication: - Firebase Auth: For authentication for both frontend and backend. The frontend will use the Firebase JS SDK (modular) and the backend will use the Firebase Admin SDK. Note that this AI Chat web app is frontend only app. No backend server. We will be using Firebase Auth for authentication. Firestore is used for storing the user's messages and the AI's responses. Since there is no backend server, we will need to setup a strong security rules for the Firestore database so that only the authenticated users can access their own data and not other users' data. We need to make this as secure as possible. As for the AI part, we will be using Firebase AI Logic so that we don't need to have a backend to call the Gemini API. We will be using the Firebase JS SDK to call the Gemini API. Help me compile a detailed and comprehensive step-by-step guide on how to do this. Make sure to use the latest information only. The guide needs to start from the beginning and end with the advanced stuff.Markdown 02. Use the guide to generate project rules CopyCopied{{_GUIDE_HERE_}} =============================================== Based on the guide above, help me do a research and create a project rules document for a project to create a Frontend only web application using React and supported Firebase services for authentication, database, and AI services. You need to keep the project rules document generic so that it can be used for any type of web application.Markdown 03. My React + Firebase Project Rules Download 04. Brainstorm for requirements CopyCopiedShow all 169 linesCollapseI have a frontend-focused web app idea I'd like to develop using React with Vite for the frontend and Firebase services for the backend infrastructure. Here's my initial concept: -----
{{_IDEA_}}
----- I'm looking to collaborate with you to turn this into a detailed project request. As we develop this project, I want you to: 1. Use web_search tools if you need more information to clarify the request
2. If the project involves rich text editing with TipTap, use the docs-mcp server to gather information: - Call list_doc_sources tool to get the available llms.txt file - Call fetch_docs tool to read it - Reflect on the URLs in llms.txt - Reflect on the input question - Call fetch_docs on any URLs relevant to the question - Use this information to provide comprehensive TipTap implementation guidance
3. Document which sources were used for each finding
4. Help me craft optimal solutions following the project rules. Let's iterate together until we have a complete request that I find to be comprehensive and well-architected. After each of our exchanges, please return the current state of the request in this format: ```request
# Project Name
## Project Description ## Target Audience ## Research Findings
### Documentation References
- - ### Best Practices
- - ## Desired Features
### - - ## UI/UX Design Concept
### Visual Design ### Layout Structure ### User Flow ### Interactive Elements ### Accessibility Considerations ## Design Requests
- - ## Type Definitions
### User Types
- User - uid: unique identifier - email: user email address - displayName: optional display name - photoURL: optional profile photo URL - role: user role (user, admin, etc.) - createdAt: timestamp of account creation - ### - - id: unique identifier - : - : - createdAt: timestamp - updatedAt: timestamp ### - - : - ### Enums and Constants
- - : - : ## Technical Requirements
### Frontend (React/Vite)
- - ### Firebase Services Architecture
- - - - - - - - - - - - - ### State Management
- - ### Cloud Functions (Background Only)
- - - ## Project Structure
- - ## Performance & Security Considerations
- - - ## Other Notes
- ``` Please:
1. Use web_search tool if you need more information to clarify the request
2. For TipTap or other rich text editing needs, use the docs-mcp server as described above
3. Ask me questions about any areas that need more detail
4. Suggest features or considerations I might have missed, based on your research
5. Show me the current state of the spec after each exchange
6. Flag any potential technical challenges or important decisions regarding: - React 19+ implementation with concurrent features - Firestore database design and denormalization strategies - Real-time data synchronization patterns - Authentication flow with multiple providers - AI integration with Firebase AI Logic/Gemini API
7. Recommend appropriate UI/UX features using Shadcn UI and Tailwind CSS, ensuring the design creates an engaging, modern experience
8. Advise on best practices for Firebase implementation including: - Optimal Firestore data structure for minimizing reads - Security rules that enforce data integrity - Cloud Functions usage (remember: background triggers only, no REST APIs) - File storage organization and optimization - Cost-effective query patterns
9. Suggest project structure that follows the frontend-first architecture principles
10. Define comprehensive type structures that support TypeScript's strict mode and enable excellent developer experience We'll continue iterating and refining the request until I indicate it's complete and ready. I want to ensure the project leverages Firebase's strengths like:
- Real-time data synchronization with Firestore
- Comprehensive authentication with multiple providers
- Serverless backend with Cloud Functions (for background tasks only)
- Integrated AI capabilities with Gemini API
- Robust security with Firebase Security Rules
- File storage with automatic CDN distribution
- Frontend-first architecture with minimal backend complexity Let's start by discussing my concept and identifying the key components that would benefit from Firebase's services while maintaining a simple, frontend-focused architecture.Markdown 05. Generate FireStore Schema and Complete User Journey CopyCopiedBased on the requirements and the project rules, give me the whole Firestore Schema and its security rules (put this in one artifact). Then, give me the complete user journey flow for this web app (put this in another artifact).Markdown 06. Add Complete Project Structure in the Requirements CopyCopiedHelp me update the Project requirements by adding in the complete recommended project structureMarkdown 07. Generate UI Design CopyCopiedShow all 176 linesCollapseFirst, read the following files: - @notes/rules.md
- @notes/requirements.md
- @notes/user_journey.md
- @notes/firestore_schema.md Then, think hard about the project, and craft a plan to create a complete, production-ready HTML UI design based on the provided project specification. The HTML will eventually be converted to a React application, so include appropriate annotations. ## Instructions: ### 1. Project Analysis **Carefully analyze the project specification** including: - Project description and target audience
- Desired features and functionality
- UI/UX design concepts and requirements
- Technical requirements and architecture
- User journey and workflows
- Data types and structures ### 2. File Organization **Create multiple HTML files** organized as follows: #### File Structure:
``` │ ├── pages/ # Page components
│ │ ├── landing-page.tsx
│ │ ├── login-page.tsx
│ │ ├── signup-page.tsx
│ │ ├── dashboard-page.tsx
│ │ ├── new-session-page.tsx
│ │ ├── review-session-page.tsx
│ │ ├── session-history-page.tsx
│ │ ├── session-detail-page.tsx
│ │ ├── categories-page.tsx
│ │ └── not-found-page.tsx ``` #### Naming Conventions:
- Use lowercase with hyphens for file names (e.g., `user-profile.html`, `category-management.html`)
- Name files based on their primary function or feature
- Keep names concise but descriptive #### When to Split Files:
- Create separate files for distinct user flows
- Split when a page has fundamentally different layout/navigation
- Separate authenticated vs. non-authenticated views
- Isolate complex features that would make a single file unwieldy
- Consider creating 3-8 HTML files for a typical application ### 3. Cross-File Considerations
- Include navigation links between pages using standard `<a href="...">` tags
- Maintain consistent header/navigation across files
- Use the same CDN links and base styles in each file
- Include comments indicating which page links to which
- Add `<!-- @ROUTE: /path/to/page -->` annotations for React Router planning ### 4. Technology Stack
**Use the following technologies in each file**:
- Tailwind CSS (via CDN) for styling
- Font Awesome icons (via CDN) for iconography
- Modern semantic HTML5
- Vanilla JavaScript for interactions (can be shared via `<script>` tags)
- Custom CSS animations where appropriate ### 5. React Conversion Annotations
**Include these annotations throughout all files**:
- Mark components with `<!-- @COMPONENT: ComponentName -->`
- Mark state with `<!-- @STATE: stateName:type = defaultValue -->`
- Mark events with `data-event="eventType:handlerName"`
- Mark data bindings with `data-bind="dataPath"`
- Mark mock data with `data-mock="true"`
- Mark lists with `<!-- @MAP: array.map(item => ( -->` and `<!-- @END_MAP )) -->`
- Add implementation notes with `data-implementation="description"`
- Add functionality notes with `<!-- @FUNCTIONALITY: description -->`
- Add route annotations with `<!-- @ROUTE: /path -->` at the top of each page ### 6. Component Sharing Strategy
For components that appear across multiple pages:
- Implement fully in the first occurrence
- In subsequent files, use simplified versions with a comment: `<!-- @COMPONENT_REF: ComponentName (see index.html) -->`
- This shows placement without duplicating complex code ### 7. Design Guidelines
**For each file, maintain**:
- Clean, modern interface that matches the project's tone
- Consistent spacing, typography, and color schemes
- Proper visual hierarchy
- Loading states, empty states, and error states where appropriate
- Smooth transitions and micro-interactions
- Accessibility with proper ARIA labels and semantic HTML ### 8. Required UI Elements
**Include across files as appropriate**:
- Navigation (consistent header/nav, contextual sidebars)
- Forms with validation states
- Buttons with hover/active states
- Cards, lists, and data displays
- Modals, dropdowns, and overlays (define once, reference elsewhere)
- Status indicators and progress bars
- Empty states and loading skeletons ### 9. JavaScript Functionality
**Organize JavaScript as follows**:
- Include page-specific JavaScript in each file
- For shared functionality, include a comment: `<!-- @SHARED_SCRIPT: functionality-name -->`
- Demonstrate interactions relevant to each page
- Show/hide modals and dropdowns
- Toggle states and UI elements
- Simulate data updates
- Handle responsive behavior ### 10. File-Specific Requirements #### For index.html:
- Include global styles and configurations
- Define color schemes and CSS variables
- Show the main entry point or dashboard
- Include primary navigation structure #### For auth.html:
- Login and signup forms
- Password reset flow
- Social authentication options
- Form validation examples #### For feature pages:
- Focus on specific functionality
- Include relevant modals/overlays
- Show different states of the feature
- Include feature-specific navigation ### 11. Data Representation
**In each file**:
- Use realistic mock data relevant to that page
- Show different states (loading, success, error, empty)
- Demonstrate data relationships
- Include variety to show edge cases ### 12. Responsive Design
**Ensure each file has**:
- Mobile-first approach
- Proper breakpoints
- Touch-friendly interfaces
- Collapsible menus and adaptive layouts ### 13. Output Format Here are the locations of the files that you will create: - @notes/ui/landing-page.html
- @notes/ui/login-page.html
- @notes/ui/signup-page.html
- @notes/ui/dashboard-page.html
- @notes/ui/new-session-page.html
- @notes/ui/review-session-page.html
- @notes/ui/session-history-page.html
- @notes/ui/session-detail-page.html
- @notes/ui/categories-page.html
- @notes/ui/not-found-page.html ### 14. Quality Standards
Each HTML file should:
- Be a complete, valid HTML document
- Include all necessary meta tags and viewport settings
- Have organized, commented code
- Work independently while maintaining visual consistency
- Accurately represent the application's functionality
- Be detailed enough for straightforward React conversion Remember: These HTML files collectively form a high-fidelity prototype that accurately represents the final application's look, feel, and functionality. They should be comprehensive enough that a React developer can understand the component structure, routing needs, and state management requirements for the entire application.Markdown 08. Generate Implementation Plan CopyCopiedShow all 37 linesCollapseBased on the requirements, Firestore schema, user journey, proposed UI for this web app and the project rules, please create a detailed implementation plan for the project.
The implementation plan should focus on the following phrases:
0/ Project setup and configuration: - In this phrase, we will setup the project, install the dependencies, and configure the project. 1/ App structure setup: - In this phrase, we will create the: - Folder structure and file organization - Setup the types and interfaces - Setup the utils and helpers in the lib folder 2/ Project hooks and context: - In this phrase, we will create the: - Project hooks in the hooks folder - Project context and providers in the context folder 3/ Project main layout and authentication components: - In this phrase, we will create the: - Project main layout in the components/layout folder - Project authentication components in the components/auth folder 4/ Project features and its components: - In this phrase, we will create the - project features and its components in the components/{feature_name} folder 5/ Project pages: - In this phrase, we will create the: - Project pages in the pages folder
6/ Setup App.tsx: - In this phrase, we will create the: - App.tsx for the main app component. This is the entry point of the app. It should have all the providers, routes, and any other global setup needed. 7/ Cloud functions: - In this phrase, we will create the - Cloud functions for the app in the functions folder. This will include all the background triggers, and the scheduled functions needed for the app.
The implementation plan should be in checklist format. No need to include any codes yet. However, you can include the file names, the folder names, what libraries to use or install, some code snippets (ONLY if you deem it absolutely necessary).
Put it in an artifactMarkdown 09. Implement One Section at a time CopyCopiedBased on the @notes/plan.md , help me implement the below: {{_STEP_}} Now, think harder, plan properly, create a todo list, and then execute the tasks. Once you've done , please update the @notes/plan.md if you are working on any UI component or page, make sure to read the UI design in @notes/ui/ first. For example: - if you are working on the {{_PAGE_1_}} or its components, read the {{_PAGE_1_}}.html file.
- if you are working on the {{_PAGE_2_}} or its components, read the {{_PAGE_2_}}.html file.
- if you are working on the {{_PAGE_3_}} or its components, read the {{_PAGE_3_}}.html file.
- If you are working on the {{_PAGE_4_}} or its components, read the {{_PAGE_4_}}.html file.
...{{_CONTINUE_FOR_MORE_PAGES_}} This is just reference, you don't need to follow it exactly. You should always prioritize using the shadcn ui components and the shadcn ui design system. Only if you are sure that the shadcn ui component is not available, you can create a custom component. If you need to create custom styling, please use tailwind css. Only use custom css if the styling you need cannot be achieved with tailwind css. If you need any info about any libraries, sdk, or documentation, you can use web search to look for more information. Lastly, please update the @CLAUDE.md file with the current context of the project.Markdown 10. Claude Code Command: Prime.md CopyCopied# Context Prime > Follow the instructions to understand the context of the project. ## Run the following command eza . --tree -git-ignore --ignore-glob="node_modules|.git|tmp" ## Read the following files > Read the files below and nothing else. CLAUDE.md
notes/rules.md
notes/requirements.md
notes/user_journey.md
notes/firestore_schema.md
notes/plan.mdMarkdown 11. Claude Code Command: Lint fixes CopyCopied- Run `npm run lint` to check for linting errors
- If errors are found: a. Analyze each error type and location b. Read the affected files and understand the context c. Apply appropriate fixes based on ESLint rules d. Save the fixed files e. Re-run `npm run lint` to verify fixes f. Repeat this process until no errors remain
- Document any manual fixes that were neededMarkdown 12. Claude Code Command: Type check and fix CopyCopied- Run `npx tsc --noEmit --project tsconfig.app.json` to check for TypeScript errors
- If errors are found: a. Analyze each TypeScript error carefully b. Read the affected files and understand the type issues c. Apply appropriate type fixes (add type annotations, fix type mismatches, etc.) d. Save the fixed files e. Re-run `npx tsc --noEmit --project tsconfig.app.json` to verify fixes f. Repeat this process until no errors remain
- You can ignore errors are primarily missing implementations rather than fundamental type conflicts.
- Document any complex type fixes appliedMarkdown 13. Use extended thinking mode for bug fixes CopyCopiedAnalyze and think about what could be the potential problem, list down all the potential causes, single out the most likely cause of this issue, craft a plan on how to solve this, and then execute it.Markdown 14. Ask AI to log all the steps CopyCopiedin @{{_FILE_}}, I having issue of {{_ISSUE_}}. I want to {{_DESIRED_RESULT_}}. Please put console log across the file so that I can know exactly where went wrong.Markdown Useful Links and Resources Prompt Builder Mastering Claude Code in 30 Minutes (YouTube)
- [Build Your First WordPress Plugin with The Power of AI (Even if You Can’t Code!)](https://www.nathanonn.com/build-your-first-wordpress-plugin-with-the-power-of-ai-even-if-you-cant-code/): Table of Contents
- [3 Things I Learned Last Week #116 – 3AM Code, AI Interns, and Existential Dread](https://www.nathanonn.com/3-things-i-learned-last-week-116-3am-code-ai-interns-and-existential-dread/): Welcome to the 116th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #115 – How AI Agents, Gemini 2.5, and Crazy iPhone Hacks Blew My Mind This Week](https://www.nathanonn.com/3-things-i-learned-last-week-115-how-ai-agents-gemini-2-5-and-crazy-iphone-hacks-blew-my-mind-this-week/): Welcome to the 115th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #114 – AI That Codes, Chef That Cooks, and Vibes That Crash](https://www.nathanonn.com/3-things-i-learned-last-week-114-ai-that-codes-chef-that-cooks-and-vibes-that-crash/): Welcome to the 114th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #113 – Brain Rot, Boss Drama & Zen Vibes](https://www.nathanonn.com/3-things-i-learned-last-week-113-brain-rot-boss-drama-zen-vibes/): Welcome to the 113th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #112 – The Weird Psychology Behind Your Goals, Doubts, and Overconfidence](https://www.nathanonn.com/3-things-i-learned-last-week-112-the-weird-psychology-behind-your-goals-doubts-and-overconfidence/): Welcome to the 112th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #111 – Code Like a Wizard, Think Like a Cyborg](https://www.nathanonn.com/3-things-i-learned-last-week-111-code-like-a-wizard-think-like-a-cyborg/): Welcome to the 111th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #110 – Your Brain Is Lying to You (And Other Fun Facts)](https://www.nathanonn.com/3-things-i-learned-last-week-110-your-brain-is-lying-to-you-and-other-fun-facts/): Welcome to the 110th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #109 – MCPs, Cursor, and the Ultimate Code Productivity Hack](https://www.nathanonn.com/3-things-i-learned-last-week-109-mcps-cursor-and-the-ultimate-code-productivity-hack/): Welcome to the 109th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #108 – 3 Mind Hacks to Solve Problems & Learn Faster](https://www.nathanonn.com/3-things-i-learned-last-week-108-3-mind-hacks-to-solve-problems-learn-faster/): Welcome to the 108th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #107 – AI Won’t Steal Your Job… But It Might Steal Your To-Do List](https://www.nathanonn.com/3-things-i-learned-last-week-107-ai-wont-steal-your-job-but-it-might-steal-your-to-do-list/): Welcome to the 107th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #106 – Is AI Making Us Smarter or Just Really Efficient Couch Potatoes?](https://www.nathanonn.com/3-things-i-learned-last-week-106-is-ai-making-us-smarter-or-just-really-efficient-couch-potatoes/): Welcome to the 106th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #105 – Boredom, Batman, and Brain Gains: 3 Ways to Level Up](https://www.nathanonn.com/3-things-i-learned-last-week-105-boredom-batman-and-brain-gains-3-ways-to-level-up/): Welcome to the 105th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #104 – Stop Wasting Time & Start Thriving](https://www.nathanonn.com/3-things-i-learned-last-week-104-stop-wasting-time-start-thriving/): Welcome to the 104th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #103 – Google’s Gemini 2.0, DeepSeek-R1, and the AI Shake-Up](https://www.nathanonn.com/3-things-i-learned-last-week-103-googles-gemini-2-0-deepseek-r1-and-the-ai-shake-up/): Welcome to the 103rd edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #102 – DeepSeek R1 + AI-Native Productivity = Next-Level You](https://www.nathanonn.com/3-things-i-learned-last-week-102-deepseek-r1-ai-native-productivity-next-level-you/): Welcome to the 102nd edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #101 – Build, Simplify, and Supercharge](https://www.nathanonn.com/3-things-i-learned-last-week-101-build-simplify-and-supercharge/): Welcome to the 101st edition of "3 Things I Learned Last Week"! 🎉
- [3 Things I Learned Last Week #100 – Master Research, Learning, and Focus](https://www.nathanonn.com/3-things-i-learned-last-week-100-master-research-learning-and-focus/): Welcome to the 100 edition of "3 Things I Learned Last Week"! 🎉
- [3 Things I Learned Last Week #99 – Outsmart Your Brain, Crush Procrastination, and Focus Like Never Before](https://www.nathanonn.com/3-things-i-learned-last-week-99-outsmart-your-brain-crush-procrastination-and-focus-like-never-before/): Welcome to the 99th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #98 – Why Coding Still Matters, NotebookLM Secrets, and AI’s Sneaky Side](https://www.nathanonn.com/3-things-i-learned-last-week-98-why-coding-still-matters-notebooklm-secrets-and-ais-sneaky-side/): Welcome to the 98th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #97 – Gemini 2.0, Faking Alignment, and Andrew Ng’s Agentic Vision](https://www.nathanonn.com/3-things-i-learned-last-week-97-gemini-2-0-faking-alignment-and-andrew-ngs-agentic-vision/): Welcome to the 97th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #96 – The New Era of Coding](https://www.nathanonn.com/3-things-i-learned-last-week-96-the-new-era-of-coding/): Welcome to the 96th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #95 – When AI Gets Stuck, Humans Shine](https://www.nathanonn.com/3-things-i-learned-last-week-95-when-ai-gets-stuck-humans-shine/): Welcome to the 95th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #94 – How to Create, Dominate Time, and Work Like a Pro](https://www.nathanonn.com/3-things-i-learned-last-week-94-how-to-create-dominate-time-and-work-like-a-pro/): Welcome to the 94th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #93 – Hard Work, Brain Rest, and the Joy of Imperfection](https://www.nathanonn.com/3-things-i-learned-last-week-93-hard-work-brain-rest-and-the-joy-of-imperfection/): Welcome to the 93rd edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #91 – Prompt Hacks for More Cash](https://www.nathanonn.com/3-things-i-learned-last-week-91-prompt-hacks-for-more-cash/): Welcome to the 91st edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #90 – Smarter Note-Taking, Future Marketing, and AI with Context](https://www.nathanonn.com/3-things-i-learned-last-week-90-smarter-note-taking-future-marketing-and-ai-with-context/): Welcome to the 90th edition of "3 Things I Learned Last Week"! 🎉
- [3 Things I Learned Last Week #89 – Building a Developer Brand, AI-Enhanced Knowledge, and the Perfect Second Brain](https://www.nathanonn.com/3-things-i-learned-last-week-89-building-a-developer-brand-ai-enhanced-knowledge-and-the-perfect-second-brain/): Welcome to the 89th edition of "3 Things I Learned Last Week," the newsletter that's like a box of chocolates for your brain – you never know what you're gonna get, but it's always deliciously informative! 🍫🧠
- [3 Things I Learned Last Week #88 – How ChatGPT, Cursor, and O1 Are Changing the Game](https://www.nathanonn.com/3-things-i-learned-last-week-88-how-chatgpt-cursor-and-o1-are-changing-the-game/): Welcome to the 88th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #87 – How to Think Like a Coder, Build with AI, and Slim Down ChatGPT](https://www.nathanonn.com/3-things-i-learned-last-week-87-how-to-think-like-a-coder-build-with-ai-and-slim-down-chatgpt/): Welcome to the 87th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #86 – Strategic Thinking, Beating Fatigue, and Productivity Hacks](https://www.nathanonn.com/3-things-i-learned-last-week-86-strategic-thinking-beating-fatigue-and-productivity-hacks/): Welcome to the 86th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #85 – o1’s Hidden Potential, Startup Life Hacks, and Cortex vs. Notion](https://www.nathanonn.com/3-things-i-learned-last-week-85-o1s-hidden-potential-startup-life-hacks-and-cortex-vs-notion/): Welcome to the 85th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #84 – AI Thinking, Faster Coding, and Mastering Prompts](https://www.nathanonn.com/3-things-i-learned-last-week-84-ai-thinking-faster-coding-and-mastering-prompts/): Welcome to the 84th edition of "3 Things I Learned Last Week"! 🌟
- [3 Things I Learned Last Week #83 – Data Skills, AI Coding Mastery, and OpenAI’s o1 Models Explained](https://www.nathanonn.com/3-things-i-learned-last-week-83-data-skills-ai-coding-mastery-and-openais-o1-models-explained/): Welcome to the 83rd edition of "3 Things I Learned Last Week"! 🌟

## Pages
- [Subscription Confirmed](https://www.nathanonn.com/subscription-confirmed/)
- [Archives](https://www.nathanonn.com/archives/)
- [Contact Me](https://www.nathanonn.com/contact-me/): Name *Email Address * Message0 / 1000Send Message
- [“The Art of Vibe Coding” Newsletter](https://www.nathanonn.com/newsletter/): Each week, I share actionable techniques for mastering AI coding tools like Claude Code, Cursor AI, and other AI tools that I've discovered through countless hours of experimentation.
- [Privacy Policy](https://www.nathanonn.com/privacy-policy/): Smashing Advantage (the “Company”) respects the privacy of its online visitors and customers of its products and services (including, but not limited to www.nathanonn.com) and complies with applicable laws for the protection of your privacy, including, without limitation, the European Union General Data Protection Regulation ("GDPR") and the Swiss and EU Privacy Shield Frameworks.