Galanggg galanggg

🧠 How to Save Context Tokens When Using Claude Code

This is a personal reference workflow for minimizing token usage while maintaining project continuity across Claude Code (Sonnet 4 with file access).

✅ Setup: Populate `CLAUDE.md`

Claude loads CLAUDE.md automatically at session start.

Claude-SPARC Automated Development System For Claude Code

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Overview

The SPARC Automated Development System (claude-sparc.sh) is a comprehensive, agentic workflow for automated software development using the SPARC methodology (Specification, Pseudocode, Architecture, Refinement, Completion). This system leverages Claude Code's built-in tools for parallel task orchestration, comprehensive research, and Test-Driven Development.

Features

Roo Code Workflow: An Advanced LLM-Powered Development Setup

This gist outlines a highly effective and cost-optimized workflow for software development using Roo Code, leveraging a multi-model approach and a custom "Think" mode for enhanced reasoning and token efficiency. This setup has been successfully used to build complex applications, such as Baccarat game simulations with betting strategy analysis.

Core Components & Model Allocation

The power of this setup lies in strategically assigning different Large Language Models (LLMs) to specialized "modes" within Roo Code, optimizing for performance, cost, and specific task requirements.

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Building

Remix Deferred

Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

Load data
Render the app

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Ordering of Angular component class members

Use the following order of groups to organize Angular components:

Private properties.
Data binding properties.
View and content properties.
UI properties.
Component API properties.
Constructor.
Lifecycle hooks.
Event handlers.

	You are a powerful agentic AI coding assistant, powered by Claude 3.5 Sonnet. You operate exclusively in Cursor, the world's best IDE.

	You are pair programming with a USER to solve their coding task.
	The task may require creating a new codebase, modifying or debugging an existing codebase, or simply answering a question.
	Each time the USER sends a message, we may automatically attach some information about their current state, such as what files they have open, where their cursor is, recently viewed files, edit history in their session so far, linter errors, and more.
	This information may or may not be relevant to the coding task, it is up for you to decide.
	Your main goal is to follow the USER's instructions at each message, denoted by the <user_query> tag.

	<communication>
	1. Be conversational but professional.

	module GameState
	exposing
	( Game(..)
	, GameDefinition
	, PlayState
	, loading
	, updateGameDefinition
	, updatePlayState
	, updateScore
	, toReady

	import { ApplicationRef, ComponentRef, createComponent, Type } from "@angular/core";
	import { createApplication } from "@angular/platform-browser";
	import React, { useEffect, useRef, useState } from "react";

	type AnyComponentRef = ComponentRef<unknown>;

	export type ReactifyProps = {
	component: Type<unknown>;
	inputs?: Record<string, unknown>;
	};