NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
use-topbar skill A skill that wires the @aura/topbar component into Flows/Fusion apps: breadcrumbs, theme switcher, Atlas launcher.
CX Codex +1
1,900installs
create-client-tool skill Scaffolds an AtlasTool for web apps using useAtlasChat. It generates TypeBox parameter validation, handles in-browser execution, and connects tools to the chat hook.
CX Codex +1
1,900installs
graph-viewer skill This skill walks an agent through embedding an interactive CDF data model graph in a Flows app: nodes, relations and reverse relations.
CX Codex +1
1,900installs
setup-flows-auth skill Configures Cognite Flows authentication for React applications running inside Fusion iframes. It detects your app architecture, adds Cognite SDK packages, and updates Vite settings.
CX Codex +1
1,900installs
setup-python-tools skill Wires client-side Python tool execution through Pyodide into an app that already has useAtlasChat. Useful when the agent ships tool code and the browser should run it.
CX Codex +1
1,900installs
integrate-file-viewer skill Sets up CogniteFileViewer in Flows applications to render CDF files, documents, and images without manual PDF worker configuration.
CX Codex +1
1,900installs
security skill Walks a Flows app step by step, finds leaked secrets, unsafe DOM calls and auth gaps, then fixes each one in place.
CX Codex +1
1,900installs
integrate-atlas-chat skill A skill that wires the Atlas chat into your app's own UI. Use it when the Fusion/EOS sidebar is not an option.
CX Codex +1
1,900installs
correctness-and-error-handling skill Finds and fixes runtime errors, missing error boundaries, unhandled promises, and empty data states in Cognite Flows React applications.
CX Codex +1
1,900installs
integrate-todo-list skill Adds a TodoWrite tool and a task panel so the in-app Atlas agent can show progress on multi-step work.
CX Codex +1
1,900installs
reveal-3d skill Adds an interactive Cognite Reveal viewer to a Flows app: CAD models, point clouds, 360° image collections and CDF scenes.
CX Codex +1
1,900installs
design skill Provides Aura design system rules for Flows and Fusion applications. It guides agents to choose primitives, rely on semantic tokens, and maintain consistent UI states.
CX Codex +1
1,900installs
power-confidence skill A skill that spells out how to animate strength and authority: heavy movement, sudden stops, almost no bounce. Useful for hero sections and premium product showcases.
CX Codex +1
497installs
continuous-loops skill Guides AI agents in creating looping CSS animations with Disney motion principles. Useful for spinners, pulse indicators, typing dots, and ambient effects.
CX Codex +1
497installs
universal-patterns skill Sets baseline durations, easing curves and the 12 animation principles for any motion in an interface. Useful when your agent writes CSS transitions and guesses the timing wrong.
CX Codex +1
496installs
secondary-action-mastery skill A skill for adding secondary motion that supports the primary action instead of fighting it. Useful for UI animation and game feel.
CX Codex +1
496installs
mobile-developer skill Skill for building cross-platform mobile apps with React Native and Expo. Helps configure routing, native device APIs, and store deployments for iOS and Android.
CX Codex +1
412installs
feedback-indicators skill A skill for confirmation animations: success checkmarks, error shakes, form validation and toasts. Useful when the UI has to answer back clearly.
CX Codex +1
495installs
straight-ahead-pose-mastery skill Helps developers choose between spontaneous motion passes and structured key poses, establishing hybrid animation pipelines for interfaces, effects, and games.
CX Codex +1
495installs
cypress skill A skill for writing Cypress E2E and component tests: stable selectors, deterministic waits and network stubbing instead of fixed sleeps.
CX Codex +1
653installs
rspeedy-bundle-size skill A skill that breaks down what makes a rspeedy/ReactLynx .lynx.bundle heavy and tells you which lever to pull first.
CX Codex +1
458installs
emotional-disconnect skill Diagnoses why an animation feels wrong and matches motion to the emotion the moment should carry. Useful when users call your UI cold or annoying.
CX Codex +1
491installs
state-changes skill A skill for animating elements that transform in place: toggles, accordions, checkboxes, button states. Useful when an interface needs smooth transitions without enter or exit.
CX Codex +1
491installs
responsive-adaptive skill Adjusts UI animation timing to viewport dimensions, travel distance, and reduced motion settings instead of using static durations.
CX Codex +1
491installs
customware-support-widget skill Wires the Customware support chat into a client-only React Router SPA: script in root.tsx, <customware-chat> in the route or layout that needs it.
CX Codex +1
2,400installs
wix-headless skill Wires Wix services into a headless frontend: infers the capabilities you need, installs the apps, seeds the backend and hands back an SDK guide.
CX Codex +1
338installs
animation-micro-interaction-pack skill A set of reusable motion patterns for interfaces: hover effects, entrances and exits, gesture feedback. Useful when a UI feels static and you want it to move without hand-tuning timings.
CX Codex +1
499installs
professionalism-credibility skill Sets motion design guidelines for enterprise dashboards and B2B software. Helps implement clean, predictable UI transitions without playfulness.
CX Codex +1
490installs
Animation Principles - Absolute Beginner skill Walks through the 12 principles of animation in plain words. Useful when you are touching motion in a UI or a game for the first time.
CX Codex +1
489installs
technical-constraints skill A skill for when animation is capped by browser support, platform capabilities or technical requirements. It keeps the intent and drops what breaks.
CX Codex +1
489installs
popmotion skill Helps coding agents implement Disney's 12 animation principles using Popmotion. Useful for building physics-based UI motion and multi-step keyframes.
CX Codex +1
489installs
comfort-safety skill A skill that sets animation rules for interfaces where users need to feel safe rather than impressed.
CX Codex +1
489installs
implementation-debugging skill This skill diagnoses web animation glitches and broken transitions. It helps when CSS or JS motion drops frames, renders off-screen, or fails to repeat.
CX Codex +1
489installs
ui-designer skill A skill that picks a deliberate visual direction before writing code, then builds the interface around typography, color, motion and composition.
CX Codex +1
3,600installs
shadcn skill A skill that hands your agent a rulebook for shadcn/ui: component architecture, accessibility, theming, forms and tables. Useful whenever it writes or edits React UI.
CX Codex +1
458installs
arrange skill A skill that fixes weak spatial composition: arbitrary spacing, crowded groups, monotonous card grids.
CX Codex +1
577installs
universal-industry skill A skill that turns Disney's 12 animation principles into UI defaults for timing, easing and motion rules when no industry guide applies.
CX Codex +1
487installs
friendliness-approachability skill Guides interface motion to feel warm, gentle, and welcoming. Helpful when building onboarding steps, support widgets, or chat assistants.
CX Codex +1
487installs
medium-300-500ms skill A skill that tells your coding agent how to build mid-duration animations: page transitions, modals, staggered reveals.
CX Codex +1
487installs
large-500-800ms skill A skill that tells your coding agent how to build 500–800ms animations: hero transitions, complex reveals, moments that deserve the user's attention.
CX Codex +1
487installs
2,481–2,520 of 2,909
