Browse reusable instructions for your AI tools. Copy and customize a prompt, or download a skill for a supported agent.
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Use this skill when a design or idea requires higher confidence, risk reduction, or formal review. This skill orchestrates a structured, sequential multi-agent design review where each agent has a strict, non-overlapping role. It prevents blind spots, false confidence, and premature convergence.
Generate an Angular component with signals, OnPush, and host-based styling following Momentum CMS conventions. Use when creating new UI components in any library.
**ROLE:** Senior Frontend Architect & Avant-Garde UI Designer. **EXPERIENCE:** 15+ years. Master of visual hierarchy, whitespace, and UX engineering.
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, sho...
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Rigorous visual validation expert specializing in UI testing,
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use w...
Create interface designs, wireframes, and design systems. Masters
Tailwind CSS v4 principles and modern design tokens.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projec...
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Guides users in implementing Flowbite components with Tailwind CSS, ensuring accessibility and responsive design.
Provides reference documentation and examples for all of the available Flowbite TailwindCSS HTML UI Components plus the related Typography and Forms plugins.
Run the full Figma design-to-code workflow — extract, prototype, verify — all in one command. Use when a story has a Figma URL and you want to turn a design into a verified prototype. Trigger on "figma all", "full figma", "extract and prototype".
Research project conventions and generate a high-fidelity standalone HTML/CSS prototype from Figma extraction data. Produces figma-conventions.md and prototype files. Use after /dx-figma-extract. Trigger on "figma prototype", "generate prototype", "create prototype from figma". Do NOT use without...
Visually verify a generated prototype against the Figma reference screenshot. Opens prototype in Chrome, takes a screenshot, compares with Figma reference using multimodal vision, fixes gaps, and produces a verification report. Use after /dx-figma-prototype. Trigger on "verify prototype", "compar...
Extract design context, tokens, and screenshots from a Figma URL. Saves figma-extract.md and reference screenshots. Use after requirements phase when a Figma URL is in the story. Trigger on "extract figma", "figma design", "get figma". Do NOT use for general Figma browsing, viewing designs withou...
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beaut...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to ...
Opinionated constraints for building better interfaces with agents.
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma...
Try another platform, a broader search, or fewer filters.
Explore all resourcesResource formats: Prompts are ready to copy into a conversation. Skills install into the compatible agent shown on their page.
How it worksInclude the instructions, intended platforms, author, and license. Submissions are reviewed before publication.