Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

frontend-dev · nexu-io — Claude Code skill: animations and AI media

Skill for building modern frontends with smooth animations, AI-generated content via MiniMax API, and generative art. Works for hero pages and showcase sites.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill frontend-dev -a claude-code
Open on GitHub

What frontend-dev does

frontend-dev builds full-stack frontends with cinematic effects and MiniMax API integration for media generation. The skill includes animation templates, components for displaying AI content, and generative art tools. Needs a MiniMax API key to generate media.

Installs to your platform's skills directory. Once in place, the agent discovers it and can invoke it by name or trigger phrases: "cinematic frontend", "generative web", "hero page", "showcase site". Source code and full docs live in nexu-io/open-design under Apache-2.0.

What it helps with

  • Build a frontend with smooth transitions and cinematic navigation
  • Embed AI-generated images and video on a site
  • Create generative art as a page background or decoration
  • Develop a polished portfolio demo site with effects

Example prompts for the agent

  • Create a hero page with cinematic animations and generative art background
  • Build a showcase site with embedded video generated by MiniMax API
  • Develop a frontend with smooth navigation and AI media for each section

How to install frontend-dev

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill frontend-dev -a claude-code

2Manually: put the files in place

~/.claude/skills/frontend-dev/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/frontend-dev/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Other versions of frontend-dev

frontend-dev MiniMax-AI Orchestrates frontend development, motion design, AI-generated media, and conversion copy. Built for landing pages, marketing sites, and dashboards. Claude Code CX Codex Cursor +1 3,200installs

Similar

expo-data-fetching expo Configures data fetching, caching, and screen states in Expo apps. Guides network calls with expo/fetch and TanStack Query. Claude Code CX Codex Cursor +1 27,200installs playwright-skill lackeyjb Write and run Playwright scripts directly in your IDE. Auto-detects dev servers, takes screenshots, checks responsive layouts, tests login flows, and validates web functionality. Claude Code CX Codex Cursor +1 6,900installs angular-migration Seth Hobson Helps move AngularJS applications to Angular through a full rewrite or staged migration. Use it for hybrid apps, component conversion, and dependency injection changes. Claude Code CX Codex Cursor 10,900installs mcp vercel-labs This skill helps build MCP servers that render interactive json-render UIs in Claude, ChatGPT, Cursor, and VS Code. Claude Code CX Codex Cursor +1 5,800installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs material-ui-styling mui Helps the agent pick the right Material UI styling layer: sx, styled(), theme components, or global CSS. Use it when edits pile up and you need to avoid extra wrapper nesting. Claude Code CX Codex Cursor +1 685installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about frontend-dev

How do I install frontend-dev in Claude Code?

Run npx skills add nexu-io/open-design --skill frontend-dev -a claude-code. The skill installs to ~/.claude/skills/frontend-dev/. The agent will use it automatically after that.

What do I need for media generation to work?

You need a MiniMax API key. Without it, the frontend runs fine but image and video generation won't start.

How do I trigger this skill?

Call the agent by skill name ("frontend-dev") or use one of the trigger phrases: "cinematic frontend", "generative web", "hero page", "showcase site".

Source text

SKILL.md · Apache-2.0 
---
name: frontend-dev
description: |
  Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.
triggers:
  - "frontend dev"
  - "cinematic frontend"
  - "generative web"
  - "hero page"
  - "showcase site"
od:
  mode: prototype
  category: web-artifacts
  upstream: "https://github.com/MiniMax-AI/skills"
---

# frontend-dev

> Curated from the MiniMax AI team.

## What it does

Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.

## Source

- Upstream: https://github.com/MiniMax-AI/skills
- Category: `web-artifacts`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/MiniMax-AI/skills
```

Then ask the agent to invoke this skill by name (`frontend-dev`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor