agentskills.codes
NE

new-component

by 7sferryCodingSource

Standardizes React component creation by scaffolding files with required headers, types, and styling conventions.

FrontendCode GenerationDocumentationReactTypeScript

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.zip

Installs 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 conventions
60 charsno explicit “when” trigger
Beginner

Key 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

You give it
Component name
You get back
New React component file (`.tsx`) and optional CSS file, added to git

When to use new-component

  • →Create a new component
  • →Scaffold React UI
  • →Add new feature component

About this skill

Create a new React component named $ARGUMENTS following this project's conventions.

Project Conventions

  1. File header: Every file starts with:

    /************************
 * Author: [MR FERRY™]  *
 * <Month Year>         *
 ************************/

    Use the current month and year.

  2. TypeScript: All components use .tsx extension with typed props.

  3. Props interfaces: Define props interfaces in src/types/DataTypes.ts if they will be shared, or inline if component-specific.

  4. Imports: Use named imports. Import React explicitly.

  5. Component style: Use function components (arrow functions), not class components. Export as default.

  6. Styling: Use plain CSS with class names (Bootstrap 5 available). Place CSS in src/components/ alongside the component.

  7. Gatsby features: Use <Slice> for reusable layout parts, useStaticQuery + graphql for component-level data, gatsby-plugin-image for responsive images.

Steps

  1. Create the component file in src/components/$ARGUMENTS.tsx
  2. Add TypeScript interface to src/types/DataTypes.ts if props are shared
  3. Add CSS file if needed
  4. Run git add on all new files
  5. Run bun run typecheck to verify

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.

SkillInstallsUpdatedSafetyDifficulty
new-component (this skill)03moNo flagsBeginner
tsx01moReviewBeginner
zustand1131moNo flagsIntermediate
web-artifacts-builder493moReviewIntermediate

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.

00

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.

113434

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.

49162

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.

48105

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.

3480

writing-registry-meta

siriwatknp

Use this skill when writing meta file for MUI Treasury registry.

587

Search skills

Search the agent skills registry