acedergren/stitch-to-react
skills/stitch-to-react/SKILL.md
Use when converting Stitch designs into production React components. Enforces modular architecture: logic in hooks, data in mockData.ts, Readonly TypeScript interfaces, theme-mapped Tailwind classes. Triggers on: Stitch to React, design to code, stitch export, stitch MCP, stitch:get_screen.
$ install --global
skillsauthnpx skillsauth add acedergren/agentic-tools stitch-to-reactInstall 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
70%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 7, 2026, 8:58 AM144.4s1 file scanned
SKILL.md
- name:
- stitch-to-react
- description:
- Use when converting Stitch designs into production React components. Enforces modular architecture: logic in hooks, data in mockData.ts, Readonly TypeScript interfaces, theme-mapped Tailwind classes. Triggers on: Stitch to React, design to code, stitch export, stitch MCP, stitch:get_screen.
- - "stitch*:
- *
Stitch to React Components
NEVER
- NEVER fetch without checking
.stitch/designs/first — always ask user about refresh intent before re-downloading - NEVER hardcode hex codes as Tailwind arbitrary values (
bg-[#2563eb]) — extract to theme, use semantic classes - NEVER skip AST validation — architecture checklist is non-optional before marking done
- NEVER put logic in component bodies — event handlers and state logic go in
src/hooks/ - NEVER omit TypeScript interfaces — every component needs a
ReadonlyProps type - NEVER bundle data in component files — all static text, images, lists go in
src/data/mockData.ts - NEVER include Google license headers in generated React components
- NEVER use internal AI fetch tools for Google Cloud Storage URLs — they fail on GCS domains; use the bash script
Namespace Discovery
Run list_tools to find the Stitch MCP prefix (usually stitch: or mcp_stitch:). Use that prefix for all calls.
Call [prefix]:get_screen — captures:
screenshot.downloadUrl+htmlCode.downloadUrlwidth,height,deviceTypedesignTheme(colors, fonts, roundness)
Design Caching Decision
.stitch/designs/{page}.html + .stitch/designs/{page}.png exist?
│
├─ YES → Ask user: "Use cached designs or refresh from Stitch?"
│ Re-download ONLY if user confirms
│
└─ NO → Proceed to download
High-Reliability Download
Internal AI fetch fails on GCS. Use the bash script:
# HTML
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
# Screenshot — append =w{width} to URL
bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
Architecture Rules (Non-Negotiable)
| Rule | Enforcement |
| ---- | ----------- |
| Modular files | Never output single-file component dumps |
| Logic isolation | Event handlers → src/hooks/ |
| Data decoupling | Static content → src/data/mockData.ts |
| Type safety | Readonly interface named [Component]Props on every component |
| Style mapping | Extract tailwind.config from HTML <head>, sync to resources/style-guide.json |
File Structure
src/
├── components/ # One file per component + index.ts barrel
├── hooks/ # useNavigation.ts, useFormState.ts, etc.
├── data/
│ └── mockData.ts # All static text, images, config
├── styles/
│ └── theme.ts # Extracted Tailwind tokens
└── App.tsx
Validation Sequence
After generating each component:
npm run validate <file_path>— AST compliance- Check against
resources/architecture-checklist.md npm run dev— zero console errors required
A component is not done until it passes the checklist AND the dev server shows no errors.
Troubleshooting
| Issue | Fix |
| -------------------- | ---------------------------------------------------------------- |
| Fetch fails (403) | Check script quotes; verify =w{width} appended to screenshot URL |
| AST shows hardcoded styles | Extract hex → style-guide.json → replace with Tailwind class |
| TypeScript prop errors | Add Readonly interface following template in resources/component-template.tsx |
| Theme class not recognized | Verify tailwind.config extracted and synced to style-guide.json |
| Cached screenshot stale | Check file timestamps; ask user to confirm refresh |
Related Skills
acedergren/skills/api-audit
development
VerifiedTrustedCommunity
--- name: api-audit description: "Use when auditing API routes for schema drift, missing auth, or validation gaps. Scans routes against shared TypeScript types to find mismatches, missing middleware, and undocumented endpoints. Read-only — produces a severity-grouped report. Keywords: audit routes, schema drift, auth gaps, missing validation, type mismatch, orphaned schemas. Triggers on "audit API routes" or "find schema drift"." --- # API Route & Type Audit Skill ## When to Use Load this skil
14SKILL.mdUpdated Mar 26, 2026
acedergren/write-natural-swedish
development
VerifiedTrustedCommunity
Use when drafting, translating, polishing, or reviewing Swedish text so it sounds natural, fluent, contemporary, and appropriate for its audience. Triggers include "write better Swedish", "make this sound natural in Swedish", "translate into Swedish", "polish this Swedish", "tech company Swedish", "contemporary Swedish words", "Swedish developer docs", and "avoid Anglicisms".
13SKILL.mdUpdated May 13, 2026
acedergren/shadcn-svelte
development
VerifiedTrustedCommunity
Use when working with shadcn-svelte components, TanStack Table in Svelte 5, or Tailwind v4.1. Covers non-obvious reactivity bugs, library selection trade-offs, and migration pitfalls not in the official docs. Keywords: shadcn-svelte, TanStack Table, Tailwind v4.1, Svelte 5 runes, bits-ui, superforms, data table, svelte-check.
13SKILL.mdUpdated Mar 26, 2026
acedergren/oracle-idcs-org-provisioning
data-ai
VerifiedTrustedCommunity
Use when mapping IDCS claims to org membership after OAuth login succeeds. Covers mapProfileToUser, session.create.before, session.create.after hooks, MERGE INTO upserts, tenant-org mapping, and first-admin bootstrap. Keywords: IDCS groups, org_members, provisioning, session hooks, tenant map, MERGE INTO.
13SKILL.mdUpdated Mar 26, 2026