NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
flutter-dev skill A Flutter development guide for widget patterns, Riverpod, Bloc, and GoRouter. Use it when building layouts, navigation, tests, or reviewing performance.
CX Codex +1
2,000installs
uniwind skill A skill that hands the agent Uniwind's rules and reference files, so it builds and debugs Tailwind CSS v4 interfaces in React Native instead of guessing APIs.
CX Codex +1
4,500installs
chat-motion-overlay skill Builds animated chat scenes from text or screenshots, then prepares them for Remotion rendering. Use it for message bubbles, app-style chat views, and transparent overlays.
CX Codex +1
829installs
react19-test-patterns
official skill A migration reference for updating test files to work with React 19. Use it when replacing removed test utilities or revising StrictMode call-count assertions.
1,200installs
remotion skill A skill that turns JSON timeline specs into ready-made video compositions via Remotion. Use it when you need to generate videos programmatically or assemble video clip catalogs from data.
CX Codex +1
1,700installs
design-taste-frontend skill Skill for landing pages, portfolios and redesigns. The agent reads the brief, picks a design system and ships interfaces without AI templates.
CX Codex +1
808installs
audio-and-sound skill Adds audio loading, background music, volume controls, and spatial audio to Phaser 4 games using SoundManager and the Web Audio API.
CX Codex +1
944installs
write-unit-tests skill A skill that guides writing unit and integration tests in the tldraw repo: where test files belong, how to drive TestEditor, and which Vitest traps to avoid.
CX Codex +1
498installs
react-native-dev skill A React Native and Expo reference set for your agent: routing, lists, animation, state, tests and shipping. Useful when you are building a mobile app and don't want to re-explain the basics.
CX Codex +1
1,900installs
resource-curator skill Audits, discovers, and organizes external learning resources for JavaScript concept documentation. It weeds out broken links and obsolete syntax.
CX Codex +1
320installs
landing-page-design skill A skill that walks the agent through a landing page: intake questions and page structure first, then fixed rules for type, spacing and backgrounds.
CX Codex +1
1,800installs
kumo-design skill Cloudflare product design rules for coding agents: guides layout, typography, dialogs, and animations in Kumo UI dashboards.
CX Codex +1
1,500installs
tweens skill Teaches coding agents how to animate properties in Phaser 4 using TweenManager, tween chains, stagger offsets, and number counters.
CX Codex +1
899installs
visual-verdict skill A visual QA skill that compares generated UI screenshots against reference images and returns a structured JSON verdict for layout iterations.
CX Codex +1
901installs
react19-concurrent-patterns
official skill Preserves React 18 concurrent patterns during React 19 migrations and guides the adoption of use(), useOptimistic, and Actions.
1,100installs
frontend-developer skill Guides an agent through React and Next.js interface work, from responsive components to client-side state and accessibility. Use it when building pages or fixing UI issues.
CX Codex +1
1,300installs
radix-ui-design-system skill Builds accessible design systems and headless UI components with Radix UI primitives. Useful for custom component libraries and WCAG 2.1 compliance.
CX Codex +1
1,300installs
refero-design skill A research-led skill for UI and product design that grounds work in references before code. Use it for landing pages, product screens, redesigns, and visual polish.
CX Codex +1
12,000installs
preline-theme-generator skill Generates custom Preline UI theme CSS from brand colors or mood descriptions. Runs entirely through local scripts after install.
CX Codex +1
1,300installs
visual-edit-precision skill Skill for targeted UI changes when you show elements on a screenshot or point them out in code. Edits only what you selected, without refactoring the entire component.
CX Codex
2,800installs
image skill Turns JSON specs into SVG and PNG images via Satori. Useful for generating OG images, social cards, and rendering AI-generated image specs.
CX Codex +1
1,500installs
write-example skill Guides coding agents through creating SDK examples for tldraw, enforcing folder naming, frontmatter fields, and React component conventions.
CX Codex +1
445installs
huggingface-gradio skill This skill helps you build and modify Python Gradio interfaces for machine learning demos. It provides patterns for layouts, UI components, and chatbot workflows.
CX Codex +1
2,300installs
zustand-5 skill Zustand 5 state management patterns for Claude Code: basic stores, selectors, persist middleware, and slice composition. Prevents unnecessary re-renders and keeps state logic clean.
CX Codex +1
911installs
text-and-bitmaptext skill Helps AI agents configure and render text in Phaser 4. Useful when styling Canvas text, handling word wrapping, and setting up bitmap fonts.
CX Codex +1
823installs
write-e2e-tests skill Guides Playwright E2E testing for tldraw, including UI actions, menus, and canvas shapes. Use it when adding coverage for SDK examples or the tldraw.com client.
CX Codex +1
430installs
game-object-components skill Reference guide for Phaser 4 game object components and mixins. Helps coding agents handle Transform, Depth, and WebGL effects accurately.
CX Codex +1
800installs
control-ui skill Inspects and tests local web, IDE, or Electron interfaces via browser automation and CDP. Captures screenshots, traces, and verifies UI changes without extra dependencies.
CX Codex +1
2,400installs
time-and-timers skill Guides AI agents on configuring Clock, TimerEvent delays, loops, and Timelines in Phaser 4. Useful when scripting game loops.
CX Codex +1
792installs
react-email skill Turns JSON email specs into HTML or plain-text output with React Email. Use it for email catalogs, generated specs, and transactional message templates.
CX Codex +1
1,400installs
vue skill A skill to convert JSON specifications into Vue 3 components with data binding, visibility conditions, and action handling. Use it if you generate interfaces via AI or build UIs from JSON.
CX Codex +1
1,400installs
image-to-ui skill Turn a screenshot, mockup, or sketch into working interface code. The skill views the image, reproduces it exactly in code, then renders and compares to fix any mismatches.
CX Codex +1
63,500installs
userinterface-wiki skill Handbook of 152 UI/UX rules for web interfaces. Skill checks animations, typography, audio feedback and UX patterns, reports errors with file:line precision.
CX Codex +1
4,500installs
adaptive skill Guides the agent in adapting Android Compose UI for foldables, tablets, desktop, and phones. Helpful when supporting multiple screen sizes and input devices.
CX Codex +1
2,400installs
filters-and-postfx skill Applies visual filters and post-processing in Phaser 4. Helps configure blur, glow effects, and shader masks.
CX Codex +1
777installs
react19-source-patterns
official skill A reference for moving React source files to React 19, covering API changes, refs, context, and props. Useful during an existing project upgrade.
967installs
anti-ui-slop
official skill This skill helps coding agents build product-specific interfaces instead of generic UI. Use it for web or iOS design, redesign, critique, and pre-ship review.
967installs
kill-ai-slop skill Finds and removes the generic visual and copy tics that make a site look machine-generated. Use it when a landing page or UI feels templated and needs a human touch.
CX Codex +1
3,200installs
render-textures skill Explains off-screen rendering in Phaser 4, covering RenderTexture game objects, DynamicTexture assets, Stamp helpers, and command buffers.
CX Codex +1
773installs
physics-matter skill Helps AI agents configure Matter.js physics in Phaser 4, including rigid bodies, composite shapes, constraints, and mouse dragging.
CX Codex +1
758installs
481–520 of 2,909
