Show Notes
Parker dives into which AI tooling is actually innovating faster, testing Cursor, Windsurf, and Klein in real-world workflows, and sharing actionable tips you can apply today.
Cursor, Windsurf, and AI Pane updates
- Cursor updates keep changing, and the UI is easy to miss if you don’t follow the changelog.
- The old Composer UI was renamed/replaced with an AI Pane; you access Chat, Agent, and Edit from a drop-down instead of a separate window.
- Key features to know:
- Agent for multi-step file edits (find/replace, inline diffing).
- Edit mode is a newer, less-used option; most rely on Agent for code changes.
- Practical tips:
- Check the change log to verify version vs. what you’re seeing.
- On macOS, use Homebrew to ensure you’re on the latest Cursor build.
- When in doubt, update and reopen the app to sync with newer flows.
No-code tools in client work: when to customize vs. bake it in
- No-code tools are getting more capable, but many client needs still demand customization.
- Webflow, Wix, and similar tools are great for baseline sites; for bespoke interactions, you’ll still need code.
- Slater (Andy Slater) lets you embed live scripting into Webflow via a dedicated VM, giving you real-time, production-like customization without full-stack builds.
- You can drop in files, run code, and deploy quickly; easier testing and iteration than traditional Webflow handoffs.
- Practical notes:
- For advanced UI/animations, consider combining no-code bases with Slater or similar live-coding integrations.
- If you’re reusing components (Swiper, etc.), hosting via CDN and wiring through Slater can save time.
Klein best practices and context management
- Big theme: let Klein run free at the start; don’t micromanage every decision.
- Context and tokens:
- Keep the context window under 100k tokens; be mindful of hitting 150k–170k tokens for checkpoints.
- Create modular files to avoid bloated contexts.
- Plan-first approach:
- Use a Plan mode first to outline the big picture before diving into code.
- If it takes 30+ files to make a plan, your prompt needs work.
- Logging as debugging superpower:
- Implement a five-level logger and log everything during CI to trace issues.
- Add a logger utility and a Readme in each folder to document usage.
- Update custom instructions to enforce concise, technical responses and to leverage the logger.
- Practical steps:
- Add a dedicated log utility and a per-folder README.
- Use Plan first, then execute with modular, well-documented files.
PRD prompts workflow with Grok3 and a Line Rider example
- Demonstrated a PRD-driven workflow inside Grok 3 to plan, test, and implement features.
- Process highlights:
- Feed Grok context (homepage, signup flows, footer, etc.) and outline a Line Rider PRD prompt.
- Include mechanics and user stories; generate a concrete plan and changes to codebase.
- Run smoke tests and use the PRD to drive migrations, tests, and feature updates.
- Takeaways:
- A PRD-centric prompt flow can align teams and accelerate iterative development.
- Pair PRD prompts with tests and logging for robust, verifiable changes.
Subscriptions: source attribution and production flow
- Implemented a new source column for subscribers and a corresponding migration.
- Updated tests and UI to capture where signups come from; pushed changes and monitored deployment.
- Lesson: ensure backend migrations are pushed before tests and production signups to avoid false negatives.
Quick takeaways
- Use Klein’s best practices: run free first, plan before coding, keep contexts modular, and monitor token usage.
- Build a robust logging strategy with a five-level logger and per-folder READMEs.
- Leverage Plan-first prompts and Grok3-driven PRDs to guide large features.
- Use Slater for Webflow when you need true in-browser customization without a full rebuild.
- Track signup sources to inform marketing and product decisions; verify migrations before production pushes.
Links
- Cline on GitHub (autonomous coding agent for VS Code)
- Cursor AI (AI code editor)
- Windsurf by Codeium (AI IDE)
- Slater for Webflow (live scripting in Webflow)
- Swiper.js (touch slider library)
- Grok by xAI (AI assistant for planning)
- Parker Rex (prompts and AI tools resources)