stevengonsalvez/react:components
toolkit/packages/skills/react-components/SKILL.md
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
$ install --global
skillsauthnpx skillsauth add stevengonsalvez/agents-in-a-box react:componentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
4 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
4
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
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 19, 2026, 5:01 PM123.1s9 files scanned
SKILL.md
- name:
- react:components
- description:
- Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
- - "stitch*:
- *
Stitch to React Components
You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.
Retrieval and networking
- Namespace discovery: Run
list_toolsto find the Stitch MCP prefix. Use this prefix (e.g.,stitch:) for all subsequent calls. - Metadata fetch: Call
[prefix]:get_screento retrieve the design JSON. - Check for existing designs: Before downloading, check if
.stitch/designs/{page}.htmland.stitch/designs/{page}.pngalready exist:- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
- If files do not exist: Proceed to step 4.
- High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- HTML:
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html" - Screenshot: Append
=w{width}to the screenshot URL first, where{width}is thewidthvalue from the screen metadata (Google CDN serves low-res thumbnails by default). Then run:bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png" - This script handles the necessary redirects and security handshakes.
- HTML:
- Visual audit: Review the downloaded screenshot (
.stitch/designs/{page}.png) to confirm design intent and layout details.
Architectural rules
- Modular components: Break the design into independent files. Avoid large, single-file outputs.
- Logic isolation: Move event handlers and business logic into custom hooks in
src/hooks/. - Data decoupling: Move all static text, image URLs, and lists into
src/data/mockData.ts. - Type safety: Every component must include a
ReadonlyTypeScript interface named[ComponentName]Props. - Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
- Style mapping:
- Extract the
tailwind.configfrom the HTML<head>. - Sync these values with
resources/style-guide.json. - Use theme-mapped Tailwind classes instead of arbitrary hex codes.
- Extract the
Execution steps
- Environment setup: If
node_modulesis missing, runnpm installto enable the validation tools. - Data layer: Create
src/data/mockData.tsbased on the design content. - Component drafting: Use
resources/component-template.tsxas a base. Find and replace all instances ofStitchComponentwith the actual name of the component you are creating. - Application wiring: Update the project entry point (like
App.tsx) to render the new components. - Quality check:
- Run
npm run validate <file_path>for each component. - Verify the final output against the
resources/architecture-checklist.md. - Start the dev server with
npm run devto verify the live result.
- Run
Troubleshooting
- Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
- Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.
Related Skills
stevengonsalvez/reflect:cost
documentation
VerifiedTrustedCommunity
Report reflect drain spend over a time window — tokens split by cached (cache_read), uncached writes (cache_creation), and io (input+output), with a $ estimate, grouped by day / outcome / model / transcript. Reads the drainer's cost log and surfaces outlier runs and cache-reuse health (the 41.5M-token failure mode = low cache reuse + high cache writes). Use to answer "what is reflection costing me" for the last day / week.
12SKILL.mdUpdated Jun 2, 2026
stevengonsalvez/ainb-fleet:standup
development
VerifiedTrustedCommunity
Show fleet status — every claude session running on the host, merged across ainb + claude-peers broker + background jobs. Use when you need to enumerate sessions before composing an action, see which sessions have a peer registered (broker-routable) vs tmux-only, check the `summary` of each session, or pipe the list into jq for filtering. Default output: text table. Pass --format json for LLM consumption.
10SKILL.mdUpdated May 31, 2026
stevengonsalvez/ainb-fleet:sequence
testing
VerifiedTrustedCommunity
Ordered multi-step prompts to fleet targets, ack-gated between steps via JSONL assistant-turn-end detection. Use for cycles like disconnect→reconnect→verify, or any flow where step N+1 requires step N to have completed first. The skill BLOCKS until each target's transcript shows the next assistant turn finishing OR per-step timeout fires (default 300s).
10SKILL.mdUpdated May 31, 2026
stevengonsalvez/ainb-fleet:needs
development
VerifiedTrustedCommunity
Center control panel — enumerate every claude session that is blocked waiting on something: a user answer (AskUserQuestion fired), an API error retry, an idle assistant turn-end with no follow-up, or an explicit WAITING: marker. Returns rich JSON with signal kind + context per session. Use this when you've stepped away from the fleet and want one place to see everything that wants your attention and answer it.
10SKILL.mdUpdated May 31, 2026