skills.rest
mfang0126
mfang0126COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Guides React teams to design and implement production-grade UI with Tailwind v4 and shadcn/ui.

Updated Aug 27, 2026
Search Tags:#accessibility#design system#shadcn/ui#frontend design#Tailwind v4#React UI#motion animations
One-click install
npx skills add https://github.com/mfang0126/language-arts --skill frontend-design-mfang0126
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mfang0126/language-arts/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/mfang0126/language-arts --skill frontend-design-mfang0126

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend design is often disjointed across teams, leading to inconsistent interfaces and slowed delivery. This Skill provides a guided approach to building distinctive, production-grade UI components and pages in React projects, leveraging Tailwind v4, shadcn/ui, and motion to enforce cohesive aesthetics.

Core Features & Use Cases

  • Reusable UI primitives (Button, Card, Dialog, Form) designed with accessibility in mind, aligned to a shared design system.
  • Tailwind v4 + shadcn/ui integration: ready-to-use tokens, components, and theming patterns for rapid UI assembly.
  • Motion-enabled interactions: subtle micro-interactions and animations to elevate user experience in Next.js, Vite, Remix apps.
  • Use Case: Build a marketing landing page with a responsive, accessible component library that matches a brand's visual language.

Quick Start

Start by mirroring the design system setup in your project: install Tailwind v4, add shadcn/ui components, and implement a small page that demonstrates a Button, Card, and a modal with motion effects.

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 React UI components with a consistent design system?▼

To build production-grade React UI, standardize components and design tokens using Tailwind v4 and shadcn/ui. This approach enforces cohesive aesthetics through reusable primitives like Button and Card, ensuring visual consistency across Next.js, Vite, and Remix applications.

How do I integrate motion animations into a React component library?▼

Integrate motion animations by adding motion-enabled interactions to your React components. This provides subtle micro-interactions that elevate user experience, applied alongside Tailwind v4 and shadcn/ui within Next.js, Vite, or Remix projects.

Does this frontend design approach support accessibility workflows?▼

Yes, this frontend design approach supports accessibility by designing reusable UI primitives like Button, Card, Dialog, and Form with accessibility in mind. These components are aligned to a shared design system for cohesive visual standards.

What's the best way to set up design tokens for Tailwind v4 and shadcn/ui?▼

The best way to set up design tokens is to mirror the design system setup by installing Tailwind v4, adding shadcn/ui components, and using ready-to-use tokens. This enables rapid UI assembly and theming patterns for your React project.

Can I use shadcn/ui components to build a React marketing landing page?▼

Yes, you can use shadcn/ui components to build a responsive, accessible marketing landing page. This approach matches your brand's visual language using Tailwind v4 tokens and motion-enabled interactions for a cohesive visual system.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
marduk191marduk191
9

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or React and Vue components.

Community
Advanced
GitCoder052023GitCoder052023
1

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui for React projects using CSS-first theming.

Community
Advanced
dige04dige04

ui-design-system

Create scalable UI design systems with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced