mediar-ai/react:components
packages/skills/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 mediar-ai/skillhubz react:componentsInstall 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 24, 2026, 9:04 PM1.8s1 file 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. - 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:
- 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
mediar-ai/valet
tools
VerifiedTrustedCommunity
Use when the user wants to manage Valet agents, channels, connectors, organizations, or environment variables (secrets and plain config) via the valet CLI. Handles creation, deployment, linking, teardown, and all multi-step workflows. Also use when asked to "create an agent", "deploy an agent", "design an agent", "build me an agent that...", "create a connector", "set up a webhook", or anything involving the Valet platform or any request to create and deploy AI agents. Also use when asked to "learn from this session", "capture this workflow", "save this as an agent", "make this repeatable", or when writing SOUL.md files.
8SKILL.mdUpdated Aug 25, 2026
mediar-ai/valet-publish
tools
VerifiedTrustedCommunity
Publish files, folders, and artifacts to the web. Static hosting for HTML sites, images, PDFs, reports, dashboards, and any file type. Use when asked to publish, host, upload, serve, or share work at a live URL. Also use to propose a rendered page when a report, comparison, chart, design document, or status page would work better than terminal text, but do not create or update a remote site until the user asks or agrees. Account publishing gives a permanent, private-by-default URL visible to org members; --anonymous gives a temporary public URL with no account. Use the valet CLI when available and its MCP server when the CLI cannot run. For deploying an AI agent rather than static files, use the `valet` skill instead.
8SKILL.mdUpdated Aug 25, 2026
mediar-ai/packages/skills/skills/faceless-so
testing
VerifiedTrustedCommunity
# Faceless.so Turn a script, prompt, Reddit post, or blog into a Remotion short with TTS, captions, and B-roll, then auto-post to YouTube, TikTok, Instagram, X, Facebook, LinkedIn, and Threads. ## Prerequisites - A Faceless.so account (from $24/mo) at https://faceless.so - Source material: script, prompt, Reddit URL, or blog URL - Destination social accounts to auto-post (YouTube, TikTok, Instagram, X, Facebook, LinkedIn, Threads) ## Instructions 1. Open https://faceless.so and start a new
8SKILL.mdUpdated Aug 25, 2026
mediar-ai/packages/skills/skills/bimi-svg-tiny-p-s-corpus-validator
testing
VerifiedTrustedCommunity
# BIMI SVG Tiny P/S Corpus Validator Use the public makeBIMI SVG Tiny P/S Test Corpus to evaluate an SVG against its evidence-bound fixture rules and to report the result clearly. ## Inputs Accept either an SVG file, an SVG URL, or raw SVG markup. If the source cannot be retrieved or parsed as XML, stop and report that limitation. ## Authoritative corpus 1. Retrieve the current manifest from `https://makebimi.com/public/test-corpus/v1/manifest.json`. 2. Record `schema_version`, `corpus_vers
8SKILL.mdUpdated Aug 25, 2026