skills.rest
ebenfc
ebenfcCOMMUNITY
Explore all skills by this author →
GitHub

new-component

Generate React component files with client directive and CSS variables.

Updated Aug 23, 2026
Search Tags:#typescript#code scaffolding#react#frontend development#component generation#ui development
One-click install
npx skills add https://github.com/ebenfc/bird-photo-gallery --skill new-component-ebenfc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-component
Source: https://github.com/ebenfc/bird-photo-gallery/tree/main/.claude/skills/new-component
Command: npx skills add https://github.com/ebenfc/bird-photo-gallery --skill new-component-ebenfc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of new React components by enforcing established patterns and conventions, ensuring consistency and maintainability across the project.

Core Features & Use Cases

  • Boilerplate Generation: Creates a new component file with the correct structure and "use client"; directive.
  • Convention Enforcement: Guides developers to use theme-aware colors, accessibility best practices, and existing UI primitives.
  • Use Case: When adding a new interactive element like a user profile card or a settings toggle, use this Skill to quickly scaffold the component file according to project standards.

Quick Start

Use the new-component skill to generate a new React component named UserProfile in the settings feature area.

Frequently Asked Questions about new-component

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

FAQPage Schema
How do I generate new React components with theme-awareness and accessibility built in?▼

To generate new React components with theme-awareness and accessibility, this Skill scaffolds the file using CSS variables for theming and enforces WCAG 2.1 AA standards automatically.

What's the best way to scaffold a client-side React component?▼

The best way to scaffold a client-side React component is using this Skill, which automatically injects the "use client" directive and structures the file to leverage existing UI primitives.

Do I need existing UI primitives to scaffold a React component?▼

Yes, you need existing UI primitives located in `src/components/ui/` because the generated React components are designed to leverage them directly for consistent frontend development.

Can I use this to generate a React component for a user profile card?▼

Yes, you can generate a React component for a user profile card by providing the component name and feature area, and the Skill will scaffold it according to your project patterns.

Why does the generated React component require CSS variables?▼

The generated React component requires CSS variables to enforce theme-awareness, ensuring that your UI development maintains consistent styling conventions across the project.

What accessibility standards are enforced when creating a new React component?▼

WCAG 2.1 AA accessibility standards are enforced when creating a new React component, ensuring that your frontend development meets compliance requirements right from the initial code scaffolding.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate
vallafedericovallafederico

solidstart-client-only

Render SolidJS components client-side with lazy loading and fallback UI.

Community
Intermediate
luanrodriguesluanrodrigues
2

bee:dev-frontend-accessibility

Validate frontend components against WCAG 2.1 AA with axe-core and keyboard tests.

Community
Advanced
Mohamedghaly140Mohamedghaly140

clerk-custom-ui

Create branded authentication UIs and workflows for Clerk apps in Next.js/React using useSignIn and useSignUp hooks.

Community
Advanced