new-component
Standardizes React component creation by scaffolding files with required headers, types, and styling conventions.
Install
mkdir -p .claude/skills/new-component-7sferry && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18248" && unzip -o skill.zip -d .claude/skills/new-component-7sferry && rm skill.zipInstalls to .claude/skills/new-component-7sferry
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Scaffold a new React component following project conventionsKey capabilities
- →Create new React component files
- →Add TypeScript interfaces for props
- →Generate CSS files for components
- →Run `git add` on new files
- →Verify types with `bun run typecheck`
How it works
The skill creates a new React component file with a specified name, adhering to project conventions for file headers, TypeScript, props interfaces, and styling, then adds the new files to git.
Inputs & outputs
When to use new-component
- →Create a new component
- →Scaffold React UI
- →Add new feature component
About new-component
Generates a new React component file with the appropriate header, TypeScript interfaces, and CSS. It ensures all components follow project-specific directory and export standards.
Scaffold a new React component following project conventions
When not to use it
- →When the component is not a React component
- →When the project conventions for file header, TypeScript, or styling are not desired
- →When Gatsby-specific features are not relevant
Limitations
- →Limited to creating React function components
- →Styling uses plain CSS with class names (Bootstrap 5 available)
- →Props interfaces are defined in `src/types/DataTypes.ts` or inline
How it compares
This skill scaffolds a new React component according to predefined project conventions, including specific file structure, typing, and styling rules, which is more structured than manually creating component files.
Compared to similar skills
new-component side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| new-component (this skill) | 0 | 6mo | No flags | Beginner |
| tsx | 0 | 4mo | Review | Beginner |
| zustand | 113 | 4mo | No flags | Intermediate |
| web-artifacts-builder | 49 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
tsx
javimosch
TSX namespace for Netsnek e.U. TypeScript component toolkit. React component scaffolding, type-safe props, Storybook integration, and component docs.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
writing-registry-meta
siriwatknp
Use this skill when writing meta file for MUI Treasury registry.