skills.rest
doleval013
doleval013COMMUNITY
Explore all skills by this author →
GitHub

new-component

Generate standardized React component scaffolds with PascalCase naming and Tailwind styling.

Updated Dec 5, 2025
Search Tags:#React#translation#component#Framer Motion#Tailwind#create#PascalCase
One-click install
npx skills add https://github.com/doleval013/Barak-web --skill new-component-doleval013
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/doleval013/Barak-web/tree/main/.agent/skills/new-component
Command: npx skills add https://github.com/doleval013/Barak-web --skill new-component-doleval013

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers quickly create new React components that adhere to the project's patterns and conventions, reducing onboarding time and ensuring consistency.

Core Features & Use Cases

  • Standardized structure: Creates components that live in src/components/ with PascalCase filenames.
  • Convention-driven: Encourages use of Framer Motion for animations, Tailwind CSS for styling, and the project's language translation approach.
  • Use Case: A developer needs to add a new UI element; this skill provides a ready-to-use component template that matches existing patterns.

Quick Start

Provide a component name in PascalCase and place the file under src/components/ following the project's conventions to generate a ready-to-use template.

Frequently Asked Questions about new-component

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

FAQPage Schema
How do I create a React component that follows existing project conventions?▼

To create a React component following project conventions, use a standardized scaffold that enforces PascalCase naming, places files in src/components, and applies Tailwind styling with Framer Motion animations.

What is the best way to scaffold a React component with Tailwind and Framer Motion?▼

The best way to scaffold a React component with Tailwind and Framer Motion is using a convention-driven template that automatically integrates styling and basic animations into the generated src/components file.

How does the language-context translation pattern work for React components?▼

The language-context translation pattern works by embedding translation logic directly into the React component scaffold, ensuring UI text adapts to language context and supports RTL layouts out of the box.

Can I use this component generator for a React project without Framer Motion or Tailwind?▼

This component generator targets projects specifically using Framer Motion and Tailwind CSS. Using it without these dependencies may require manually removing animation and styling logic from the generated scaffold.

What's the standard file placement and naming convention for new React UI elements?▼

The standard file placement for new React UI elements is the src/components directory, with filenames strictly using PascalCase to maintain consistency across the project architecture.

Related Skills

Explore More Software Engineering Skills→
STier-AiSTier-Ai
5

frontend-ui-dark-ts

Build dark-themed React UIs with Tailwind CSS and Framer Motion.

Official
Intermediate
Ikram-AlamIkram-Alam

framer-motion

Create production-ready animations for React apps using Framer Motion.

Community
Intermediate
daithang59daithang59
1

Add React Component

Scaffold React components with styling, context, API integration, and tests.

Community
Advanced
hashintelhashintel
1.6k

ark-ui

Provide headless React primitives for accessible, customizable UI components.

Official
Intermediate