How does this skill handle component sharing?

It implements a strict hierarchy where reusable components are placed in packages/ui, while app-specific logic stays within the individual app directory to prevent duplication.

Does it support React Server Components?

Yes, it follows a 'Server Component by default' approach, only adding the 'use client' directive for interactive elements and browser-specific APIs.

What styling framework does this skill prefer?

The skill is optimized for Tailwind CSS, utilizing existing theme tokens, Geist fonts, and CSS variables established in the monorepo.

How is accessibility managed during UI generation?

It enforces semantic HTML elements, proper heading hierarchy, keyboard navigation, visible focus states, and appropriate ARIA labels.

Frontend UI & Design System

Name: Frontend UI & Design System
Author: valuecodes

byvaluecodes

デザインツール

Builds consistent, accessible, and high-performance frontend interfaces using Tailwind CSS and shared component libraries within a monorepo.

概要

This skill empowers Claude to design and implement sophisticated UI/UX patterns following strict monorepo standards. It provides clear guidance on reusing shared components from the @repo/ui package, adhering to Next.js App Router conventions, and maintaining high accessibility standards. By enforcing patterns like mobile-first design, semantic HTML, and the 'Server Component by default' rule, it ensures that generated frontend code is production-ready, performant, and visually consistent across all applications within the workspace.

主な機能

Accessibility-first development with semantic HTML and ARIA attributes
0 GitHub stars
Strategic component distribution between shared packages and app directories
Automated UI/UX consistency checks using Turborepo standards
Tailwind CSS styling using theme tokens and CSS variables
Optimization for Next.js App Router and React Server Components

ユースケース

Building responsive landing pages or feature modules with consistent typography
Auditing and fixing accessibility or mobile responsiveness issues in web apps
Refactoring local components into shared UI libraries with subpath exports

概要

主な機能

Accessibility-first development with semantic HTML and ARIA attributes
0 GitHub stars
Strategic component distribution between shared packages and app directories
Automated UI/UX consistency checks using Turborepo standards
Tailwind CSS styling using theme tokens and CSS variables
Optimization for Next.js App Router and React Server Components

ユースケース

Building responsive landing pages or feature modules with consistent typography
Auditing and fixing accessibility or mobile responsiveness issues in web apps
Refactoring local components into shared UI libraries with subpath exports