# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 57 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=57 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [rails-hotwire](https://affpapa.org/en/nevibecode/skills/rails-hotwire.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 370 installs — A skill with Hotwire rules for Rails: Turbo Drive, Frames, Streams, Turbo 8 morphing and Stimulus controllers. - [threejs](https://affpapa.org/en/nevibecode/skills/secondsky-threejs.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 460 installs — A skill with reference files and working examples for Three.js: scenes, materials, lighting, shaders, GLTF loading. - [motion-designer](https://affpapa.org/en/nevibecode/skills/ncklrs-motion-designer.md) — skill · ncklrs · Claude Code, Codex, Cursor +3 · 570 installs — Drafts frame-accurate video specifications for Remotion, covering timing, transitions, and layered audio. - [capacitor-angular](https://affpapa.org/en/nevibecode/skills/capacitor-angular.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 944 installs — Guides your coding agent through Capacitor patterns in Angular 16+, covering build directory mapping, standalone components, and plugin services. - [language-detector-api](https://affpapa.org/en/nevibecode/skills/language-detector-api.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 475 installs — Walks your agent through wiring the built-in Language Detector API into a JavaScript or TypeScript web app: support checks, model download, sessions, detect(). - [writing-assistance-apis](https://affpapa.org/en/nevibecode/skills/writing-assistance-apis.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 473 installs — Integrates built-in browser Summarizer, Writer, and Rewriter APIs in JavaScript and TypeScript apps. - [cordova-to-capacitor](https://affpapa.org/en/nevibecode/skills/cordova-to-capacitor.md) — skill · Cap-go · Claude Code, Codex, Cursor +3 · 768 installs — Migrates Cordova or PhoneGap mobile apps to Capacitor step by step. - [3d-visualizer](https://affpapa.org/en/nevibecode/skills/3d-visualizer.md) — skill · daffy0208 · Claude Code, Codex, Cursor +3 · 665 installs — Builds Three.js and React Three Fiber scenes, interactive product configurators, and 3D data charts. - [landing-page-optimization](https://affpapa.org/en/nevibecode/skills/landing-page-optimization.md) — skill · manojbajaj95 · Claude Code, Codex, Cursor +3 · 324 installs — A Claude skill for landing pages: copy frameworks, the 11-element page structure, CTA writing and conversion work. - [proofreader-api](https://affpapa.org/en/nevibecode/skills/proofreader-api.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 470 installs — A skill that walks an agent through browser Proofreader API integration: availability checks, model download monitoring, proofreading and correction handling. - [translator-api](https://affpapa.org/en/nevibecode/skills/translator-api.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 467 installs — Integrates the browser Translator API into JavaScript or TypeScript web apps. - [framer-ui-skills](https://affpapa.org/en/nevibecode/skills/framer-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 320 installs — Hands the agent a fixed set of Framer-style UI rules: dark surfaces, Inter, a 4px grid. - [tanstack-router](https://affpapa.org/en/nevibecode/skills/claude-skills-maintainers-tanstack-router.md) — skill · Claude Skills Maintainers · Claude Code, Codex, Cursor +3 · 445 installs — Configures type-safe file-based routing in React SPAs and resolves integration issues with TanStack Query or Cloudflare Workers. - [html-visual](https://affpapa.org/en/nevibecode/skills/html-visual.md) — skill · 2ykwang · Claude Code, Codex, Cursor +3 · 475 installs — Generates an interactive single-file HTML visualization: mockup, ERD, flowchart, chart or slides. - [vite](https://affpapa.org/en/nevibecode/skills/pproenca-vite.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 358 installs — A performance optimization guide with 42 Vite rules. - [webnn](https://affpapa.org/en/nevibecode/skills/webnn.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 463 installs — Walks your agent through Web Neural Network API integration in JS or TS: navigator.ml checks, MLContext, graph building, tensors and local fallbacks. - [interaction-design](https://affpapa.org/en/nevibecode/skills/secondsky-interaction-design.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 441 installs — A skill for designing interface feedback: loading states, errors, empty screens, animation timing and accessibility. - [capacitor-app-creation](https://affpapa.org/en/nevibecode/skills/capacitor-app-creation.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 915 installs — A skill that walks the agent through building a Capacitor app from scratch: web scaffold, config, native platforms, and running it. - [reflex-docs](https://affpapa.org/en/nevibecode/skills/reflex-docs.md) — skill · reflex-dev · Claude Code, Codex, Cursor +3 · 696 installs — Pulls the Reflex reference into your agent's context so it writes components, State and event handlers against current docs instead of stale training data. - [scrollytelling-and-parallax-data-visualization](https://affpapa.org/en/nevibecode/skills/scrollytelling-and-parallax-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — Guides the design and implementation of scrollytelling and parallax data visualizations. - [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — Patterns for embedding charts and diagrams into React and Next.js: SSR boundaries, hydration safety, URL-backed state, and isolated rendering layers. - [geospatial-and-cartographic-visualization](https://affpapa.org/en/nevibecode/skills/geospatial-and-cartographic-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — This skill helps plan maps by choosing projections, basemaps, visualization types, and implementation tools. - [d3-data-visualization](https://affpapa.org/en/nevibecode/skills/d3-data-visualization.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 13 installs — This skill builds custom D3 visualizations with SVG or DOM, annotations, bespoke scales, and interaction. - [anthropic-ui-skills](https://affpapa.org/en/nevibecode/skills/anthropic-ui-skills.md) — skill · design-skills · Claude Code, Codex, Cursor +3 · 313 installs — Hands your agent a fixed set of rules for Anthropic-style interfaces: light surfaces, Inter, a 4px grid. - [generative-ui](https://affpapa.org/en/nevibecode/skills/assistant-ui-generative-ui.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 1000 installs — An assistant-ui skill that lets the model assemble a UI from a component vocabulary at runtime instead of filling a layout you wrote. - [webflow-mcp:figma-to-webflow](https://affpapa.org/en/nevibecode/skills/webflow-mcpfigma-to-webflow.md) — skill · webflow · Claude Code, Codex, Cursor +3 · 373 installs — Translates Figma layouts into native Webflow elements and styles using Figma MCP and Webflow MCP. - [internationalization-i18n](https://affpapa.org/en/nevibecode/skills/secondsky-internationalization-i18n.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 433 installs — Sets up multi-language workflows using i18next, gettext, or native Intl APIs. - [minimax-image-understanding](https://affpapa.org/en/nevibecode/skills/minimax-image-understanding.md) — skill · imsus · Claude Code, Codex, Cursor +3 · 556 installs — This skill connects your coding agent to MiniMax vision models via understand_image. - [bun-nextjs](https://affpapa.org/en/nevibecode/skills/bun-nextjs.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 429 installs — Configures Next.js projects to run on the Bun runtime. - [prompt-api](https://affpapa.org/en/nevibecode/skills/prompt-api.md) — skill · webmaxru · Claude Code, Codex, Cursor +3 · 447 installs — Integrates and debugs browser-native Prompt API workflows in JavaScript and TypeScript apps. - [vtex-io-storefront-theme-app](https://affpapa.org/en/nevibecode/skills/vtex-io-storefront-theme-app.md) — skill · vtex · Claude Code, Codex, Cursor +3 · 1000 installs — Assists with structuring VTEX IO storefront theme apps by composing block trees, declaring custom routes, and wiring templates for the merchant Site Editor. - [tdesign-miniprogram](https://affpapa.org/en/nevibecode/skills/tdesign-miniprogram.md) — skill · joneqian · Claude Code, Codex, Cursor +3 · 396 installs — A skill that tells the agent how to build WeChat mini program UIs with Tencent's TDesign library: 60+ components, dark mode, theme customization. - [websocket-implementation](https://affpapa.org/en/nevibecode/skills/secondsky-websocket-implementation.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 425 installs — A skill that has your agent write the WebSocket server and client: rooms, reconnection, Redis scaling. - [tauri](https://affpapa.org/en/nevibecode/skills/full-stack-skills-tauri.md) — skill · full-stack-skills · Claude Code, Codex, Cursor +3 · 530 installs — A routing skill for Tauri v2 development. - [uniwind](https://affpapa.org/en/nevibecode/skills/pproenca-uniwind.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 341 installs — A skill with 45+ rules for Uniwind, the Tailwind bindings for React Native. - [ios-animations](https://affpapa.org/en/nevibecode/skills/ios-animations.md) — skill · pproenca · Claude Code, Codex, Cursor +3 · 340 installs — SwiftUI animation craft guide for Swift 6.2 and Clinic MVVM-C architecture. - [capacitor-react](https://affpapa.org/en/nevibecode/skills/capacitor-react.md) — skill · capawesome-team · Claude Code, Codex, Cursor +3 · 873 installs — Guides coding agents through building mobile apps with Capacitor and React 18+. - [amplify-workflow](https://affpapa.org/en/nevibecode/skills/amplify-workflow.md) — skill · cline · Claude Code, Codex, Cursor +3 · 965 installs — Helps configure full-stack AWS Amplify Gen2 apps using TypeScript code-first definitions. - [alba-inertia](https://affpapa.org/en/nevibecode/skills/alba-inertia.md) — skill · inertia-rails · Claude Code, Codex, Cursor +3 · 376 installs — Configures Alba serializers and Typelizer for Inertia Rails. - [gsap-greensock](https://affpapa.org/en/nevibecode/skills/gsap-greensock.md) — skill · dylantarre · Claude Code, Codex, Cursor +3 · 730 installs — Guides your coding agent in applying Disney's 12 animation principles with GreenSock tweens and timeline sequences. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=58 ## 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