skills.rest
remimoul
remimoulCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-ux-engineer

Design and develop React interfaces with TypeScript and Tailwind CSS.

Updated Feb 18, 2026
Search Tags:#design#ui#frontend#react#styling#animation#ux
One-click install
npx skills add https://github.com/remimoul/social-mds --skill frontend-ui-ux-engineer-remimoul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux-engineer
Source: https://github.com/remimoul/social-mds/tree/main/.agents/skills/frontend-ui-ux-engineer
Command: npx skills add https://github.com/remimoul/social-mds --skill frontend-ui-ux-engineer-remimoul

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill transforms functional UI components into visually stunning, user-centric interfaces, even when design mockups are unavailable.

Core Features & Use Cases

  • Visual Enhancement: Elevates plain components with creative design thinking, advanced styling, and micro-interactions.
  • Design Without Mockups: Creates beautiful UI/UX by applying aesthetic principles directly to code.
  • Use Case: You have a basic React component for a product card. Use this Skill to add delightful hover effects, a sale badge animation, and ensure a premium look and feel.

Quick Start

Enhance the provided React product card component to be visually stunning with micro-interactions.

Frequently Asked Questions about frontend-ui-ux-engineer

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

FAQPage Schema
How do I design a React user interface without mockups?▼

You can design React user interfaces without mockups by applying aesthetic principles, advanced styling, and micro-interactions directly to your code using Tailwind CSS and TypeScript for a polished look and feel.

What is the best way to add micro-interactions to plain React components?▼

The best way to add micro-interactions to plain React components is by applying creative styling and animation techniques directly within Tailwind CSS to elevate the visual aesthetics and user experience.

Can I use Tailwind CSS to improve user experience without explicit design files?▼

Yes, you can use Tailwind CSS to improve user experience without design files by leveraging advanced styling and accessibility best practices to transform functional UI components into visually appealing interfaces.

How do I ensure accessibility when creating custom UI animations in TypeScript?▼

To ensure accessibility with custom UI animations in TypeScript, apply accessibility best practices alongside your styling choices to maintain engaging user experiences without compromising component usability.

Related Skills

Explore More Design & Creative Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
Selfdb-ioSelfdb-io

frontend-design

Generate production-grade frontend interfaces with CSS variables and design tokens.

Community
Basic
mattwoodcomattwoodco
3

ai-generative-ui

Render AI tool outputs as interactive React components in chat streams.

Community
Intermediate
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic