TravisBumgarner
29 verified skills
ui-designer
Use this agent when designing visual interfaces, creating design systems, building component libraries, or refining user-facing aesthetics requiring expert visual design, interaction patterns, and accessibility considerations. Specifically: <example> Context: Product team needs a complete design system for a new fintech application with dark mode, multiple device sizes, and strict accessibility requirements. user: "We need to create a comprehensive design system for our fintech app. Include component library, design tokens, typography scale, color palette, interactive patterns, and dark mode support. Must meet WCAG 2.1 AA." assistant: "I'll create a complete design system starting with understanding your brand guidelines and user base through the context-manager. I'll build a modular component library with documented specs, design tokens in multiple formats (CSS, JSON, Figma), responsive patterns across web and mobile, dark mode variants, and comprehensive accessibility annotations. I'll deliver Figma files, design documentation, and developer handoff specifications." <commentary> Use ui-designer when you need to establish or refine a complete design system, including component libraries, design tokens, and comprehensive visual standards. This agent excels at creating reusable design assets and documentation that scale across teams and platforms. </commentary> </example> <example> Context: A frontend team is building a new feature but needs UI design and interaction patterns before development. user: "Design the booking flow for our travel app. Need 3 screen variations, empty/loading/error states, mobile and desktop layouts, and clear interaction patterns for each step." assistant: "I'll design a complete booking flow with wireframes, visual mockups, and interaction specifications. First, let me check the context-manager for your existing design system and style guide. Then I'll create all screen states, document interaction patterns, provide motion design specifications, and ensure alignment with your design language and accessibility standards." <commentary> Invoke ui-designer when your frontend developers need detailed visual designs, interaction specifications, and asset files before implementation. The agent provides a clear handoff package that developers can build from. </commentary> </example> <example> Context: A redesign initiative is underway and you need UI improvements to an existing product. user: "Our dashboard needs a visual refresh. The functionality is fine but the UX feels dated. Improve the visual hierarchy, modernize colors and typography, add micro-interactions, and ensure it works on mobile." assistant: "I'll analyze your current dashboard using the context-manager, identify visual improvement opportunities, redesign layouts for better hierarchy and scannability, update colors and typography to modern standards, add meaningful micro-interactions, and ensure responsive design. I'll provide before/after comparisons, design rationale, and implementation specifications for your developers." <commentary> Use ui-designer for visual refinements, redesigns, and aesthetic improvements to existing interfaces. This agent modernizes dated UIs while respecting existing functionality and providing clear upgrade paths. </commentary> </example>
development
tb-07-mobile-setup-untested
Set up a mobile app package using CapacitorJS (wrapping web) or React Native, with API config and auth integration.
development
ralph-pr
Use this skill to create a PR for a completed task
tools
tb-02b-frontend-components
Create core frontend components — pages (Home, 404, 500), modal system, Header, Footer, shared components (Loading, Toast), and favicon/meta setup.
development
tb-06-auth-setup
Add Supabase authentication — JWT middleware, login/signup/logout pages, protected routes, 401 redirect, and Zustand user state.
development
python-pro
Expert Python developer specializing in modern Python 3.11+ development with deep expertise in type safety, async programming, data science, and web frameworks. Masters Pythonic patterns while ensuring production-ready code quality.
development
ralph-test
Use this skill when writing tests, especially when working in TDD style to define tests before the actual functions are complete. This is the "Red" phase of TDD.
testing
tb-10-status-check
Audit the codebase against all setup skills (00-09). Reports what is done, partial, not started, or N/A for every checklist item with a summary table.
development
tb-route-builder
Scaffold a full CRUD route — prompts for resource name, HTTP methods, and access level, then generates backend routes, shared schemas, frontend API functions, react-query hooks, and query keys.
development
tb-00-app-setup
Scaffold a new monorepo project. Prompts for project name, packages, database choice, and hosting target, then sets up npm workspaces, Husky, Biome, and base config files.
data-ai
typescript-pro
Expert TypeScript developer specializing in advanced type system usage, full-stack development, and build optimization. Masters type-safe patterns for both frontend and backend with emphasis on developer experience and runtime safety.
development
penetration-tester
Expert penetration tester specializing in ethical hacking, vulnerability assessment, and security testing. Masters offensive security techniques, exploit development, and comprehensive security assessments with focus on identifying and validating security weaknesses.
development
performance-engineer
Expert performance engineer specializing in system optimization, bottleneck identification, and scalability engineering. Masters performance testing, profiling, and tuning across applications, databases, and infrastructure with focus on achieving optimal response times and resource efficiency.
testing
pr-create
Use this when creating a pull request
tools
project-setup
Reference documentation for the just-recordings project architecture, conventions, and setup patterns. Use this when onboarding, adding new features, or needing to understand how the layers connect.
documentation
ralph-code
Use this skill when developing code, especially during a TDD cycle. This is the "Green" phase of TDD
development
ralph-next
Select and execute the next TDD task phase from SCOPES.yml
data-ai
ralph-refactor
Use this skill after a ralph-code phase has completed but before marking the task as complete in SCOPES.yml
development
react-refactor
Refactor large React components into a well-organized project structure. Use when the user has oversized React files (typically 300+ lines) and wants them broken into meaningful abstractions following a standard directory layout with shared components, page-level components, and shared frontend/backend types. Prefers Material UI, avoids over-splitting small components, and aims for a healthy balance of medium-sized files.
development
refactoring-specialist
Expert refactoring specialist mastering safe code transformation techniques and design pattern application. Specializes in improving code structure, reducing complexity, and enhancing maintainability while preserving behavior with focus on systematic, test-driven refactoring.
development
scope
Use this to turn a design into a set of small, atomic, achievable tasks that are ready for execution
content-media
tb-01-backend-setup
Set up a TypeScript + Express backend package with CORS, env validation via Zod, health check endpoint, structured logging, and graceful shutdown.
development
tb-02a-frontend-core
Set up the frontend package with React, React Router, Material UI, dark/light theme, styleConsts, Zustand store, Storybook, and the app directory structure.
development
tb-02c-frontend-patterns
Add frontend patterns — lazyWithRetry chunk recovery, react-query with queryKeys factory, routes.ts constants, in-app release notes with localStorage tracking, and contact form.
development
tb-03-shared-setup
Create the shared package with Zod API schemas, constants, useHealthCheck hook, version-bump script, and version-check pre-commit validation.
development
tb-04-database
Set up the database layer — SQLite or Postgres with Drizzle ORM, migrations, seed data, and connection management.
data-ai
tb-05-connecting-apis
Wire up frontend and backend — assign ports via .env, configure CORS, set up concurrent dev startup script, and verify end-to-end API connectivity.
development
tb-08-desktop-setup-untested
Set up Electron Forge desktop app with type-safe IPC, path resolution, auto-migrations, daily DB backups, auto-updater, code signing, and multi-platform distribution.
development
tb-09-production-readiness-untested
Production hardening — SSR for OG tags, environment configs, Heroku/NFS hosting, CI/CD with GitHub Actions, security headers, rate limiting, PostHog analytics, and DNS setup.
testing