NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
dt-obs-frontends skill A skill that teaches your agent to query Dynatrace Real User Monitoring: Core Web Vitals, sessions, frontend errors and frontend-backend linking in DQL.
CX Codex +1
2,500installs
shadertoy skill Provides GLSL ES conventions and math patterns for writing Shadertoy shaders. Useful when building WebGL visuals, generative art, or ray marching scenes.
CX Codex +1
1,500installs
frontend-design skill The skill makes the agent pick a bold visual direction before writing code, then hold it through every detail. Useful when a generated interface should not look generated.
CX Codex +1
7,300installs
tokens skill Scans a project for design tokens and checks them against a three-layer contract, or proposes a minimal spine when none exist.
CX Codex +1
855installs
superwall-editor skill A skill that lets a terminal agent build and edit Superwall paywalls, onboarding and web2app flows. Useful when the browser editor is open and you would rather stay in the agent.
CX Codex +1
3,600installs
finalize skill Runs your interface through a detector, token audit and a 10-pass finish bar, then returns READY, NOT READY or BLOCKED before you commit.
CX Codex +1
852installs
brief skill Generates or updates a durable design brief in .ui-craft/brief.md. It anchors product goals, user context, principles, and UI scope before code generation starts.
CX Codex +1
851installs
ux-extract skill Walks a reference web app screen by screen, captures every state and builds a UX pattern library your own build can be measured against.
CX Codex +1
664installs
game-ui-frontend
official skill Guides browser game interface design for HUDs, overlays, and menus. Keeps the playfield clear and isolates camera input during UI interactions.
CX Codex GP ChatGPT
98installs
assistant-ui skill Guides AI chat interface development in React: package selection, runtime adapters, and state architecture for assistant-ui.
CX Codex +1
7,200installs
cargo-hosting skill Teaches the agent to scaffold, deploy, and promote static web apps and serverless edge workers via the Cargo CLI. Useful when you need a live URL for a dashboard or webhook endpoint.
CX Codex +1
9,800installs
angular-architecture skill A skill that decides where Angular components go, how files are named, and which style guide rules to follow.
CX Codex +1
320installs
landing-page-conversion-audit
official skill Audits landing pages and checkouts for conversion leaks on paid traffic. It returns an action list ranked by revenue impact.
28installs
no-use-effect skill A skill that stops the agent from writing useEffect in React code and points to five replacements. Useful during refactors and PR review.
CX Codex +1
1,000installs
react-2026 skill Guides stack choices for new and migrating React projects. Covers frameworks, build tools, routing, state managers, and React 19 features.
CX Codex +1
1,900installs
ai-ui-patterns skill A skill that tells your agent how to build React chat interfaces: streaming responses, conversation state, error handling. Useful when you ship a chatbot or assistant.
CX Codex +1
2,000installs
ux-compare skill Reads pattern libraries from ux-extract and builds a comparison document: where apps converge, where they diverge, and what to do in a new build.
CX Codex +1
647installs
r3f-loaders skill Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI.
CX Codex +1
1,800installs
r3f-physics skill Guides an AI coding agent through adding Rapier physics to React Three Fiber. Use it for collision-based movement, sensors, forces, and joints.
CX Codex +1
1,800installs
tanstack-table skill This skill teaches the agent how to build headless tables with TanStack Table v8. It guides setup for sorting and filtering without render loops.
CX Codex +1
5,400installs
webmcpify
official skill webmcpify maps a web app’s actions to WebMCP tools, then checks them in a browser. Use it when you want an AI agent to interact with your app through structured calls.
27installs
checklist-design skill Audits websites, web apps, and mobile interfaces against Checklist Design checklists. It flags missing UI elements and critiques hierarchy, layout, typography, and accessibility.
CX Codex +1
1,100installs
flutter-adaptive-ui skill This skill guides agents through building adaptive Flutter interfaces for mobile and desktop screens. It bases layout changes on width constraints rather than OS checks.
CX Codex +1
2,000installs
frontend-design skill A skill that locks a frontend to one visual direction — palette, type, structure and texture — and keeps on-screen copy honest.
CX Codex +1
580installs
maplibre-tile-sources skill Works out whether a dataset should load as GeoJSON straight from a file or as vector and raster tiles. Use it when starting a MapLibre GL JS map.
CX Codex +1
982installs
nuqs skill A skill with 39 nuqs rules covering typed parsers, adapters, Server Components and URL update performance. Useful when an agent writes or refactors URL state code.
CX Codex +1
2,300installs
integration-privy skill A skill that wires Privy authentication into a Solana Expo Android app on top of Mobile Wallet Adapter, using Sign-In-With-Solana.
CX Codex +1
11,600installs
solana-mobile-wallet skill Add wallet connection and transaction signing to a React Native Expo app with Mobile Wallet Adapter. Useful for wallet UI, Solana sign-in, and sending SOL.
CX Codex +1
11,600installs
nextjs-cache-architecture skill Structures caching architecture in Next.js 16+ App Router projects. It sets up the "use cache" directive, a typed tag registry, and Suspense boundaries.
CX Codex +1
5,000installs
mies skill A design skill that pushes your coding agent to cut what does not earn its place and polish what stays. Useful when you build or rework any user-facing surface.
CX Codex +1
9,600installs
r3f-best-practices skill A skill with 70+ rules for writing, reviewing, and optimizing React Three Fiber code. It prevents costly re-renders and organizes work with the Poimandres stack.
CX Codex +1
1,500installs
apple-hig-designer skill Generates native iOS interfaces for iPhone, iPad, and Apple Watch following Apple Human Interface Guidelines. It formats SwiftUI components and validates accessibility.
CX Codex +1
1,000installs
email-html-mjml skill Builds responsive email templates in MJML 5.x and compiles them to HTML that holds up in Outlook and Gmail. Useful for welcome mails, newsletters or transactional templates.
CX Codex +1
947installs
design-better skill A skill that pushes any coding agent toward designer-quality frontend work: hierarchy, states, accessibility, motion. Useful when the UI runs fine but still looks unfinished.
CX Codex +1
1,100installs
qt-qml-test skill Generates Qt Quick Test suites for QML components. Saves ready test files to verify component properties and signal emissions in Qt 6.
CX Codex +1
597installs
design-system skill Builds or audits a design system: tokens, component library, naming conventions, contribution model and docs. Useful when products drift apart visually.
CX Codex +1
311installs
scrape-webpage skill This skill collects webpage content, metadata, and images, then saves a cleaned HTML file and analysis outputs. It runs as part of a page-import flow for AEM Edge Delivery Services.
CX Codex +1
1,800installs
extension-camera skill Adds instructions for integrating a React useCamera hook into web apps. Useful for live camera previews and photo capture.
CX Codex +1
28,100installs
extension-qr-code skill Adds QR code scanning through the device camera to a React app. Useful when you need to read a code right in the browser.
CX Codex +1
28,200installs
react-vite-best-practices skill A skill with 23 rules for optimizing React apps built with Vite: build config, code splitting, HMR, assets, env variables and bundle analysis. Useful when an agent writes or reviews components.
CX Codex +1
2,900installs
1,401–1,440 of 2,909
