Back to browse

nexu-io/open-design

od-react-export

Use this plugin when the user wants to hand an accepted Open Design artifact to a React app.

56Collecting
See source evidenceView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/scenarios/od-react-export"
Source profileDesignCatalog only

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Limited to facts supported by the pinned source

What the pinned source establishes about od-react-export

Use this plugin when the user wants to hand an accepted Open Design artifact to a React app.

npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/scenarios/od-react-export"
Check the pinned source

The pinned source contains about 137 English words and 2 usable sections. That evidence supports a source profile, not a complete guide.

137 source words · 2 usable sections

What the source actually contains

2 verifiable source sections for od-react-export

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

01

Workflow

1. Inspect the current artifact and identify the smallest React component boundary that preserves the design. 2. Produce React 18 + TypeScript code with clear props only for content or state that is likely to vary. 3. Prefer Tailwind CSS when the target project already supports…

SKILL.md · Workflow
Inspect the current artifact and identify the smallest React component boundary that preserves the design.Produce React 18 + TypeScript code with clear props only for content or state that is likely to vary.Prefer Tailwind CSS when the target project already supports it; otherwise keep styling local and easy to move.
02

Quality Bar

Do not flatten the artifact into generic divs.

SKILL.md · Quality Bar
Do not flatten the artifact into generic divs.Do not introduce a component library unless the target project already uses it.Keep generated props and variants minimal.

Choose a different workflow

When another Skill is the better fit

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

A separate implementation from vercel-labs/agent-skills; compare its source, maintenance signals, and permission requirements.

Open source detail

figma-create-design-system-rules

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

A separate implementation from openai/skills; compare its source, maintenance signals, and permission requirements.

Open source detail

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.

A separate implementation from JasonColapietro/suede-creator-skills; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

How do I install od-react-export?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/scenarios/od-react-export". Inspect the command and pinned source before running it.

Repository stars
82,073
Repository forks
9,485
Quality
56/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

56/100
Documentation16/30
Specificity13/25
Maintenance15/20
Trust signals12/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

vercel-react-view-transitions by vercel-labs

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

figma-create-design-system-rules by openai

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

suede-code-review by JasonColapietro

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.

gsap-framer-scroll-animation by github

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

shopify-expert by jeffallan

Builds and debugs Shopify themes (.liquid files, theme.json, sections), develops custom Shopify apps (shopify.app.toml, OAuth, webhooks), and implements Storefront API integrations for headless storefronts. Use when building or customizing Shopify themes, creating Hydrogen or custom React storefronts, developing Shopify apps, implementing checkout UI extensions or Shopify Functions, optimizing performance, or integrating third-party services. Invoke for Liquid templating, Storefront API, app dev

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min

Export To React

Use this plugin when the user wants to hand an accepted Open Design artifact to a React app.

Workflow

  1. Inspect the current artifact and identify the smallest React component boundary that preserves the design.
  2. Produce React 18 + TypeScript code with clear props only for content or state that is likely to vary.
  3. Prefer Tailwind CSS when the target project already supports it; otherwise keep styling local and easy to move.
  4. Preserve accessibility semantics from the artifact, including headings, buttons, links, labels, focus states, and alt text.
  5. Finish with file placement notes, required assets, and any assumptions about routing or data.

Quality Bar

  • Do not flatten the artifact into generic divs.
  • Do not introduce a component library unless the target project already uses it.
  • Keep generated props and variants minimal.
Skill path
plugins/_official/scenarios/od-react-export/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected