| name | backy-frontend-desing-prototype |
| description | Backy frontend design prototype super-skill. Use for single-screen HTML prototypes, landing pages, dashboards, documents, motion UI, social cards, and interactive demos. Routes across 32 Open Design prototype capabilities without installing them as 32 separate top-level skills. |
Backy Frontend Desing: Prototype
Use this when the user asks for single-screen HTML prototypes, landing pages, dashboards, documents, motion UI, social cards, and interactive demos.
This is a compact router over 32 Open Design prototype capabilities. Keep the top-level context small: start with the catalog, then load only the exact source reference files needed for the request.
Workflow
- Read
references/catalog.md to pick one primary capability and, if useful, one support capability.
- Read only the matching file(s) from
references/source/. Do not bulk-load every source file.
- Apply the source skill's constraints, but keep the repo's existing architecture and design system unless the user explicitly asks for a new direction.
- For UI work, verify real rendered output when a local app or HTML artifact exists. Use screenshots or browser checks for responsive and visual claims.
- If the requested work crosses modes, combine this with the relevant sibling skill, for example
backy-frontend-desing-design-system plus backy-frontend-desing-prototype.
Capability Map
agent-browser -> references/source/agent-browser.mdarticle-magazine -> references/source/article-magazine.mdartifacts-builder -> references/source/artifacts-builder.mdcard-twitter -> references/source/card-twitter.mdcard-xiaohongshu -> references/source/card-xiaohongshu.mdd3-visualization -> references/source/d3-visualization.mddata-report -> references/source/data-report.mddoc -> references/source/doc.mddoc-kami-parchment -> references/source/doc-kami-parchment.mddocx -> references/source/docx.mdfaq-page -> references/source/faq-page.mdflutter-animating-apps -> references/source/flutter-animating-apps.mdfrontend-dev -> references/source/frontend-dev.mdgsap-core -> references/source/gsap-core.mdgsap-react -> references/source/gsap-react.mdgsap-scrolltrigger -> references/source/gsap-scrolltrigger.mdgsap-timeline -> references/source/gsap-timeline.mdhand-drawn-diagrams -> references/source/hand-drawn-diagrams.mdlogin-flow -> references/source/login-flow.mdminimax-docx -> references/source/minimax-docx.mdminimax-pdf -> references/source/minimax-pdf.mdmockup-device-3d -> references/source/mockup-device-3d.mdpdf -> references/source/pdf.mdposter-hero -> references/source/poster-hero.mdrelease-notes-one-pager -> references/source/release-notes-one-pager.mdresume-modern -> references/source/resume-modern.mdshader-dev -> references/source/shader-dev.mdsocial-reddit-card -> references/source/social-reddit-card.mdsocial-spotify-card -> references/source/social-spotify-card.mdsocial-x-post-card -> references/source/social-x-post-card.mdthreejs -> references/source/threejs.mdweb-artifacts-builder -> references/source/web-artifacts-builder.md
Backy Defaults
- Prefer distinctive, production-grade UI over generic AI template structure.
- Use real content and data from the user or project. Do not invent metrics, logos, testimonials, or product claims.
- Keep typography, spacing, interaction states, and responsive behavior as first-class acceptance criteria.
- When source skills conflict, choose the stricter visual QA rule and the simpler implementation.
- For existing products, improve the current surface instead of replacing product structure wholesale.
