How does it handle shared components?

The skill prioritizes moving reusable UI elements to a centralized package within the Turborepo and ensures they are imported via subpath exports to prevent unnecessary code bloat.

What styling framework does this skill use?

It relies on Tailwind CSS utilities and existing design tokens to maintain visual consistency across all applications without creating ad-hoc CSS styles.

Does it support Next.js App Router?

Yes, it is specifically designed for App Router conventions, emphasizing Server Components by default and isolating Client Components to the smallest possible subtree.

What is the frontend-ui skill?

It is a specialized capability for Claude Code that provides domain-specific guidelines and implementation patterns for building consistent, accessible, and performant user interfaces within a monorepo.

Frontend UI & UX Design

Name: Frontend UI & UX Design
Author: valuecodes

byvaluecodes

0•

デザインツール

Standardizes the implementation of accessible, high-performance user interfaces using Tailwind CSS and shared component libraries within a Turborepo environment.

The frontend-ui skill provides comprehensive guidance for designing and building consistent UI/UX patterns across multiple applications in a Turborepo workspace. It enforces best practices for Next.js App Router development, including the strategic use of Server and Client Components, accessibility compliance, and mobile-first responsiveness. By leveraging shared UI packages and strict subpath exports, it ensures code reusability while maintaining a lightweight and performant frontend architecture tailored for agent-assisted development.

主な機能

01Standardizes Tailwind CSS utility usage and design system theme tokens

02Ensures WCAG accessibility compliance with semantic HTML and ARIA labels

03Manages shared component lifecycles between global packages and local apps

040 GitHub stars

05Enforces consistent UI/UX patterns across Turborepo applications

06Optimizes Next.js App Router layouts and server-first component architecture

ユースケース

01Building responsive, accessible landing pages and dashboards in a monorepo

02Implementing complex navigation and layout structures using Next.js conventions

03Refactoring app-specific components into a shared design system package

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add valuecodes/turborepo-agents frontend-ui

For use in Claude.ai and ChatGPT

Download Skill