skills.rest
stephanofer
stephanoferCOMMUNITY
Explore all skills by this author →
Website𝕏@stephanofer_GitHub

frontend-ui

Standardize React UI component patterns with Tailwind and shadcn/ui conventions.

Updated Aug 23, 2026
Search Tags:#React#frontend#Tailwind#component architecture#UI patterns#shadcn-ui#motion
One-click install
npx skills add https://github.com/stephanofer/finance-trackerv2 --skill frontend-ui-stephanofer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui
Source: https://github.com/stephanofer/finance-trackerv2/tree/main/.opencode/skill/frotend-ui
Command: npx skills add https://github.com/stephanofer/finance-trackerv2 --skill frontend-ui-stephanofer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes frontend UI development patterns for React projects, providing consistent structure, naming conventions, and guidelines to accelerate UI delivery and maintainability.

Core Features & Use Cases

  • Reusable UI component patterns aligned with Tailwind and shadcn/ui conventions
  • Clear project structure guidance for components, hooks, and types
  • Animation guidelines using motion with simple, accessible transitions
  • Use Case: Start a new React project inside src/react-app with a consistent layout and component hierarchy

Quick Start

Apply the frontend-ui patterns when creating new UI components inside src/react-app, following the recommended folders (components/ui, types, hooks, lib) and naming conventions.

Frequently Asked Questions about frontend-ui

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

FAQPage Schema
How do I standardize React component architecture and naming conventions in my project?▼

Standardize React component architecture by enforcing a consistent directory layout for components/ui, types, hooks, and lib. This provides a clear structure and naming conventions to accelerate UI delivery and maintainability.

What is the best way to structure a new React project using Tailwind and shadcn/ui?▼

The best way to structure a new React project with Tailwind and shadcn/ui is to apply pattern-driven guidelines inside src/react-app. This aligns reusable UI components with recommended folders for types and hooks.

How do I add accessible animations to React UI components using motion?▼

Add accessible animations to React UI components using motion by following simple transition guidelines. These patterns ensure animation practices remain consistent and accessible across your project's UI architecture.

Can I use these frontend UI patterns in an existing React application?▼

Yes, you can apply these frontend UI patterns to existing React applications by refactoring components into the recommended components/ui, hooks, and types directories to achieve consistent project structure.

Do I need specific dependencies to follow these React UI architecture guidelines?▼

You need a React environment set up with Tailwind, shadcn/ui, and motion to fully implement these UI architecture guidelines. No additional external dependencies are required to apply the structural patterns.

Related Skills

Explore More Design & Creative Skills→
fab679fab679
9

shadcn

Manage shadcn/ui component lifecycle with project-specific configuration enforcement.

Community
Advanced
dotlab-hqdotlab-hq
1

framer-motion-animator

Animate React UI components with Framer Motion page transitions and gestures.

Official
Intermediate
JosiahSiegelJosiahSiegel
51

react-typescript

Provide TypeScript patterns for React component props, events, hooks, and generics.

Community
Intermediate
kangmominkangmomin
1

component-hd

Generate React component boilerplates from .hyeondong-config.json with tests and Storybook.

Community
Intermediate