react:components
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. - High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- Use the
Bashtool to run:bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html". - This script handles the necessary redirects and security handshakes.
- Use the
- Visual audit: Check
screenshot.downloadUrlto confirm the 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:
More from freekmurze/dotfiles
php-guidelines-from-spatie
Describes PHP and Laravel guidelines provided by Spatie. These rules result in more maintainable, and readable code.
145context7-auto-research
Automatically fetches up-to-date documentation from Context7 when users ask about libraries, frameworks, APIs, or need code examples. Triggers proactively without explicit user request.
28react-native-best-practices
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
24agent-browser
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
24copy-editing
When the user wants to edit, review, or improve existing marketing copy. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' or 'copy sweep.' This skill provides a systematic approach to editing marketing copy through multiple focused passes.
24fix-github-issue
Fix GitHub issues using gh CLI. Use when asked to fix, resolve, or address a GitHub issue. Creates fixes on separate branches, runs tests locally, and creates PRs when tests pass. Requires gh CLI authenticated and repo cloned locally.
22