fragments/cloud-setup

Name: fragments/cloud-setup
Availability: InStock
Author: Fragments

Install Fragments Cloud governance and generate fragments.config.ts for React projects.

1|Updated Mar 5, 2026

Search Tags:#configuration #cloud integration #design governance #fragments #ci cd #api key setup #ui checks

Ready to run

npx skills add https://github.com/fragments-sdk/skills --skill fragments-cloud-setup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fragments/cloud-setup
Source: https://github.com/fragments-sdk/skills/tree/main/skills/cloud-setup
Command: npx skills add https://github.com/fragments-sdk/skills --skill fragments-cloud-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fragments Cloud governance setup helps teams enforce design consistency by running automated design checks against their UI codebase, without spending hours wiring the tooling by hand.

Core Features & Use Cases

Environment detection and correct install: Detects package manager and framework, then installs the required governance SDK and CLI or skips work for monorepos.
Secure API key configuration: Guides users to add FRAGMENTS_API_KEY to .env/.env.local and ensures secrets are not committed or mishandled.
Cloud-ready governance configuration and validation: Creates fragments.config.ts with framework-appropriate input globs, runs the first --cloud check, and optionally adds CI/CD integration for PR annotations.

Quick Start

Run the skill to set up Fragments Cloud governance for your project with an initial cloud check and an optional CI workflow.

Frequently Asked Questions about fragments/cloud-setup

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

FAQPage Schema

How do I set up design governance checks for my React or Vue project?▼

Design governance setup installs the required SDK and CLI, configures a secure API key in your environment, and generates a framework-specific configuration file to run automated UI checks against your source code.

What is the best way to add automated UI design checks to my CI/CD pipeline?▼

Adding automated UI checks to CI/CD involves generating a configuration file with source input globs, running an initial cloud check, and optionally integrating GitHub Actions or GitLab CI to annotate pull requests with design violations.

Does cloud design governance work with monorepos and different package managers?▼

Cloud design governance supports monorepos by correctly detecting the package manager and framework during installation, ensuring the governance engine is configured appropriately without duplicating setup work across nested project directories.

How do I securely configure an API key for cloud design checks?▼

Secure API key configuration requires adding the key to your .env or .env.local file, ensuring that secrets are safely handled and excluded from version control to prevent accidental exposure during cloud governance checks.

How do I configure file discovery to avoid running design checks on tests and stories?▼

Configuring file discovery involves generating framework-appropriate input and exclude globs in your configuration file, specifically targeting UI source code while actively skipping test files and storybook stories to focus checks.

What frameworks are supported for setting up cloud design governance?▼

Cloud design governance setup applies to React, Next.js, Vue, Nuxt, Svelte, and Astro projects, automatically detecting the active framework to generate the appropriate configuration for running automated UI checks.