# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 63 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=63 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [use-topbar](https://affpapa.org/en/nevibecode/skills/use-topbar.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — A skill that wires the @aura/topbar component into Flows/Fusion apps: breadcrumbs, theme switcher, Atlas launcher. - [create-client-tool](https://affpapa.org/en/nevibecode/skills/create-client-tool.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Scaffolds an AtlasTool for web apps using useAtlasChat. - [graph-viewer](https://affpapa.org/en/nevibecode/skills/graph-viewer.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — This skill walks an agent through embedding an interactive CDF data model graph in a Flows app: nodes, relations and reverse relations. - [setup-flows-auth](https://affpapa.org/en/nevibecode/skills/setup-flows-auth.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Configures Cognite Flows authentication for React applications running inside Fusion iframes. - [setup-python-tools](https://affpapa.org/en/nevibecode/skills/setup-python-tools.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Wires client-side Python tool execution through Pyodide into an app that already has useAtlasChat. - [integrate-file-viewer](https://affpapa.org/en/nevibecode/skills/integrate-file-viewer.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Sets up CogniteFileViewer in Flows applications to render CDF files, documents, and images without manual PDF worker configuration. - [security](https://affpapa.org/en/nevibecode/skills/security.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Walks a Flows app step by step, finds leaked secrets, unsafe DOM calls and auth gaps, then fixes each one in place. - [integrate-atlas-chat](https://affpapa.org/en/nevibecode/skills/integrate-atlas-chat.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — A skill that wires the Atlas chat into your app's own UI. - [correctness-and-error-handling](https://affpapa.org/en/nevibecode/skills/correctness-and-error-handling.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Finds and fixes runtime errors, missing error boundaries, unhandled promises, and empty data states in Cognite Flows React applications. - [integrate-todo-list](https://affpapa.org/en/nevibecode/skills/integrate-todo-list.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Adds a TodoWrite tool and a task panel so the in-app Atlas agent can show progress on multi-step work. - [reveal-3d](https://affpapa.org/en/nevibecode/skills/reveal-3d.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Adds an interactive Cognite Reveal viewer to a Flows app: CAD models, point clouds, 360° image collections and CDF scenes. - [design](https://affpapa.org/en/nevibecode/skills/cognitedata-design.md) — skill · cognitedata · Claude Code, Codex, Cursor +3 · 1900 installs — Provides Aura design system rules for Flows and Fusion applications. - [power-confidence](https://affpapa.org/en/nevibecode/skills/power-confidence.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 497 installs — A skill that spells out how to animate strength and authority: heavy movement, sudden stops, almost no bounce. - [continuous-loops](https://affpapa.org/en/nevibecode/skills/continuous-loops.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 497 installs — Guides AI agents in creating looping CSS animations with Disney motion principles. - [universal-patterns](https://affpapa.org/en/nevibecode/skills/universal-patterns.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 496 installs — Sets baseline durations, easing curves and the 12 animation principles for any motion in an interface. - [secondary-action-mastery](https://affpapa.org/en/nevibecode/skills/secondary-action-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 496 installs — A skill for adding secondary motion that supports the primary action instead of fighting it. - [mobile-developer](https://affpapa.org/en/nevibecode/skills/mobile-developer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 412 installs — Skill for building cross-platform mobile apps with React Native and Expo. - [feedback-indicators](https://affpapa.org/en/nevibecode/skills/feedback-indicators.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 495 installs — A skill for confirmation animations: success checkmarks, error shakes, form validation and toasts. - [straight-ahead-pose-mastery](https://affpapa.org/en/nevibecode/skills/straight-ahead-pose-mastery.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 495 installs — Helps developers choose between spontaneous motion passes and structured key poses, establishing hybrid animation pipelines for interfaces, effects, and games. - [cypress](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-cypress.md) — skill · Claude MPM Team · Claude Code, Codex, Cursor +3 · 653 installs — A skill for writing Cypress E2E and component tests: stable selectors, deterministic waits and network stubbing instead of fixed sleeps. - [rspeedy-bundle-size](https://affpapa.org/en/nevibecode/skills/rspeedy-bundle-size.md) — skill · lynx-community · Claude Code, Codex, Cursor +3 · 458 installs — A skill that breaks down what makes a rspeedy/ReactLynx .lynx.bundle heavy and tells you which lever to pull first. - [emotional-disconnect](https://affpapa.org/en/nevibecode/skills/emotional-disconnect.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 491 installs — Diagnoses why an animation feels wrong and matches motion to the emotion the moment should carry. - [state-changes](https://affpapa.org/en/nevibecode/skills/state-changes.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 491 installs — A skill for animating elements that transform in place: toggles, accordions, checkboxes, button states. - [responsive-adaptive](https://affpapa.org/en/nevibecode/skills/responsive-adaptive.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 491 installs — Adjusts UI animation timing to viewport dimensions, travel distance, and reduced motion settings instead of using static durations. - [customware-support-widget](https://affpapa.org/en/nevibecode/skills/customware-support-widget.md) — skill · customware-ai · Claude Code, Codex, Cursor +3 · 2400 installs — Wires the Customware support chat into a client-only React Router SPA: script in root.tsx, in the route or layout that needs it. - [wix-headless](https://affpapa.org/en/nevibecode/skills/wix-headless.md) — skill · wix · Claude Code, Codex, Cursor +3 · 338 installs — Wires Wix services into a headless frontend: infers the capabilities you need, installs the apps, seeds the backend and hands back an SDK guide. - [animation-micro-interaction-pack](https://affpapa.org/en/nevibecode/skills/animation-micro-interaction-pack.md) — skill · patricio0312rev · Claude Code, Codex, Cursor +3 · 499 installs — A set of reusable motion patterns for interfaces: hover effects, entrances and exits, gesture feedback. - [professionalism-credibility](https://affpapa.org/en/nevibecode/skills/professionalism-credibility.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 490 installs — Sets motion design guidelines for enterprise dashboards and B2B software. - [Animation Principles - Absolute Beginner](https://affpapa.org/en/nevibecode/skills/animation-principles-absolute-beginner.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 489 installs — Walks through the 12 principles of animation in plain words. - [technical-constraints](https://affpapa.org/en/nevibecode/skills/technical-constraints.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 489 installs — A skill for when animation is capped by browser support, platform capabilities or technical requirements. - [popmotion](https://affpapa.org/en/nevibecode/skills/popmotion.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 489 installs — Helps coding agents implement Disney's 12 animation principles using Popmotion. - [comfort-safety](https://affpapa.org/en/nevibecode/skills/comfort-safety.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 489 installs — A skill that sets animation rules for interfaces where users need to feel safe rather than impressed. - [implementation-debugging](https://affpapa.org/en/nevibecode/skills/implementation-debugging.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 489 installs — This skill diagnoses web animation glitches and broken transitions. - [ui-designer](https://affpapa.org/en/nevibecode/skills/ui-designer.md) — skill · daniel-dan-conrad · Claude Code, Codex, Cursor +3 · 3600 installs — A skill that picks a deliberate visual direction before writing code, then builds the interface around typography, color, motion and composition. - [shadcn](https://affpapa.org/en/nevibecode/skills/pymodel-shadcn.md) — skill · PyModel · Claude Code, Codex, Cursor +3 · 458 installs — A skill that hands your agent a rulebook for shadcn/ui: component architecture, accessibility, theming, forms and tables. - [arrange](https://affpapa.org/en/nevibecode/skills/arrange.md) — skill · aladicf · Claude Code, Codex, Cursor +3 · 577 installs — A skill that fixes weak spatial composition: arbitrary spacing, crowded groups, monotonous card grids. - [universal-industry](https://affpapa.org/en/nevibecode/skills/universal-industry.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — A skill that turns Disney's 12 animation principles into UI defaults for timing, easing and motion rules when no industry guide applies. - [friendliness-approachability](https://affpapa.org/en/nevibecode/skills/friendliness-approachability.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — Guides interface motion to feel warm, gentle, and welcoming. - [medium-300-500ms](https://affpapa.org/en/nevibecode/skills/medium-300-500ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — A skill that tells your coding agent how to build mid-duration animations: page transitions, modals, staggered reveals. - [large-500-800ms](https://affpapa.org/en/nevibecode/skills/large-500-800ms.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 487 installs — A skill that tells your coding agent how to build 500–800ms animations: hero transitions, complex reveals, moments that deserve the user's attention. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=64 ## Refine [react](https://affpapa.org/en/nevibecode/tag/react.md) · [ui](https://affpapa.org/en/nevibecode/tag/ui.md) · [typescript](https://affpapa.org/en/nevibecode/tag/typescript.md) · [css](https://affpapa.org/en/nevibecode/tag/css.md) · [animation](https://affpapa.org/en/nevibecode/tag/animation.md) · [accessibility](https://affpapa.org/en/nevibecode/tag/accessibility.md) · [design-system](https://affpapa.org/en/nevibecode/tag/design-system.md) · [nextjs](https://affpapa.org/en/nevibecode/tag/nextjs.md) · [tailwind](https://affpapa.org/en/nevibecode/tag/tailwind.md) · [javascript](https://affpapa.org/en/nevibecode/tag/javascript.md) · [webgl](https://affpapa.org/en/nevibecode/tag/webgl.md) · [typography](https://affpapa.org/en/nevibecode/tag/typography.md) ## Narrow this list Parameters: `?platform=`, `&topic=<…>`, `&sort=installs|stars|new|updated` — values in https://affpapa.org/en/nevibecode/agents.md --- NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md