NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
vscode-ext-localization
official skill Use it to localize user-facing text in VS Code extensions. It fits when you add translations or update existing ones.
8,900installs
figma-generate-library
official skill A skill to sync your Figma design system with your codebase. Build or update variables, components, themes, and documentation in the right order—phases matter, and skipping steps breaks the system.
CX Codex +1
2,700installs
figma-code-connect-components
official skill Maps published Figma design components to codebase implementations using Figma Code Connect. It inspects component properties and pairs them with repository files.
CX Codex +1
2,700installs
power-apps-code-app-scaffold
official skill Scaffolds a Power Apps Code App using React and TypeScript. Use it to start a project with a Power Platform connector.
8,700installs
mcp-create-adaptive-cards
official skill Adds Adaptive Card response templates to MCP API plugins for visual data display in Microsoft 365 Copilot. Use it when an API response should render as a card.
8,700installs
pnpm skill Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides.
CX Codex +1
22,400installs
interface-review skill Audits pull requests, branches, and uncommitted edits for layout, UI, accessibility, and typography regressions. Keeps focus on what changed rather than pre-existing debt.
CX Codex +1
18,500installs
react-vite-dashboard
official skill This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query.
CX Codex +1
5,500installs
flutter-apply-architecture-best-practices skill This skill structures Flutter apps around UI, Logic, and Data layers. Use it when starting a project or refactoring code for scale.
CX Codex +1
43,200installs
responsive-design skill Guides responsive UI work with mobile-first styles, container queries, and fluid values. Use it when pages or components need to adapt to available space.
CX Codex
20,956installs
ui-ux-pro-max skill A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests.
CX Codex +1
5,400installs
flutter-build-responsive-layout skill This skill guides coding agents to build adaptive Flutter UIs across mobile and desktop screens using LayoutBuilder and BoxConstraints.
CX Codex +1
42,500installs
scroll-world skill This skill builds a landing page where scrolling drives a camera that dives into each scene and moves to the next with no cuts.
CX Codex +1
4,800installs
baoyu-electron-extract skill Extracts resources and JavaScript from an installed Electron app, restoring source files from source maps when available. Use it to inspect an app.asar bundle or trace how a desktop app is built.
CX Codex +1
7,800installs
firebase-hosting-basics skill Deploys static sites and SPAs to Firebase Hosting CDN with SSL, preview channels, and custom domains.
CX Codex +1
170,300installs
opentui skill Gives your agent OpenTUI reference documentation: Core, React and Solid bindings, components, application APIs, testing and deployment.
CX Codex +1
3,800installs
flutter-fix-layout-issues skill Reads a Flutter layout exception and tells you what to wrap in what: overflow stripes, unbounded constraints, misplaced ParentData widgets.
CX Codex +1
39,900installs
pinia skill Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps.
CX Codex +1
19,700installs
flutter-add-widget-test skill A skill that teaches AI coders to write component-level Flutter tests using WidgetTester. Verifies how widgets render and respond to taps, scrolling, and text input.
CX Codex +1
39,200installs
nextjs-on-cloudflare skill Skill for deploying Next.js apps to Cloudflare Workers via vinext. Use for new projects, migrating existing apps, or choosing between vinext and OpenNext.
CX Codex +1
42,800installs
vue-debug-guides skill Skill for diagnosing Vue 3 errors: reactivity, watchers, components, templates, and hydration. When the agent sees a Vue bug, it looks up the cause in a catalog of common issues.
CX Codex +1
26,700installs
frontend-design skill Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards.
CX Codex +1
4,800installs
flutter-setup-declarative-routing skill Sets up Flutter routing with go_router, including URL-based screens, nested navigation, and deep links for web and mobile apps.
CX Codex +1
37,800installs
flutter-add-widget-preview skill Configures interactive Flutter widget previews with package:flutter/widget_previews.dart. Useful for testing UI components in isolation without launching the whole app.
CX Codex +1
36,800installs
flutter-setup-localization skill This skill automates initialization of multi-language support in Flutter projects. It adds dependencies, enables code generation, and creates a configuration file for .arb-based translations.
CX Codex +1
36,800installs
understand-figma skill Analyzes a Figma file via the Figma REST API and generates an interactive design knowledge graph with components, screens, and tokens for the dashboard.
CX Codex +1
1,800installs
transitions-polish skill This skill audits existing animations and maps timing, distance, scale, blur, and easing to motion tokens. Use it when motion feels off.
CX Codex +1
10,800installs
guizang-social-card-skill skill Builds carousel images and covers for Xiaohongshu, WeChat, and articles from text, screenshots, or video using Swiss design and magazine layouts.
CX Codex +1
5,200installs
variant skill This skill builds distinct versions of one UI component and puts them on the page where it will live. Use it to compare design directions before choosing one.
CX Codex +1
14,600installs
explain-interface skill Explains how a visual effect, animation, or website layout was built from a live page or a screenshot. It breaks down the underlying layer stack.
CX Codex +1
14,100installs
codegen skill Utilities for generating code from json-render UI trees. Build custom code exporters for Next.js, Remix, and other frameworks, traverse specs, and serialize props.
CX Codex +1
8,900installs
design-handoff
official skill Turns a Figma file or a written design description into a developer handoff spec: measurements, tokens, states, breakpoints, edge cases.
CX Codex +1
3,500installs
interaction-design skill This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns.
CX Codex
16,146installs
break skill Renders one component across reachable scenarios and marks visible breaks. Useful for checking worst-case content on a temporary page.
CX Codex +1
13,700installs
design-system-patterns skill Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project.
CX Codex
15,953installs
next skill Converts JSON specs into Next.js apps with routes, layouts, SSR, and metadata. Handy when building AI-generated multi-page apps with @json-render/next.
CX Codex +1
8,600installs
unocss skill A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it.
CX Codex +1
16,100installs
react-best-practices skill 27 React performance and quality rules, priority-ordered: from eliminating request waterfalls to strict typing.
CX Codex +1
2,800installs
react-native-design skill This skill guides React Native styling, navigation, and Reanimated animations. Use it when building cross-platform mobile apps or platform-specific screens.
CX Codex
15,522installs
angular-developer skill Generates Angular code and gives architecture guidance for components, services, forms, routing, and HTTP. Useful when starting or changing an Angular project.
CX Codex +1
46,200installs
201–240 of 2,909
