Skills
.Work. You
Rest

fragments/ui

Official

Build accessible UI with Fragments best practices

Design & Creative#theming#accessibility#design tokens#component discovery#mcp tools#ui composition#fragments ui
Authorfragments-sdk
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps you avoid building inconsistent, inaccessible, or hard-to-maintain UI by guiding you to use the Fragments design system, tokens, and components correctly.

Core Features & Use Cases

  • Component selection & discovery: Finds the right @fragments-sdk/ui component or block for the job using MCP discovery and inspection.
  • Token-first implementation: Recommends using --fui-* design tokens for colors, spacing, typography, and radii instead of hardcoded values.
  • Accessibility and composition guidance: Promotes accessibility-safe patterns and correct compound-component usage rules for React/Next.js.
  • Practical workflows: Covers common UI needs like forms, data display, icons, performance checks, and common mistakes to avoid.

Quick Start

Ask your agent to show you the best matching Fragments UI component (or block) for your use case and provide the token-based, accessible implementation plan.

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
Download link: https://github.com/fragments-sdk/skills/archive/main.zip#fragments-ui

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.