dannygardner.me ↗

AI Treasure
Trove

Skills, tools, and workflows for AI-powered development

Visit Portfolio →
Anthropic
Node.js
Vercel
Cloudflare
GitHub
Google Cloud

Workflows

Swipe to explore

Each workflow chains multiple skills into a single pipeline. Copy the prompt, run it in Claude Code, and watch it build.

What's Included

20 tools

Every workflow starts with the right tools. Here's what you can install.

Build Your Stack

Add Claude Code Skills

0 selected
0 tools, 0 skills selected
curl -fsSL https://ai.dannygardner.me/install.sh | bash -s --

Quick Tips

Claude Code cheat sheet

Practical tips for getting the most out of Claude Code. Copy any command and try it.

Setup & Config
Always bypass permissions
Run claude --dangerously-skip-permissions to skip all permission prompts. Saves massive time. You can also set "skipDangerousModePermissionPrompt": true in ~/.claude/settings.json.
CLAUDE.md is your instruction file
Drop a CLAUDE.md in your repo root for project-specific rules (git conventions, coding style, what NOT to do). Use ~/.claude/CLAUDE.md for global rules that apply everywhere.
Enable always-thinking mode
Set "alwaysThinkingEnabled": true in settings. Claude thinks harder on every prompt — better reasoning, fewer mistakes, worth the extra tokens.
Use skills over MCPs
Skills (SKILL.md files) are more reliable than MCP servers. They don't disconnect, don't leak credentials, and Claude understands them natively. Put reusable workflows in ~/.claude/skills/.
Install Superpowers plugin
Superpowers adds brainstorming, plan writing, TDD, code review, debugging, and parallel agent skills. Enable in settings.json under "enabledPlugins".
Enable voice mode
Set "voiceEnabled": true in settings. Talk to Claude instead of typing — great for brainstorming, describing UIs, or working hands-free.
Project settings override global
Put .claude/settings.json in any repo for project-specific tool permissions, MCP servers, and hooks. Team members get the same config automatically.
Claude Code Skills
Frontend Design skill
Say "build me a landing page" and the frontend-design skill activates. It picks distinctive fonts, bold color palettes, and avoids generic AI aesthetics. Never uses Inter or purple gradients by default.
3D Animation Creator skill
Give it a video file and say "scroll-stop build." It extracts frames, builds an Apple-style scroll-driven website with starscape, annotation cards, navbar pill transform, and count-up animations.
Image Generator skill
Say "image generator" and it creates 3 coordinated prompts: hero product shot, exploded/deconstructed view, and video transition. Outputs a premium HTML page with tabbed copy buttons and confetti.
Gemini Image Generation skill
Reference for generating images via Vertex AI (Imagen 4, Veo 2) or Gemini API. Includes model comparison table, error recovery, dark UI handling with blend modes. Use Vertex AI over nanobanana MCP — it's more reliable.
LinkedIn Post Writer skill
Say "linkedin post" and it crafts a story-driven post with Hook → Tension → Shift → Implication → Closer structure. First-person, conversational, no hashtag spam.
Magic UI / shadcn skills
Use component library skills to build UIs with pre-built animated components (Magic UI) or Tailwind-based primitives (shadcn/ui). Claude knows the component APIs and composes them correctly.
UI/UX Pro skill
Focused on design quality — proper spacing, typography hierarchy, color theory, and accessibility. Catches common UI mistakes like low contrast, inconsistent padding, and missing hover states.
Video Generation skill
Generate videos from start + end frames using Veo 2/3.1, Runway Gen-3, or Kling 2.0. Use with Image Generator to create product animation videos from AI-generated images.
Playground skill
Say "make a playground" to create interactive single-file HTML explorers with live controls, previews, and prompt output. Great for visualizing configurations or API parameters.
Making your own skills
Create ~/.claude/skills/my-skill/SKILL.md with frontmatter (name, description, trigger phrases) and markdown instructions. Claude auto-loads them. Skills are just markdown files — no API needed.
Workflows
Generate images with gcloud
Use gcloud auth print-access-token + curl to Vertex AI. No API keys needed. Works with Imagen 4 for images, Veo 2 for video. Gemini skill has the exact endpoints and request format.
Nanobanana is unreliable — use direct API
The nanobanana MCP disconnects frequently and leaks GCP credentials causing 404s. Skip it entirely. Use Gemini API keys or Vertex AI via gcloud — both are more reliable and give you model control.
Brand logo → avatar → character pipeline
Use Image Generator to create a brand logo on white bg → generate an avatar/mascot version → use Veo 3.1 with start+end frames to animate the character → 3D Animation Creator turns it into a scroll-driven element.
Prompt → Site → Deploy in one session
Describe what you want → frontend-design skill builds it → Gemini skill generates assets → vercel --prod deploys it → LinkedIn Post skill writes the announcement. Full launch pipeline.
Scroll-stop video from any product
Image Generator creates hero + exploded prompts → Gemini generates the images → video model creates the transition → 3D Animation Creator builds the scroll-driven site with snap-stop annotations.
Git worktrees for parallel agent work
Never git checkout in your main tree. Use git worktree add ../feat-name feat/name for each Claude agent. They work in isolation, you review and merge. Delete worktrees after.
Plan → Build → Review → Ship
/plan to design the approach → exit plan to implement → /review to catch issues → commit and push. Use the Superpowers skills for each step — they enforce discipline.
DNS + Deploy from the terminal
Claude can add Cloudflare DNS records via API, deploy to Vercel with vercel --prod, and configure custom domains — all without leaving the conversation. Have your CF API key and email ready.
Prompting
Say what, not how
"Add a signup form with email validation and rate limiting" beats "Write a function that validates emails with regex." Claude picks the best implementation when you describe the outcome.
Use @files for context
@src/auth.ts add OAuth support matching the existing patterns. Claude reads the file and follows your conventions instead of guessing.
Paste screenshots directly
Claude is multimodal. Paste screenshots of bugs, mockups, error messages, or design references directly. "Make it look like this" + screenshot is incredibly effective.
Constrain Claude explicitly
"Don't add comments. Don't refactor surrounding code. Don't install new deps. Don't create new files unless necessary." Prevents Claude from over-engineering simple changes.
Iterate, don't restart
If the output isn't right, say "no, make it more X" or "undo that and try Y." Claude remembers the full conversation. Restarting loses all context — iterate instead.
/fast for quick tasks, /slow for complex ones
/fast uses the same model with faster output — great for edits, formatting, small changes. Switch back for architecture decisions, debugging, or multi-file changes.
Power User
Hooks automate repetitive tasks
Configure hooks in settings.json to auto-run commands on events. Auto-lint after edits, auto-format on save, auto-test after commits. Claude's actions trigger your pipeline.
Parallel agents with subagent dispatch
For 2+ independent tasks, Claude spawns background agents that work in parallel. "Research the API docs while you build the frontend" — both happen simultaneously.
Schedule recurring agents
/schedule creates cron-based remote agents. Set up daily code reviews, dependency vulnerability checks, or automated refactoring proposals that run on autopilot.
Memory persists across sessions
"Remember I prefer Tailwind" or "Remember my GCP project is hackstoga." Claude saves these to file-based memory and applies them in every future conversation.
/resume picks up where you left off
Crashed? Restarted terminal? /resume restores your full conversation context. Also works across different terminal sessions.
MCPs for tools that need auth
Playwright MCP for browser automation, Figma MCP for design-to-code, Vercel MCP for deployment management. But prefer skills for anything that doesn't need live external connections.
Key shortcuts you should know
Esc = stop generation. Esc Esc = undo last action. Ctrl+C = cancel input. ! prefix = run shell command inline. @file = reference a file.
Image & Video Generation
Imagen 4 is the best quality model
Use imagen-4.0-generate-001 on Vertex AI for the highest quality. Auth with gcloud auth print-access-token — no separate API key needed. ~$0.07/image.
Gemini model fallback ladder
gemini-3-pro (4K, best) → gemini-3.1-flash (4K, fast) → gemini-2.5-flash (most reliable) → gemini-2.0-flash (cheapest). Fall down the ladder on 503 errors. The Gemini skill handles this automatically.
Always use white backgrounds for products
Prompt with "pure white #FFFFFF background, no gradient, no vignette." White backgrounds are essential for clean video transitions and scroll-stop website builds.
Dark UI trick: blend mode
Generate on black (#0a0a0a) background, then use mix-blend-mode: lighten in CSS — black pixels become invisible. Instant transparent-on-dark-UI effect.
Veo 2/3.1 for start+end frame video
Generate two images (assembled + exploded, or before + after), then feed as start and end frames to Veo. 5-6 seconds at 16:9 is the sweet spot. Also works with Runway Gen-3 and Kling 2.0.
Skip nanobanana MCP
The nanobanana MCP server only works in claude.ai (not Claude Code CLI), disconnects frequently, and leaks GCP credentials causing 404 errors. Use Vertex AI directly via curl — it's more reliable.