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

0•

デザインツール

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.

主な機能

01Accessibility-first development with semantic HTML and ARIA attributes

020 GitHub stars

03Strategic component distribution between shared packages and app directories

04Automated UI/UX consistency checks using Turborepo standards

05Tailwind CSS styling using theme tokens and CSS variables

06Optimization for Next.js App Router and React Server Components

ユースケース

01Building responsive landing pages or feature modules with consistent typography

02Auditing and fixing accessibility or mobile responsiveness issues in web apps

03Refactoring local components into shared UI libraries with subpath exports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add valuecodes/agentic-monorepo-starter frontend-ui

For use in Claude.ai and ChatGPT

Download Skill