{"slug": "how-i-maximize-my-daily-output-with-claude-code", "title": "How I maximize my daily output with Claude Code", "summary": "Shruti Kapoor, a developer, shares five best practices for maximizing daily output with Claude Code, Anthropic's AI coding assistant, based on over a year of daily use. Key practices include using Plan mode with the highest-capability model to define architecture and requirements before implementation, which dramatically improved code quality and maintainability. Kapoor demonstrates that detailed prompts specifying tech stack, data models, and component trees yield polished, maintainable apps instead of 'AI slop.'", "body_md": "\n\n```\nAdvisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →\n```\n\nClaude Code has become one of the most-used tools in my dev workflow, whether I’m working from the terminal or the VS Code plugin.\n\nI’ve been using it daily for over a year, and in that time I’ve picked up a handful of practices that massively improved the quality of what it produces. Claude now writes code that follows best practices, uses cleaner architecture, is accessible, and is organized cleanly into reusable components, all without constant back-and-forth. It looks like it was actually planned and maintained, not AI slop.\n\nIn this blog post, I am going to share these best practices with you. You can also view this in a video format above if you prefer.\n\nEarly on, I used to give [Claude](https://blog.logrocket.com/stop-one-shot-prompt-claude-better/) simple prompts, and despite my best efforts, the apps it generated often felt rough around the edges. The UI was buggy, and the resulting code was difficult to maintain.\n\nHere’s an example of a prompt I would write and the app it generated:\n\n```\nBuild a React component that fetches and displays a list of all my videos from https://www.youtube.com/@shrutikapoor08\n```\n\nAfter a year of learning how to use Claude Code more effectively, refining my prompts, and adopting a set of best practices, the quality of the apps it generates has improved dramatically. They not only look far more polished, but the underlying code is also cleaner, more maintainable, and easier to build upon.\n\nSo, here are the 5 best practices I have been following:\n\nHow does a good developer approach a new feature? Instead of jumping straight into implementation, they gather requirements, plan out the project details, write down assumptions, figure out open questions, chart out the technical specifications, make a plan, and design the architecture. Only then do they start implementing. The same principle applies when building with Claude Code.\n\nWhen you hand Claude a simple prompt, such as `Build a React component that fetches and displays a list of all my videos from https://www.youtube.com/@shrutikapoor08`\n\n, Claude does its best guess based on general training to understand technical requirements and feature details. It doesn’t know your team’s best practices, the tech stack you are using, or your coding conventions. The result is often that the code looks fine on the surface, but has problems underneath – duplicate code, poor architectural decisions, non-performant coding practices, and unmaintainable components.\n\n💡 Tip: Use the highest model available for plan mode, and then switch to a lower model for the actual implementation to optimize token usage.\n\nTo fix this, switch to Plan mode (Shift+Tab) and use the highest capability model to come up with a plan before implementing.\n\nWhen using plan mode, walk Claude through:\n\nPrompt before:\n\n```\nBuild a React component that fetches and displays a list of all my videos from https://www.youtube.com/@shrutikapoor08\n```\n\nPrompt after:\n\n```\nBuild a YouTube channel viewer app in React.\n\n## Tech Stack\n- React with TypeScript\n- TanStack Query for all data fetching and caching\n- YouTube Data API v3\n\n## Architecture First\nBefore writing any component code:\n1. Define the data model (video object shape, pagination cursor, cache keys)\n2. Map out the component tree\n3. Identify all async states: loading, success, empty, error, rate-limited\n4. Define the query key strategy for deduplication and cache invalidation\n\n## Features\n\n**Channel Search**\n- Search bar accepts a YouTube username or channel handle (e.g. @shrutikapoor08)\n- Default to @shrutikapoor08 on load\n\n**Video Grid**\n- Display videos in a responsive grid that matches YouTube's layout\n- Each card shows: thumbnail, title, view count, published date, duration\n- Filter out: Shorts (duration < 60s), duplicate video IDs\n\n**Infinite Scroll**\n- Use TanStack Query's `useInfiniteQuery` with YouTube's `pageToken` cursor\n- Trigger next page fetch when the user scrolls within 300px of the bottom\n- Show a loading skeleton on initial load and a spinner at the bottom during pagination\n\n**Caching**\n- Cache responses by channel ID + page token\n- Do not refetch on window focus or component remount\n- staleTime: 10 minutes\n```\n\nThis generates a plan like this:\n\n```\n# YouTube videos component — infinite scroll, keyboard nav, dedupe\n\n## Context\n\nThe request: a React component that fetches and displays **all** videos from\nhttps://www.youtube.com/@shrutikapoor08, with three added requirements:\n\n1. Keyboard accessible — arrow keys navigate between video cards\n2. Infinite scrolling\n3. No repeated videos\n\nThe Vite + React 19 app already has `src/YouTubeVideos.jsx` mounted in `src/App.jsx`. A local\ncommit `7deaaaa` on branch `claude/serene-planck-43wkig` (not yet pushed; first push got a 403)\nreworked it to eagerly fetch every page of the uploads playlist. That eager loop will now be\nreplaced with on-demand infinite scrolling, and keyboard navigation + dedup added on top.\n\n## Design\n\n### 1. Infinite scrolling (replaces eager fetch-all)\n- Resolve the channel's uploads playlist ID once (`channels?forHandle=shrutikapoor08`), cache\n  it in a ref.\n- Fetch one `playlistItems` page (24 items) on mount. Place a sentinel `<div>` after the grid,\n  watched by an `IntersectionObserver`; when it becomes visible and a `nextPageToken` exists,\n  fetch the next page and append.\n- An in-flight ref guard prevents overlapping fetches (also covers StrictMode double-effects).\n- Status line under the grid (`aria-live=\"polite\"`): \"Loading more…\" while fetching,\n  \"All N videos loaded\" once `nextPageToken` is exhausted — so every video is reachable.\n\n### 2. No duplicates\n- Keep a `Set` of seen `videoId` s in a ref; filter each incoming page before appending.\n  Card `key` = `videoId`. Also skip items without a `videoId` (private/deleted videos).\n\n### 3. Keyboard navigation (roving tabindex, WAI-ARIA grid-style)\n- One `keydown` handler on the grid container:\n  - **ArrowLeft / ArrowRight**: previous / next card\n  - **ArrowUp / ArrowDown**: move by one row — column count computed by counting cards that\n    share `offsetTop` with the first card (works with the responsive `auto-fill` grid)\n  - **Home / End**: first / last loaded card\n- Only the active card has `tabIndex={0}`; all others `-1`, so Tab enters/leaves the grid in\n  one stop. Arrow keys call `.focus()` on the new card (cards stay native `<a>` links, Enter\n  opens the video).\n- Synergy with infinite scroll: focusing the last card scrolls it into view, which brings the\n  sentinel into view and loads the next page — keyboard users can reach all videos too.\n\n### CSS (`src/YouTubeVideos.css`)\n- Visible `:focus-visible` outline on `.yt-card`; styles for the status line. Keep the\n  existing grid/card look.\n\n## Steps\n\n1. Discard incidental lockfile churn: `git checkout -- package-lock.json` (only `\"peer\": true`\n   metadata removed by this sandbox's npm; no dependency changed).\n2. Rework `src/YouTubeVideos.jsx` and `src/YouTubeVideos.css` per the design above\n   (amends/extends the work already in local commit `7deaaaa`).\n3. Add `.env` to `.gitignore` — it is not ignored today, and repo history shows an API key was\n   committed then deleted (`3f04f15 \"Delete .env\"`).\n4. Commit on `claude/serene-planck-43wkig` and push (`git push -u origin …`). If the earlier\n   403 recurs and isn't network-shaped, fall back to the GitHub MCP `push_files` tool, then\n   `git fetch` + `git reset --hard origin/claude/serene-planck-43wkig` to realign local.\n5. No PR (not requested).\n\n## User action needed at runtime\n- Create `.env` with `VITE_YOUTUBE_API_KEY=<YouTube Data API v3 key>`, then `npm run dev`.\n  Without it the component renders an explanatory error.\n- Security note: the key deleted in `3f04f15` is still in git history — rotate it if active,\n  and restrict any client-side key (HTTP-referrer + API restrictions), since Vite bundles\n  expose it publicly.\n\n## Verification\n- `npx eslint src/` and `npm run build` must pass.\n- With a real key: initial page renders; scrolling to the bottom keeps loading pages until\n  \"All N videos loaded\"; no duplicate cards; Tab focuses the grid once; arrows move focus in\n  all four directions; Enter opens the focused video.\n- Without a key, the missing-key message renders (verifiable in this sandbox via `npm run dev`).\n```\n\nOnce you accept the plan and let Claude implement it, the resulting component is noticeably cleaner. It has a proper search bar, a video feed, and data fetching handled through TanStack Query instead of scattered `useEffect`\n\ncalls, exactly as specified in the plan.\n\nClaude has no memory between sessions, so it starts from a blank slate every time. This means that if you provided information about your best practices, your coding standards, and your architectural decisions in one session, it doesn’t get carried over when you restart Claude. This can be extremely frustrating. This is why you use [CLAUDE.md](https://code.claude.com/docs) to provide memory between sessions.\n\nThis file lives in your project root. Claude reads it automatically at the start of every session. Here’s what I put in my CLAUDE.md:\n\n```\nnpm run dev          # start dev server (Vite)\nnpm run build        # typecheck + production build\nnpm run typecheck    # run tsc --noEmit\nnpm run lint         # run ESLint\nnpm run test         # run Vitest test suite\nnpm run preview      # preview production build locally\n```\n\n`.css`\n\nfiles colocated with components\n\n```\nsrc/\n  api/          # YouTube API client and raw API types\n  components/   # UI components, each with a colocated .css file\n  hooks/        # custom React hooks (data fetching via TanStack Query)\n  lib/          # pure utility functions (formatting, duration, etc.)\n  types.ts      # shared domain types\n```\n\n`function Foo()`\n\nover `const Foo = () => `\n\n`.css`\n\nfiles or CSS classes; never `style={{ ... }}`\n\n`any`\n\n, no type assertions without justification`useEffect`\n\n+ `useState`\n\n`useChannelVideos`\n\n, `useChannel`\n\n, `useInfiniteScroll`\n\nkeep components declarative and make data-fetching logic independently testable`.env`\n\nfiles; use environment variables via `.env.local`\n\n(gitignored)`aria-label`\n\n, `alt`\n\n, or equivalent; all images require `alt`\n\ntext; no accessibility attribute may be omitted to save timeYou can find this in the [GitHub repo](https://github.com/Shruti-Kapoor-Tech/claude-code-tips-yt-companion/blob/main/.claude/CLAUDE.md).\n\nMake sure you save this Claude.md in the right location – `./claude/CLAUDE.md`\n\n, so it is picked up as memory for future sessions.\n\n💡 When Claude does something wrong, add a rule in\n\n[CLAUDE.md]immediately so it never happens again. Your file evolves with your mistakes and your decisions.\n\nClaude has been trained on general data. To enhance the data that Claude has access to, you can use skills and MCP (Model Context Protocol) servers. Skills give Claude specialized domain knowledge and best practices, while MCP servers give it tools to interact with other systems. Together, they help Claude follow best practices and team-specific requirements beyond its general training.\n\nSkills are a collection of best practices that you load into Claude to guide its code generation. For frontend work, I like to use the following skills:\n\nTo install a skill, you can get it from its source repo:\n\n```\nnpx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices\n```\n\nYou can check which skills are installed with the command:`/skills`\n\nMCP servers connect Claude to external tools and services so it can pull in real project context instead of just generating from general knowledge.\n\n```\nOver 200k developers use LogRocket to create better digital experiences\nLearn more →\n```\n\n💡 Caution: Loading too many MCP servers can slow down Claude’s performance and overload its context\n\nWith skills and MCP servers in place, Claude tends to create much higher-quality code and follows industry-standard best practices, for example, keeping the same code style, hooks usage, and building accessible and maintainable components.\n\nContext is key in today’s development with coding agents, especially as you work on bigger chunks of work. The longer a session runs, the more of the context window gets used up, and the output quality tends to drop. Therefore, managing context, especially as you do more and more work in a single session, becomes more important.\n\nContext is all the information Claude holds in its working memory during a session, such as your instructions, the files it has read, its own responses, responses from tools, and any other information loaded into the conversation. It’s finite and measured in tokens.\n\nOnce a session’s context window runs out, the output quality degrades within that session. Claude starts losing track of earlier decisions. Therefore, it is important to manage context during a session.\n\nThere are three ways of managing context in a session:\n\n** /clear**: starts a fresh context. You can use this when you are switching tasks, such as building a different feature, that doesn’t need memory from the previous task\n\n** /compact**: summarizes the entire conversation and uses that summary as the seed for the next context window. Use this when you want continuity in the memory, but you are running out of context\n\n** Subagents**: this is an underused one. When you need Claude to do research or read a large set of files, spin that off into a subagent rather than loading it all into your main session. It keeps your working context clean. Use this when you want to write tests or run code reviews. You can run\n\n`/agents`\n\nto create An interesting thing I recently learnt is that [Claude.md](https://code.claude.com/docs) is advisory. It is only followed 80% of the time. If you want something to happen every time, put it in a hook instead of Claude.md\n\nHooks are shell commands that run automatically. They live in Claude’s local settings file `.claude/settings.json`\n\n. They are deterministic and cannot be skipped.\n\nSome examples that should be hooks:\n\nThere are `PreToolUse`\n\nhooks and `PostToolUse`\n\nhooks.\n\nHere’s an example of each:\n\n1. **PreToolUse**: Block destructive commands with PreToolUse hooks\n\n```\n{\n  \"hooks\": {\n    \"PreToolUse\": [\n      {\n        \"matcher\": \"Bash\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"jq -r '.tool_input.command' | grep -qE 'rm -rf|drop table|truncate' && { echo 'BLOCKED' >&2; exit 2; } || exit 0\"\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n2. **PostToolUse**: Auto-format your code with a formatter with a PostToolUse hook every time Claude edits a file\n\n```\n{\n  \"hooks\": {\n    \"PostToolUse\": [\n      {\n        \"matcher\": \"Edit|Write\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"npx prettier --write \\\\\\\\\"$CLAUDE_FILE_PATH\\\\\\\\\" 2>/dev/null || true\"\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\nThese run automatically after every edit, so your files stay both formatted and type-safe by default. You can also use pre-tool-use hooks to add guardrails like blocking destructive database operations or preventing edits to `.env`\n\nfiles.\n\n```\nMore great articles from LogRocket:\n\nDon't miss a moment with The Replay, a curated newsletter from LogRocket\nLearn how LogRocket's Galileo AI watches sessions for you and proactively surfaces the highest-impact things you should work on\n\nUse React's useEffect to optimize your application's performance\nSwitch between multiple versions of Node\nDiscover  how to use the React children prop with TypeScript\nExplore creating a custom mouse cursor with CSS\nAdvisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag\n```\n\nClaude Code is a great coding agent, and with these best practices, you can notice a considerable difference between a rough first draft app and a polished, accessible, well-architected app.\n\n```\nStop guessing about your digital experience with LogRocket\nGet started for free\n```\n\nChoosing between skills and MCP tools comes down to auditability versus flexibility. By building the exact same capability twice, this guide reveals when your agent needs a deterministic tool and when it needs an interpretive skill.\n\nLearn how to replace React state, Context, and event handlers with native HTML and CSS features for dark mode, modals, accordions, carousels, and more.\n\nA real-app benchmark of cnfast’s drop-in cn() replacement: isolated speed tests look great, but does any of it survive contact with an actual React render?\n\nCompare the top AI development tools and models of August 2026. View updated rankings, feature breakdowns, and find the best fit for you.\n\nWould you be interested in joining LogRocket's developer community?\n\nJoin LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.", "url": "https://wpnews.pro/news/how-i-maximize-my-daily-output-with-claude-code", "canonical_source": "https://blog.logrocket.com/maximize-claude-code/", "published_at": "2026-08-27 13:00:10+00:00", "updated_at": "2026-09-02 06:22:40.154024+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "artificial-intelligence"], "entities": ["Claude Code", "Anthropic", "Shruti Kapoor", "React", "TypeScript", "TanStack Query", "YouTube Data API v3"], "alternates": {"html": "https://wpnews.pro/news/how-i-maximize-my-daily-output-with-claude-code", "markdown": "https://wpnews.pro/news/how-i-maximize-my-daily-output-with-claude-code.md", "text": "https://wpnews.pro/news/how-i-maximize-my-daily-output-with-claude-code.txt", "jsonld": "https://wpnews.pro/news/how-i-maximize-my-daily-output-with-claude-code.jsonld"}}