Skills
.Work. You
Rest

fragments/ui-setup

Official

Set up Fragments UI with provider and MCP

Software Engineering#theming#react#design system#nextjs#mcp server#provider setup#css import order
Authorfragments-sdk
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill removes the friction of installing and wiring up the Fragments UI design system so components render correctly with theming, tokens, and an optional AI MCP server.

Core Features & Use Cases

  • Environment-aware setup: Detects package manager, framework (React/Next/Vite/Remix), and TypeScript/module resolution needs to avoid broken imports.
  • Correct installation and styling: Installs @fragments-sdk/ui and icon dependencies, and configures the required CSS import order so tokens load properly.
  • Provider wiring + first component: Sets up FragmentsProvider in the right place (including Next.js client component constraints) and creates a sample component to confirm it works.
  • Optional MCP server configuration: Adds the Fragments MCP server into an existing Claude settings file without overwriting other MCP servers.

Quick Start

Run the fragments/ui-setup skill to install @fragments-sdk/ui, add the required CSS import, wrap your app with FragmentsProvider using your chosen theme, and render the included Welcome component.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: fragments/ui-setup
Download link: https://github.com/fragments-sdk/skills/archive/main.zip#fragments-ui-setup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.