skills.rest
sahin
sahinCOMMUNITY
Explore all skills by this author →
Website𝕏@sahinGitHub

designer

Review React/Next.js UI designs and provide actionable layout recommendations.

1|Updated Feb 3, 2026
Search Tags:#react#tailwind#ui-ux#design-system#shadcn-ui#design-review#visual-critique
One-click install
npx skills add https://github.com/sahin/claude-skills --skill designer-sahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/sahin/claude-skills/tree/main/designer
Command: npx skills add https://github.com/sahin/claude-skills --skill designer-sahin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end design reviews and systemization to elevate UI/UX quality across React/Next.js apps using Tailwind and shadcn/ui, reducing design debt and uncertainty.

Core Features & Use Cases

  • UI/UX critique for React/Next.js apps with Tailwind CSS
  • Design system architecture guidance aligned to tokens and components
  • Visual feedback & layout improvements with actionable recommendations

Quick Start

Describe your current UI challenge or paste a component name to begin the design review.

Frequently Asked Questions about designer

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

FAQPage Schema
How do I get a UI/UX design critique for a React component?▼

To get a UI/UX design critique for a React component, describe your layout challenge or paste the component name. The review applies a pragmatic design-system checklist and outputs actionable recommendations using Tailwind CSS and shadcn/ui.

What is a design-system audit for React and Next.js apps?▼

A design-system audit for React and Next.js apps evaluates front-end components to reduce design debt. It provides architecture guidance aligned to design tokens and components, ensuring visual consistency across your product.

Can I use this design review with Tailwind CSS and shadcn/ui?▼

Yes, you can use this design review with Tailwind CSS and shadcn/ui. It is specifically built to evaluate React and Next.js projects using these libraries, delivering visual critiques and layout improvements tailored to them.

How do I improve layout quality in a React design system?▼

You can improve layout quality in a React design system by applying actionable recommendations from a visual critique. This process identifies layout improvements and enforces a pragmatic checklist for components using Tailwind CSS.

What's the best way to systemize front-end components in Next.js?▼

The best way to systemize front-end components in Next.js is through a design-system audit. It provides architecture guidance, enforces a design checklist, and outputs structured recommendations for tokens and components to reduce uncertainty.

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
mgkyawzayyamgkyawzayya
1

ui-ux-design

Audit UI patterns and implement accessible shadcn/ui changes with Tailwind tokens.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
Ibrahim-3dIbrahim-3d
371

eval-ui-ux

Evaluate UI/UX design adherence, visual consistency, and accessibility across tracks.

Community
Advanced