GitSkins

Developers’ GitHub profiles often undersell their work. GitSkins uses Gemini 3 to generate READMEs, year-in-review stories, portfolio sites, and case studies from your repos.

Comment

Inspiration

I've always noticed GitHub profiles that are empty, generic, or don't tell a clear story. Recruiters and hiring managers have seconds to scan a profile, and raw contribution graphs and repo lists don't answer: What does this person actually build, and why does it matter? I wanted to turn GitHub activity into narrative: recruiter-ready READMEs, year-in-review stories, and portfolio case studies, without asking developers to write everything by hand. When I saw what Gemini 3 could do (Extended Thinking, real-time streaming, and Google Search grounding), I decided to build one toolkit that would showcase these capabilities while solving a real problem: making every developer's profile as strong as their work.

What it does

GitSkins is an AI-powered GitHub profile toolkit. It turns a GitHub username into:

  • Recruiter-ready READMEs with role-specific content and an optional "Career Mode" where Gemini generates, critiques, and refines in a multi-pass agent loop.
  • Live README Agent so you can watch Gemini 3 think and stream your README in real time, with thought surfacing.
  • GitHub Wrapped, a year-in-review narrative streamed slide-by-slide, with optional Search grounding.
  • Portfolio Builder that generates a full portfolio site from your repos; you can edit with natural language and download as ZIP.
  • Portfolio case studies that highlight your most impactful repos with AI-generated summaries.
  • Profile Intelligence with industry benchmarks and insights backed by Google Search grounding.
  • Repo Visualizer for architecture analysis and Mermaid diagrams, streamed with thought surfacing.
  • Daily Dev Card for "what I shipped today" style cards for build-in-public posts.
  • Widgets and themes: contribution cards, stats, languages, streaks, and 20 curated themes with copy-paste markdown for your README.

Everything is powered by Gemini 3 Pro and Flash, with Extended Thinking, streaming, and Search grounding where it matters most.

How I built it

I built GitSkins with Next.js 16 (App Router), TypeScript, Tailwind CSS, and Framer Motion. The backend is API routes that sit between the UI and two data sources: the GitHub GraphQL API (profile, repos, contributions) and the Gemini API via @google/genai.

I use Gemini 3 Pro for README generation (including the generate, critique, and refine agent loop), portfolio generation, case studies, Profile Intelligence, GitHub Wrapped, and the Repo Visualizer. I use Gemini 3 Flash for faster tasks: profile analysis, theme recommendations, and the chat assistant. Extended Thinking (ThinkingLevel.HIGH) is enabled for deeper reasoning; the Live README Agent and Wrapped stream tokens and surface the model's thinking in real time. Profile Intelligence and Wrapped use Google Search grounding so insights and benchmarks cite real data.

Widgets are served as images from API routes so users can embed them in their README. There's a Command Palette (⌘K) for quick navigation and theme search. The portfolio builder uses natural-language edits and JSZip for download; Mermaid powers the repo diagrams.

Challenges I ran into

  • Orchestrating the agent loop. Coordinating generate, critique, and refine with streaming, error handling, and timeouts required careful state handling so I could retry or degrade gracefully if one step failed.
  • Latency vs. quality. Extended Thinking and multi-step flows are slower. I balanced "show something fast" (Flash for chat) with "invest time for the best output" (Pro and HIGH thinking for READMEs and portfolios) and made Career Mode optional so users can choose speed vs. depth.
  • Structured outputs. Getting consistent JSON from Gemini for profile analysis and theme recommendations (chips, scores, sections) took prompt tuning and sometimes fallback parsing.
  • Scoping the product. GitSkins could easily become many products. I had to prioritize one submission story ("Your GitHub, supercharged by Gemini 3") and a single demo path that tells it in under three minutes.
  • Making "agentic" visible. Having the agent loop in the backend wasn't enough; I had to surface it in the UI (steps, streaming thoughts, refinement) so users and judges could see Gemini 3 at work.

Accomplishments that I'm proud of

  • One app, many Gemini 3 capabilities: Extended Thinking, real-time streaming, Google Search grounding, and a multi-pass agent loop, all in a single product.
  • Live README Agent so users can watch Gemini think and refine their README in real time instead of a black-box "generating…" spinner.
  • GitHub Wrapped, a streamed, slide-by-slide year-in-review that feels like a story, not a report.
  • Profile Intelligence grounded in real data so insights and benchmarks are credible.
  • 20 curated themes and a full widget system (stats, cards, streaks, languages) so profiles look great without design work.
  • Portfolio Builder that generates a full site from a username, supports natural-language edits, and lets users download as ZIP.
  • Clear demo path (Landing, Live README Agent, Profile Intelligence, Wrapped, Portfolio) that showcases Gemini 3 in under three minutes.

What I learned

  • Streaming changes the product. Letting users watch the Live README Agent and Wrapped generate step-by-step made it feel like collaborating with the model; surfacing "thinking" built trust and made the agent loop tangible.
  • Grounding matters. Profile Intelligence and Wrapped are more convincing when the model cites real benchmarks and trends from Search instead of guessing.
  • One loop, many use cases. The same "fetch context, generate, critique, refine" pattern worked for READMEs, portfolios, and case studies; the main work was clear prompts and a stable pipeline.
  • UX of "AI is working." For long-running calls, showing progress (e.g. "Fetching profile…", "Building case studies…", "Generating…") prevents users from thinking the app is stuck; I'm standardizing this with a shared progress component.
  • Naming and showing the agent. Judges and users connect more with "the README Agent is thinking and refining" than with "the API is loading."

What's next for GitSkins

  • Thinking progress UI so there's consistent step-by-step progress across the portfolio builder, Profile Intelligence, case studies, and other AI features.
  • Optional real progress via SSE for long-running routes (e.g. portfolio website) so steps reflect actual backend stages instead of timers.
  • Stronger agent visibility, e.g. an optional "agent log" or refinement notes in the UI when Career Mode runs, so the generate, critique, and refine loop is explicit.
  • Structured outputs with tighter JSON schemas for profile analysis and theme recommendations for richer, more reliable UI (chips, scores, sections).
  • More themes and widgets and community-driven themes so users can personalize even further.
  • Scaling: better handling of rate limits, caching, and optional subscriptions for power users who want higher limits and premium features.

Built With

  • framer-motion
  • github-graphql-api
  • google-gemini-api-(gemini-3-pro-/-flash)
  • javascript
  • jszip
  • mermaid
  • next.js-16
  • nextauth.js
  • posthog
  • react
  • stripe
  • tailwind-css
  • typescript
  • vercel
Share this project:

Updates