skills.rest
putto11262002
putto11262002COMMUNITY
Explore all skills by this author →
GitHub

ui-skill

Codify UI implementation conventions for React 18+, Next.js 16+, and Tailwind CSS projects.

Updated Nov 4, 2025
Search Tags:#design#ui#react#components#tailwind#shadcn#framer-motion
One-click install
npx skills add https://github.com/putto11262002/jimmodel --skill ui-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-skill
Source: https://github.com/putto11262002/jimmodel/tree/main/.claude/skills/ui
Command: npx skills add https://github.com/putto11262002/jimmodel --skill ui-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides UI implementation best practices and conventions to help you build clean, reusable user interfaces faster, reducing design debt and time-to-delivery.

Core Features & Use Cases

  • Planning & Reuse: Analyze the codebase to identify components and patterns that can be reused.
  • Implementation Guidance: Leverage modern UI tech (React 18+, Next.js 16+, Tailwind CSS, Shadcn UI, Framer Motion, Lucide Icons) to deliver consistent interfaces.
  • Use Case: Establish a design system for a new feature module and implement it with 2-3 reusable components.

Quick Start

Start by planning a UI module, then implement and assemble components following the project’s Page, Layout and Component Structure guidelines.

Frequently Asked Questions about ui-skill

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

FAQPage Schema
How do I build consistent React components with Tailwind CSS and Shadcn UI?▼

Build consistent React components by following planning, installation, and usage workflows for Shadcn UI and Tailwind CSS. This Skill codifies best practices for component selection, token-based styling with shadcn variables, and strict separation of concerns to reduce design debt and accelerate delivery.

When should I use 'use client' in Next.js 16+ server components?▼

Use 'use client' only when interactivity is needed. This Skill guides client versus server component decisions for Next.js 16+, ensuring default server components and selective client-side behavior that maintain performance and architectural clarity.

How do I plan and identify reusable UI patterns in an existing codebase?▼

Analyze your codebase to identify components and patterns that can be reused across modules. This Skill provides structured planning methods to establish design systems and extract 2-3 reusable components, reducing duplication and design debt.

What's the best way to structure React pages and layouts in Next.js projects?▼

Follow Page, Layout, and Component Structure guidelines for Next.js 16+ projects. This Skill enforces workflow-driven development with clear separation of concerns, ensuring maintainable architecture for React 18+ applications.

Can I use Framer Motion animations with Shadcn UI components?▼

Yes. This Skill integrates Framer Motion, Shadcn UI, and Lucide Icons within a unified workflow for React 18+ and Next.js 16+, guiding component selection and animation implementation while maintaining design system consistency.

Why does inconsistent component usage slow down feature delivery?▼

Inconsistent UI implementation creates design debt, increases refactoring time, and slows feature delivery. This Skill codifies conventions and best practices for React, Next.js, Tailwind, and Shadcn to ensure faster, cleaner development.

Related Skills

Explore More Design & Creative Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
JaivishChauhanJaivishChauhan
6

frontend-ui

Compose React UIs with Tailwind CSS and Framer Motion.

Community
Intermediate
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced