skills.rest
SkinnnyJay
SkinnnyJayCOMMUNITY
Explore all skills by this author →
𝕏@gravyskyyGitHub

ui-designer

Generates design briefs, variant concepts, token systems, and interaction specs for web interfaces.

2|Updated Feb 15, 2026
Search Tags:#figma#design tokens#ui design#tailwind#ShadCN#UX audit#interaction spec
One-click install
npx skills add https://github.com/SkinnnyJay/simpill-utils --skill ui-designer-skinnnyjay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/SkinnnyJay/simpill-utils/tree/main/.claude/skills/ui-designer
Command: npx skills add https://github.com/SkinnnyJay/simpill-utils --skill ui-designer-skinnnyjay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing polished web interfaces requires structured thinking across layout, typography, color, motion, and accessibility, which is hard to produce consistently without a senior designer's process. ## Core Features & Use Cases - Concept Variants: Produces three design directions (Safe, Bold, Wildcard) with layout, palette, motion signature, and risk analysis. - Design System Extension: Defines tokens for color, type, spacing, radius, shadow, and motion, mapped to Tailwind and shadcn UI component variants. - UX Audit and Redesign: Delivers prioritized issue lists with before/after fixes and implementation notes for React and Next.js. - Use Case: You are building a new onboarding flow in Next.js with shadcn UI. Use this Skill to get a design brief, three concept variants, an interaction spec with reduced-motion behavior, and a handoff pack engineers can implement directly. ## Quick Start Ask the designer to create three concept variants and a token-based interaction spec for your feature or page.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I create a design system with Tailwind and shadcn UI?▼

Define design tokens for color, typography, spacing, radius, shadow, and motion, then map them to Tailwind utilities and shadcn UI component variants. Include a component state matrix covering default, hover, focus, active, disabled, loading, error, and empty states.

How to run a UX audit on a web application?▼

A UX audit produces a prioritized list of issues ranked by severity and impact, with recommended fixes described as before/after comparisons. Recon via Playwright captures screenshots and traces to build a friction log with reproduction steps.

Does this design approach support reduced motion accessibility?▼

Yes, every motion specification must respect user motion preferences and include explicit reduced-motion behavior. Interaction specs define durations, easing curves, and fallback states for users who prefer reduced animation.

Framer Motion vs GSAP for web animation design?▼

Motion (Framer Motion) is the default for React component animations and layout transitions, while GSAP is used when complex timeline-based or scroll-driven sequences are needed. The choice depends on the interaction complexity and engineering constraints.

What deliverables should a design handoff include for engineers?▼

A buildable handoff includes a component list with variants, a token list, redlines where needed, and implementation notes for React, Next.js, shadcn UI, and Tailwind. It also includes a QA checklist covering pixel, state, motion, keyboard, and responsiveness checks.

Related Skills

Explore More Design & Creative Skills→
cenjiecenjie

i-shape

Plan UX and UI through a structured discovery interview and design brief synthesis.

Community
Intermediate
first-flukefirst-fluke
218

frontend-engineer

Implement Next.js frontend code with shadcn/ui and design-token fidelity.

Official
Intermediate
HMWKRHMWKR

playwright-qa-expert

Automate UI/UX and accessibility testing on web pages with Playwright.

Community
Advanced
Mjlike123Mjlike123

toptop-prototype-studio

Builds hybrid UI prototypes combining stable design kit components, base primitives, and exploratory modules.

Community
Intermediate