skills.rest
reopt-ai
reopt-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

opt-ui-install

Install or upgrade @reopt-ai/opt-ui with Tailwind CSS v4 and OptThemeProvider wiring.

1|Updated Apr 17, 2026
Search Tags:#tailwind css#nextjs#upgrade#installation#surface#agent rules#opt-ui
One-click install
npx skills add https://github.com/reopt-ai/reopt-skills --skill opt-ui-install
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: opt-ui-install
Source: https://github.com/reopt-ai/reopt-skills/tree/main/skills/opt-ui-install
Command: npx skills add https://github.com/reopt-ai/reopt-skills --skill opt-ui-install

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the guesswork from installing or upgrading @reopt-ai/opt-ui in a consumer project, including the theme wiring, required provider setup, and version-specific fixes that often cause broken apps.

Core Features & Use Cases

  • Install or upgrade workflows: Handles fresh installs, upgrades, and state-based branching so the right setup path is chosen automatically.
  • Consumer app integration: Configures Tailwind CSS v4, OptThemeProvider, and Surface page templates in the correct app locations.
  • Safety and compatibility checks: Pins agent rules, audits with the design CLI, preserves unrelated npm settings, and routes users to the correct module docs for components, recipes, theming, and migrations.
  • Use case: A developer can use it to bring a Next.js app onto the latest opt-ui version, fix breaking changes, and verify the result without manually hunting through docs.

Quick Start

Ask the assistant to install or upgrade opt-ui in your consumer project and apply the correct setup path for the current state.

Frequently Asked Questions about opt-ui-install

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and configure opt-ui in a Next.js project?▼

To install opt-ui in a Next.js project, you need to configure Tailwind CSS v4, set up OptThemeProvider, and apply the required app-shell wiring. The process handles fresh setup automatically by routing the correct configuration paths.

What is the best way to upgrade opt-ui and fix breaking changes in a consumer app?▼

Upgrading opt-ui safely involves version-specific fixes and state-based branching to choose the right setup path. It preserves unrelated npm settings and uses the design CLI to audit and validate the upgraded configuration.

Do I need Tailwind CSS v4 to use opt-ui components?▼

Yes, Tailwind CSS v4 is a required dependency for using opt-ui components. The setup process configures Tailwind CSS v4 alongside OptThemeProvider to ensure proper styling and theme wiring in consumer apps.

Can I create Surface page templates automatically when setting up opt-ui?▼

Yes, opt-ui setup includes Surface page template creation for consumer apps. The templates are placed in the correct app locations and validated using the opt-cli doctor check to ensure proper routing and structure.

Why is my opt-ui integration failing after a version upgrade?▼

opt-ui integration can fail after a version upgrade due to missing version-specific fixes or incorrect provider setup. Running opt-cli doctor validation and checking the component and migration docs helps identify and resolve these breaking changes.

How does opt-cli doctor validation work when setting up opt-ui?▼

opt-cli doctor validation audits the opt-ui setup to ensure correct configuration and routes users to the proper module docs for components, recipes, theming, and migrations, verifying the overall integration health.

Related Skills

Explore More Software Engineering Skills→
reopt-aireopt-ai
1

opt-editor-install

Install or upgrade @reopt-ai/opt-editor and pin required agent rules.

Official
Advanced
tiantangcao1980-webtiantangcao1980-web
4

material-components-ios

Guide MDC-iOS installation, theming, and migration to SwiftUI in UIKit projects.

Community
Intermediate
iantanwxiantanwx

next-cache-components-optimizer

Optimize Next.js component caching for static shell and navigation performance.

Community
Advanced
bhanford9bhanford9
1

configure-docs

Resolve the documentation directory for the active workspace via workspace-docs.json.

Community
Advanced