TravisBumgarner/tb-05-connecting-apis
skills/tb-05-connecting-apis/SKILL.md
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
Updated Apr 20, 2026
$ install --global
skillsauthnpx skillsauth add TravisBumgarner/claude-brain tb-05-connecting-apisInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 9:30 PM1.8s1 file scanned
SKILL.md
- name:
- tb-05-connecting-apis
- description:
- Wire up frontend and backend — assign ports via .env, configure CORS, set up concurrent dev startup script, and verify end-to-end API connectivity.
05 — Connecting APIs
Checklist
- [ ] Assign distinct ports for frontend dev server and backend, configured via
.env- Ports should already be randomly assigned from step 00 (frontend
3000–3999, backend4000–4999) - If not yet assigned, generate random ports in those ranges to avoid collisions across projects
- Ports should already be randomly assigned from step 00 (frontend
- [ ] Frontend
config.tsincludesAPI_URLpointing to backend - [ ] Backend CORS allows frontend dev origin via
CORS_ORIGINenv var (e.g.,http://localhost:5173) - [ ]
scripts/wait-for-db.mjs— polls Postgres withpg_isreadyvia Docker until the database accepts connections (retries with 1s delay, exits 1 after timeout) - [ ] Startup script to run everything concurrently
- Root
package.jsonscript usingconcurrentlyor similar - Wait for DB before starting:
"dev": "node scripts/wait-for-db.mjs && concurrently ..."
- Root
- [ ] Verify the first API request works end-to-end using shared types from
packages/shared
Placeholder Auth (removed when real auth is added in step 06)
Temporary auth so routes can be tested end-to-end before Supabase is set up. No passwords, no tokens, no JWTs — purely for development.
Backend
- [ ]
POST /api/auth/login— accepts{ name: string }(case-sensitive), hashes the name (e.g., SHA-256) to produce a deterministicappUserId. Finds or creates a user row in the DB with that ID. Returns{ userId, displayName, userLevel }. - [ ] Placeholder auth middleware — reads
x-user-idheader from request, looks up user in DB, attaches toreq.user. Sends 401 if missing or not found. - [ ] Apply placeholder middleware to all resource routes (same place
requireAuthwill go later)
Frontend
- [ ]
src/sharedComponents/LoginPrompt_DEVELOPER_ONLY.tsx— a small popup/dialog (not a page) that shows on every app load when the user is not logged in- Single "Name" text field and a "Log in" button
- Stores the last-used name in
localStorageso it's auto-filled next time - Calls the placeholder login endpoint, stores user in Zustand store on success
- Not dismissable — user must enter a name to use the app
- [ ] On login success: store
userIdand pass it asx-user-idheader on all subsequent API requests (via theauthenticatedFetchwrapper or a global header) - [ ] Logout: clear Zustand store and
x-user-idheader (popup reappears) - [ ] Rendered in
AppContentinApp.tsx— show popup when no user in store, show normal app when logged in
Notes
- No pages, no routes — just a popup overlay
- The name is case-sensitive — "Alice" and "alice" are different users
- Same name always produces the same userId, so you can "log back in" as the same user
- This entire placeholder is removed when real auth is added in step 06
Related Skills
TravisBumgarner/ui-designer
development
VerifiedTrustedCommunity
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>
SKILL.mdUpdated Apr 20, 2026
TravisBumgarner/typescript-pro
development
VerifiedTrustedCommunity
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.
SKILL.mdUpdated Apr 20, 2026
TravisBumgarner/tb-route-builder
development
VerifiedTrustedCommunity
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.
SKILL.mdUpdated Apr 20, 2026
TravisBumgarner/tb-10-status-check
development
VerifiedTrustedCommunity
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.
SKILL.mdUpdated Apr 20, 2026