skills.rest
fragments-sdk
fragments-sdkOFFICIAL
Explore all skills by this author →
GitHub

fragments/cloud-setup

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
One-click install
npx skills add https://github.com/fragments-sdk/skills --skill fragments-cloud-setup
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dhofheinzdhofheinz
9

Security Scan Skill

Detect exposed secrets and insecure patterns in code repositories.

Community
Intermediate
messebmesseb

dangerfile

Enforces configurable Danger rules and CI environment variables on GitHub pull requests via automated checks.

Community
Intermediate
dkyazzentwatwadkyazzentwatwa
32

visual-regression

Automate visual regression testing setup for React, Vue, and Svelte projects.

Community
Advanced
flutterflutter
2.8k

dart-skills-lint-setup

Configures dart_skills_lint for automated validation of AI agent skill directories.

Official
Intermediate