skills.rest
deloreyj
deloreyjCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Provide frontend UI patterns and components for React apps using Tailwind CSS v4 and shadcn/ui with Motion animations.

Updated Jan 18, 2026
Search Tags:#accessibility#frontend#react#tailwind#ui-design#shadcn-ui#motion
One-click install
npx skills add https://github.com/deloreyj/.dotfiles --skill frontend-design-deloreyj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/deloreyj/.dotfiles/tree/main/home/.config/opencode/skill/frontend-design
Command: npx skills add https://github.com/deloreyj/.dotfiles --skill frontend-design-deloreyj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend teams often struggle to ship consistent, production-grade interfaces across React-based apps; this guide provides ready-made patterns, design tokens, and best practices to unify appearances and interactions.

Core Features & Use Cases

  • Tailwind CSS v4-based styling with design tokens and container utilities to accelerate styling.
  • Shadcn/ui components integration for accessible, production-ready UI primitives.
  • Motion animations for refined micro-interactions and layout transitions.
  • Bold, distinctive visuals to avoid generic AI aesthetics in modern interfaces.
  • Use Case: Quickly scaffold Next.js, Vite, or Remix projects with a cohesive design system.

Quick Start

Create a production-grade frontend UI using React, Tailwind v4, and shadcn/ui components.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend UI with React and Tailwind v4?▼

Build production-grade frontend UI by applying ready-made React patterns, Tailwind v4 design tokens, and shadcn/ui primitives to ensure accessibility, dark mode, and cohesive visual consistency across Next.js, Vite, or Remix projects.

What's the best way to add Motion animations to shadcn/ui components?▼

Add Motion animations to shadcn/ui components by applying provided micro-interaction and layout transition patterns, ensuring refined visual feedback while maintaining the accessibility and dark mode support of the underlying UI primitives.

Can I use these UI patterns with my existing Vite or Remix projects?▼

Yes, you can use these UI patterns with Vite or Remix projects, as the guide specifically provides React-based components and styling tokens designed to unify appearances across Next.js, Vite, and Remix environments.

Do I need design tokens to implement dark mode in Tailwind v4?▼

Yes, leveraging design tokens is required to implement dark mode in Tailwind v4, as the provided production-grade patterns rely on token usage to properly manage theme switching and satisfy accessibility best practices.

Why does my React UI design look generic and how can I fix it?▼

React UI design looks generic when using default styling; fix it by applying the bold, distinctive visual philosophy and Motion animations provided, which are specifically structured to avoid generic AI aesthetics in modern interfaces.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
nawab69nawab69

frontend-design

Generate frontend interfaces with HTML/CSS/JS, React, or Vue from user requirements.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
wilfriedagowilfriedago
2

heroui-native

Provide native React Native UI components with Uniwind Tailwind CSS integration.

Community
Intermediate