# Skills for Frontend and UI Skills for Frontend and UI: what each one does, an install command and example prompts. 2909 cards · page 40 of 73 - HTML: https://affpapa.org/en/nevibecode/skills/topic/frontend?page=40 - Instructions for agents: https://affpapa.org/en/nevibecode/agents.md - [accessibility-scan](https://affpapa.org/en/nevibecode/skills/accessibility-scan.md) — skill · AccessLint · Claude Code, Codex, Cursor +3 · 1000 installs — Scans one live page for mechanically detectable WCAG 2.2 issues and reports their DOM locations. - [stop-describing-ui](https://affpapa.org/en/nevibecode/skills/stop-describing-ui.md) — skill · artouc · Claude Code, Codex, Cursor +3 · 717 installs — A skill that removes explanatory copy from interfaces: headings, empty states, button labels, helper text and onboarding. - [verifying-in-browser](https://affpapa.org/en/nevibecode/skills/verifying-in-browser.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 540 installs — Starts the dev server after code changes, opens the app in a browser and checks rendering, console errors and network health. - [using-ui-stack](https://affpapa.org/en/nevibecode/skills/using-ui-stack.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 539 installs — Makes the agent build interfaces from fixed rules: an 8px grid, 60-30-10 colors, type scale, dark mode and interaction states. - [qt-figma-token-extraction](https://affpapa.org/en/nevibecode/skills/qt-figma-token-extraction.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 439 installs — Reads variables, text styles and tokens out of a Figma file, then writes design-tokens.json and working QML singletons built around one Theme. - [ios-liquid-glass](https://affpapa.org/en/nevibecode/skills/ios-liquid-glass.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 803 installs — An API reference for the Liquid Glass design system in iOS 26+. - [ui-design](https://affpapa.org/en/nevibecode/skills/frappe-ui-design.md) — skill · frappe · Claude Code, Codex, Cursor +3 · 832 installs — A skill that gives the agent design rules for layout, type, color and spacing. - [godot-ui-containers](https://affpapa.org/en/nevibecode/skills/godot-ui-containers.md) — skill · thedivergentai · Claude Code, Codex, Cursor +3 · 507 installs — Provides blueprints and rules for responsive Godot UI using Container nodes. - [qt-figma-component-generation](https://affpapa.org/en/nevibecode/skills/qt-figma-component-generation.md) — skill · qt-ai-skills · Claude Code, Codex, Cursor +3 · 437 installs — Reads Figma components over MCP and writes QML controls for Qt Quick Controls 2. - [pyqt6-ui-development-rules](https://affpapa.org/en/nevibecode/skills/pyqt6-ui-development-rules.md) — skill · oimiragieo · Claude Code, Codex, Cursor +3 · 1100 installs — This skill guides agents working on PyQt6 desktop interfaces, from UI-to-logic wiring to background work and layout. - [expo-react-native-typescript](https://affpapa.org/en/nevibecode/skills/expo-react-native-typescript.md) — skill · Mindrally · Claude Code, Codex, Cursor +3 · 2200 installs — A skill that hands your agent a rulebook for Expo, React Native and TypeScript work: file layout, navigation, state, testing. - [mapbox-style-patterns](https://affpapa.org/en/nevibecode/skills/mapbox-style-patterns.md) — skill · mapbox · Claude Code, Codex, Cursor +3 · 2300 installs — Ready-made Mapbox layer setups for common maps: POI finders, real estate, navigation, delivery. - [hig](https://affpapa.org/en/nevibecode/skills/hig.md) — skill · Prisma-Labs-Dev · Claude Code, Codex, Cursor +3 · 786 installs — A local Markdown reference for Apple Human Interface Guidelines to check touch targets, Dynamic Type, system components, and App Review rules on demand. - [markstream-install](https://affpapa.org/en/nevibecode/skills/markstream-install.md) — skill (official GitHub) · github · GitHub Copilot · 18 installs — Configures Markstream streaming Markdown renderers across React, Vue, Svelte, and Angular projects. - [quasar-skilld](https://affpapa.org/en/nevibecode/skills/quasar-skilld.md) — skill · skilld-dev · Claude Code, Codex, Cursor +3 · 657 installs — A skill for building and debugging Quasar 2.33.1 apps: it reads the docs shipped inside the installed package instead of guessing at the API. - [tailwindcss-animations](https://affpapa.org/en/nevibecode/skills/tailwindcss-animations.md) — skill · JosiahSiegel · Claude Code, Codex, Cursor +3 · 2400 installs — A Tailwind CSS skill covering built-in animation utilities, custom keyframes, transitions, reduced-motion and Framer Motion. - [game-playtest](https://affpapa.org/en/nevibecode/skills/game-playtest.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 62 installs — Guides agents through browser game playtests and frontend QA. - [netlify-config](https://affpapa.org/en/nevibecode/skills/netlify-config.md) — skill · netlify · Claude Code, Codex, Cursor +3 · 3300 installs — Configures Netlify builds and routing through netlify.toml, _redirects, and _headers. - [accessibility-diff](https://affpapa.org/en/nevibecode/skills/accessibility-diff.md) — skill · AccessLint · Claude Code, Codex, Cursor +3 · 947 installs — Diffs WCAG violations on a live page against a baseline taken before your edits. - [sapui5](https://affpapa.org/en/nevibecode/skills/sapui5.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 697 installs — A skill that helps AI agents build SAP UI5 apps: XML views, controllers, data binding, OData, Fiori Elements and tests. - [no-use-effect](https://affpapa.org/en/nevibecode/skills/alejandrobailo-no-use-effect.md) — skill · alejandrobailo · Claude Code, Codex, Cursor +3 · 729 installs — Enforces a zero-useEffect policy across React and React Native components, redirecting logic to derived state, handlers, and dedicated libraries. - [airflow-plugins](https://affpapa.org/en/nevibecode/skills/airflow-plugins.md) — skill · astronomer · Claude Code, Codex, Cursor +3 · 594 installs — This skill walks your agent through building Airflow 3.1+ plugins with FastAPI endpoints, React pages and custom UI tabs. - [ui-design-system](https://affpapa.org/en/nevibecode/skills/samhvw8-ui-design-system.md) — skill · samhvw8 · Claude Code, Codex, Cursor +3 · 3200 installs — A skill for reviewing and building React interfaces with TailwindCSS, Radix UI and shadcn/ui. - [sapui5-linter](https://affpapa.org/en/nevibecode/skills/sapui5-linter.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 685 installs — Use this skill to configure UI5 Linter and inspect SAPUI5 or OpenUI5 projects for code issues. - [ai-assisted-prototyping](https://affpapa.org/en/nevibecode/skills/ai-assisted-prototyping.md) — skill · RefoundAI · Claude Code, Codex, Cursor +3 · 354 installs — Guides product managers in building functional prototypes from text prompts or visual mocks. - [netlify-frameworks](https://affpapa.org/en/nevibecode/skills/netlify-frameworks.md) — skill · netlify · Claude Code, Codex, Cursor +3 · 3200 installs — A skill that feeds your agent the right build settings, SSR adapters and env var rules for deploying web frameworks on Netlify. - [appkit-interop](https://affpapa.org/en/nevibecode/skills/appkit-interop.md) — skill (official OpenAI) · OpenAI · Codex, ChatGPT · 60 installs — Builds narrow bridges between macOS SwiftUI and AppKit. - [design-style-picker](https://affpapa.org/en/nevibecode/skills/design-style-picker.md) — skill · daymade · Claude Code, Codex, Cursor +3 · 342 installs — Generates a batch of visual design directions and lets you choose from images instead of a written brief. - [storybook-story-writing](https://affpapa.org/en/nevibecode/skills/storybook-story-writing.md) — skill · TheBushidoCollective · Claude Code, Codex, Cursor +3 · 673 installs — Writes and edits Storybook stories for your components: CSF3 format, every meaningful state, a build that passes. - [astro-seo](https://affpapa.org/en/nevibecode/skills/astro-seo.md) — skill · jdevalk · Claude Code, Codex, Cursor +3 · 500 installs — Audits SEO settings in Astro projects and can update project files to address findings. - [sap-btp-build-work-zone-advanced](https://affpapa.org/en/nevibecode/skills/sap-btp-build-work-zone-advanced.md) — skill · secondsky · Claude Code, Codex, Cursor +3 · 674 installs — Guides configuration and development for SAP Build Work Zone, advanced edition on SAP BTP. - [frontend-design](https://affpapa.org/en/nevibecode/skills/agent-skills-frontend-design.md) — skill · agent-skills · Claude Code, Codex, Cursor +3 · 2300 installs — Audits existing CSS, pulls out design tokens, and generates palettes, type scales and component templates. - [writing-tests](https://affpapa.org/en/nevibecode/skills/writing-tests.md) — skill · spencerpauly · Claude Code, Codex, Cursor +3 · 499 installs — Inspects existing code, detects your test runner, and drafts unit and integration tests with mocks and edge cases. - [lottie-animation](https://affpapa.org/en/nevibecode/skills/lottie-animation.md) — skill · iart-ai · Claude Code, Codex, Cursor +3 · 2100 installs — Gives your agent the wiring for After Effects vector animation: player setup, frame control, scroll effects and runtime recoloring. - [electron-builder](https://affpapa.org/en/nevibecode/skills/electron-builder.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 392 installs — Guides the agent through configuring Electron app packaging, platform targets, code signing, and auto-updates. - [wireframe-prototyping](https://affpapa.org/en/nevibecode/skills/wireframe-prototyping.md) — skill · aj-geddes · Claude Code, Codex, Cursor +3 · 1400 installs — Sketch a UI and build a prototype before development starts. - [frontend-session-rca](https://affpapa.org/en/nevibecode/skills/frontend-session-rca.md) — skill · grafana · Claude Code, Codex, Cursor +3 · 1100 installs — This skill diagnoses a single real-user session from Grafana Frontend Observability: what happened, which errors fired, in what order, and what to do about them. - [markdown](https://affpapa.org/en/nevibecode/skills/markdown.md) — skill · assistant-ui · Claude Code, Codex, Cursor +3 · 4300 installs — Tells the agent how to wire markdown rendering for assistant messages in assistant-ui: which renderer to use, how to highlight code, and how to add math or diagrams. - [next-best-practices](https://affpapa.org/en/nevibecode/skills/next-best-practices.md) — skill · pedronauck · Claude Code, Codex, Cursor +3 · 383 installs — A skill that hands your agent a set of Next.js rules: file conventions, RSC boundaries, async APIs, metadata, error handling. - [netlify-forms](https://affpapa.org/en/nevibecode/skills/netlify-forms.md) — skill · netlify · Claude Code, Codex, Cursor +3 · 3100 installs — A skill for serverless form handling on Netlify: markup, AJAX submission, spam filtering, notifications. Next: https://affpapa.org/en/nevibecode/skills/topic/frontend.md?page=41 ## 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