Prompts
Every piece has a ready request to paste into your agent, which adapts it to your project.
Add Shape Morph to my project with the Fluid library. Use ShapeMorph with my logo. Convert its SVG with fitPath before passing it. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Icon Morph to my project with the Fluid library. Replace the open and close, play and pause icons in my project with IconMorph. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Menu Morph to my project with the Fluid library. Use MenuMorph as the mobile menu of my product, with its real sections. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Morph Dialog to my project with the Fluid library. Use MorphDialog for the windows in my product that open from a card or button, passing that element as from. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Morph Button to my project with the Fluid library. Use MorphButton on the form submissions in my project. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Copy Morph to my project with the Fluid library. Use CopyMorph wherever people copy codes, links or keys in my product. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Morph Loader to my project with the Fluid library. Use MorphLoader on loads that take longer than a second. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Pet to my project with the Fluid library. Create my product's mascot with Pet, in my brand colour, and use the moods to react to what people do. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Bot to my project with the Fluid library. Use Bot in my product's support chat, wired to the real messages. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Mascot to my project with the Fluid library. Give my product a mascot with Mascot. Pick the object that matches what we do with pickObject, wear our accent colour and tie its moods to real events. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Segmented Picker to my project with the Fluid library. Use SegmentedPicker for filters and tabs with up to five short options. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Pill Tabs to my project with the Fluid library. Use PillTabs on the filtered lists of my product, with the real counts. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Spring Switch to my project with the Fluid library. Use SpringSwitch for preferences that apply right away. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Spring Button to my project with the Fluid library. Replace the main buttons with SpringButton, keeping the actions they already have. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Morph Island to my project with the Fluid library. Use MorphIsland for the main quick action, with the content that makes sense in my product. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Word Cycle to my project with the Fluid library. Use WordCycle in the main headline, with words that describe my audience. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Text Reveal to my project with the Fluid library. Use TextReveal on a section headline, once per page. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Logo Wipe to my project with the Fluid library. Use LogoWipe on the important screen changes, with my logo. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Island Toast to my project with the Fluid library. Use IslandToast for the result notices of my product's actions. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Splash Choice to my project with the Fluid library. Build my product's opening with SplashChoice, my logo and the areas of my business as options. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Splash Shapes to my project with the Fluid library. Build my product's opening with SplashShapes, my logo and a sentence about what I do. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.
Add Splash Dots to my project with the Fluid library. Build my product's opening with SplashDots, my logo and the brand name. Read my project first. Use my logo, my colours and my font through the --fluid-* variables. Keep 44px touch targets, visible focus and reduced motion. If I have no SVG logo, ask before making one up.