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

fragments/ui

Select Fragments UI components and design tokens for accessible interfaces.

1|Updated Mar 5, 2026
Search Tags:#theming#accessibility#design tokens#component discovery#mcp tools#ui composition#fragments ui
One-click install
npx skills add https://github.com/fragments-sdk/skills --skill fragments-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fragments/ui
Source: https://github.com/fragments-sdk/skills/tree/main/skills/ui
Command: npx skills add https://github.com/fragments-sdk/skills --skill fragments-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about fragments/ui

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

FAQPage Schema
How do I build accessible UI components using design tokens instead of hardcoded values?▼

Build accessible UI by applying `--fui-*` design tokens for colors, spacing, typography, and radii instead of hardcoded values. This ensures visual consistency and accessibility compliance across your application interfaces.

What is the best way to discover and select UI components for a React or Next.js project?▼

Use MCP-based discovery and inspect workflows to find the correct `@fragments-sdk/ui` component or block for your use case. This ensures proper UI composition and performance-aware integration in React and Next.js applications.

How do I manage compound-component rules for client versus server component contexts?▼

Adhere to YAML-guided compound-component rules to manage client versus server component contexts correctly. This ensures proper React and Next.js integration when composing complex accessible interfaces.

Does the Fragments UI design system support accessibility compliance and performance checks?▼

Yes, the system enforces accessibility compliance and performance-aware integration through accessibility-safe patterns and MCP workflows. This guides you to build optimized, compliant interfaces during component composition.

Why should I use design tokens for theming instead of custom CSS variables?▼

Use `--fui-*` design tokens for theming to maintain visual consistency and avoid hard-to-maintain custom CSS variables. Tokens provide a standardized foundation for colors, spacing, typography, and radii across your project.

What are common mistakes to avoid when implementing forms and data display blocks?▼

Common mistakes include using hardcoded values instead of `--fui-*` tokens and ignoring compound-component rules for client/server contexts. Avoid these by following YAML-guided workflows for token selection and accessibility-safe composition.

Related Skills

Explore More Design & Creative Skills→
MercurykzMercurykz

figma

Extract Figma design data via MCP and generate code from nodes.

Community
Intermediate
stephschofieldstephschofield

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report findings in file:line format.

Community
Intermediate
involvexinvolvex
1

react-patterns

Provide reusable React patterns for component composition, hooks, and state management.

Community
Advanced
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced