nexu-io/open-design/plugins/_official/scenarios/od-nextjs-export/SKILL.md
od-nextjs-export
Use this plugin when the user wants to hand an accepted Open Design artifact to a Next.js App Router project.
- Source repository stars
- 82,073
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-07-28
- Source checked
- 2026-07-28
Decision brief
What it does—and where it fits
Use this plugin when the user wants to hand an accepted Open Design artifact to a Next.js App Router project.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/scenarios/od-nextjs-export"Inspect the Agent Skill "od-nextjs-export" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/plugins/_official/scenarios/od-nextjs-export/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
Workflow
1. Decide whether the result should be a route, layout fragment, or reusable component. 2. Keep components server-first unless interactivity, browser APIs, or client state require 'use client'. 3. Preserve the artifact's visual system while adapting image, link, font, and metada…
Decide whether the result should be a route, layout fragment, or reusable component.Keep components server-first unless interactivity, browser APIs, or client state require 'use client'.Preserve the artifact's visual system while adapting image, link, font, and metadata usage to Next.js conventions. - 02
Quality Bar
Do not mark the whole tree as client-side unless necessary.
Do not mark the whole tree as client-side unless necessary.Do not add framework features unrelated to the artifact handoff.Keep route and component boundaries easy to review.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 65/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 82,073 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | catalog record | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- nexu-io/open-design
- Skill path
- plugins/_official/scenarios/od-nextjs-export/SKILL.md
- Commit
- 89d6d4ef21baf80f871595abdf6f7de6e941dd44
- License
- Apache-2.0
- Collected
- 2026-07-28
- Default branch
- main
View the original SKILL.md
Export To Next.js
Use this plugin when the user wants to hand an accepted Open Design artifact to a Next.js App Router project.
Workflow
- Decide whether the result should be a route, layout fragment, or reusable component.
- Keep components server-first unless interactivity, browser APIs, or client state require
'use client'. - Preserve the artifact's visual system while adapting image, link, font, and metadata usage to Next.js conventions.
- Prefer Tailwind CSS when the target project already supports it; otherwise keep styling local and easy to move.
- Finish with file placement notes, client/server assumptions, assets, and any data requirements.
Quality Bar
- Do not mark the whole tree as client-side unless necessary.
- Do not add framework features unrelated to the artifact handoff.
- Keep route and component boundaries easy to review.
Alternatives
Compare before choosing
vercel-labs/agent-skills
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view
JasonColapietro/suede-creator-skills
suede-code-review
Find the bugs a diff can actually ship: TypeScript, React, Next.js, OWASP, accessibility, SEO, database, and deploy-risk review. Return findings, not a grade.
github/awesome-copilot
gsap-framer-scroll-animation
Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "anim
nexu-io/open-design
export-nextjs-handoff
Use this plugin when the user wants an accepted Open Design artifact converted into a Next.js App Router handoff with clean components, styles, assets, and implementation notes.