murillodutt/stitch/skills/stitch-prompt
stitch/skills/stitch-prompt/SKILL.md
Compose optimized prompts for Google Stitch screen generation. Reads DESIGN.md Section 6 context, applies Stitch Effective Prompting best practices, and outputs ready-to-use prompts. Use when: 'stitch prompt', 'compose prompt', 'create stitch prompt', 'prompt for stitch'.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add murillodutt/cellm stitch/skills/stitch-promptInstall 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 16, 2026, 5:23 AM5.3s5 files scanned
SKILL.md
- description:
- Compose optimized prompts for Google Stitch screen generation. Reads DESIGN.md Section 6 context, applies Stitch Effective Prompting best practices, and outputs ready-to-use prompts. Use when: 'stitch prompt', 'compose prompt', 'create stitch prompt', 'prompt for stitch'.
- cellm_scope:
- universal
- user-invocable:
- true
- argument-hint:
- [description of the screen or edit]
- allowed-tools:
- Read, Glob, AskUserQuestion
Compose optimized prompts for Stitch screen generation and editing. Uses DESIGN.md context to ensure visual consistency across all generated screens.
Prompt Structure
Every Stitch prompt MUST follow this 4-part structure:
1. Design Context Block (from DESIGN.md)
Synthesize a design context block from the 5 canonical DESIGN.md sections:
- Color Foundation (Section 2) — primary, secondary, surface hex values
- Typography (Section 3) — font families, weight hierarchy
- Components (Section 5) — button styles, card patterns, nav conventions
Format as a context preamble:
Design System Context:
- Primary: #HEXCODE (role)
- Secondary: #HEXCODE (role)
- Font: FamilyName, weights: 400/500/600/700
- Radius: 0.Xrem default
- Style: [aesthetic description from Section 1]
2. Screen Description
Describe WHAT the screen shows, not HOW to build it. Stitch responds best to:
- Descriptive language over technical instructions
- User-facing outcomes over implementation details
- Spatial relationships ("sidebar on the left", "hero section at top")
3. Device Type
Always specify one of:
| Device | Use When |
|--------|----------|
| DESKTOP | Dashboard, admin, content-heavy pages |
| MOBILE | Mobile-first flows, responsive previews |
| TABLET | Hybrid layouts |
4. Consistency Instructions
Always append:
Maintain exact visual consistency with the design system above.
Use the specified color palette and typography — do not introduce new colors or fonts.
Prompt Templates
New Screen — Landing Page
[Design Context Block]
Create a landing page with:
- Hero section: bold headline using display font, subtitle in body font, primary CTA button
- Feature grid: 3 cards showing key benefits with icons
- Social proof section: testimonials or partner logos
- Footer with navigation links and contact info
Device: DESKTOP
Maintain exact visual consistency with the design system above.
New Screen — Dashboard
[Design Context Block]
Create a dashboard page with:
- Left sidebar navigation with icon + label items, active state highlighted
- Top bar with search input, notification bell, user avatar
- Main content area: summary stats in 4 metric cards, data table below
- Cards use surface elevation with subtle shadows
Device: DESKTOP
Maintain exact visual consistency with the design system above.
New Screen — Form Page
[Design Context Block]
Create a form page with:
- Page title and description at top
- Form fields: text inputs, select dropdowns, date pickers
- Grouped in logical sections with section headers
- Action buttons at bottom: primary submit, secondary cancel
- Inline validation states for required fields
Device: DESKTOP
Maintain exact visual consistency with the design system above.
Edit Existing Screen
[Design Context Block]
Edit the current screen to [ONE specific change]:
- [describe the single change clearly]
Do not modify any other elements. Keep all existing styling and layout intact.
Maintain exact visual consistency with the design system above.
Stitch Best Practices
| Rule | Reason | |------|--------| | One aspect per edit prompt | Stitch handles single-focus edits better than multi-change prompts | | Descriptive over technical | "A warm, inviting hero" beats "div with bg-primary p-8 flex" | | Always include design context | Without context, Stitch defaults to its own palette and fonts | | Specify device type explicitly | Prevents layout mismatches between desktop and mobile | | Reference existing screens | "Match the style of the login page" improves consistency | | Avoid CSS class names in prompts | Stitch generates its own Tailwind classes from descriptions |
Workflow
- Read
.stitch/DESIGN.md— extract design context - Read
.stitch/SITE.md(if exists) — understand page purpose in sitemap - Ask user for screen description if not provided as argument
- Compose prompt using the 4-part structure above
- Present the composed prompt to the user for review
- Output the final prompt ready for
stitch:invokeor manual use
References
Consult these files for detailed guidance:
- Design Mappings -- UI/UX keyword refinement and atmosphere descriptors
- Prompt Keywords -- component keywords, adjective palettes, color roles
- Tool Schemas -- mcp__stitch__* tool call examples and tips
- DESIGN.md Example -- gold standard 6-section DESIGN.md
Known Limitations
- Stitch may ignore some color specifications on first generation — re-edit with explicit color references
- Multi-screen generation (up to 5) uses the same prompt for all — adjust descriptions accordingly
generate_screen_from_texttakes 1-2 minutes — do not retry if no immediate response
Related Skills
murillodutt/cellm/skills/prose
data-ai
VerifiedTrustedCommunity
Prose override — temporarily disable quantization and respond in readable prose. Use when relational density matters, for safety-critical explanations, onboarding handoffs, or when token economy is not the priority.
SKILL.mdUpdated Apr 23, 2026
murillodutt/cellm/skills/pr-guardian
development
VerifiedTrustedCommunity
Govern explicit weekly Super PRs or maintainer-requested PR merges. Evaluates a 10-criterion readiness checklist and performs governed merge only when a user-requested PR is READY. Never creates or keeps permanent PRs. Use when: 'pr-check', 'pr-merge', 'merge this PR safely', 'is PR ready', 'guard merge', or /sk-git delegates pr-merge.
SKILL.mdUpdated Apr 23, 2026
murillodutt/cellm/skills/compress-llm
data-ai
VerifiedTrustedCommunity
Operational surface for the compress-llm Layer-1 token I/O compressor. Enable, disable, switch mode, and inspect status without editing config files. Use when tuning compression pressure for the current session or project.
SKILL.mdUpdated Apr 23, 2026
murillodutt/cellm/skills/cellm-feedback
tools
VerifiedTrustedCommunity
Generate structured upstream feedback for the CELLM engineering team. Produces evidence-first Markdown at docs/evidence/<date>-cellm-feedback-*.md for bugs, anti-patterns, deprecation gaps, and harness surprises, with optional atom registration via knowledge_ops. Use when: 'feedback for CELLM', 'send to CELLM team', 'register this as atom', 'document this anti-pattern', 'report this bug upstream'. Trigger proactively on MCP schema/runtime mismatches, mechanical edit loops (>=3 sequential edits), short deprecation windows (<6 weeks), or reusable harness surprises. Do NOT trigger for routine feature work or project-local bugs.
SKILL.mdUpdated Apr 21, 2026