Component New — Development skill for Claude Code
Create a new React component with TypeScript and modern best practices.
How to install Component New
Installs to ~/.claude/skills/gr8monk3ys-skills-component-new/SKILL.md
mkdir -p ~/.claude/skills/gr8monk3ys-skills-component-new && curl -fsSL https://raw.githubusercontent.com/gr8monk3ys/skills/HEAD/commands/component-new.md -o ~/.claude/skills/gr8monk3ys-skills-component-new/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What Component New does
description: Create a new React component with TypeScript and modern best practices model: claude-opus-4-8
Generate a new React component following 2025 best practices.
Component Specification
$ARGUMENTS
Options (if not specified above, ask or use defaults)
| Option | Choices | Default |
|---|---|---|
| Component Type | Server Component, Client Component | Server (unless needs interactivity) |
| Styling | Tailwind, CSS Modules, Styled Components | Tail |
Alternatives in Development
- Create Blog Article For Claude Code Component — You will create a complete, SEO-optimized blog article for a Claude Code component 23.4k ★
- Axiom — Battle-tested Claude Code skills for modern xOS (iOS, iPadOS, watchOS, tvOS) development with 13 production-re 2.6k ★
- Portaljs Add Map — Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase 2.3k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Vara S Portfolio
"🤍✨Vara's Portfolio-A modern, high-performance portfolio website built with React, TypeScript, and Vite. This
18
Build a fullscreen loading screen component in React (Next.js 14, TypeScript). Uses Framer Motion for animatio
Add Component
Create a reusable React component with TypeScript and best practices.
React Build
Fix React build failures in a Turborepo monorepo using Next.js (App Router) — incremental fixes for TypeScript
Openui Component
Create a new OpenUI component with Zod schema and React renderer
React Best Practices
Agent Skill: A comprehensive skill for implementing React best practices including component structure, state
Related Agents
Coder Web
Implements features for web languages (JavaScript, TypeScript, React, Vue) to make tests pass. Expert in moder
UI Engineer
Frontend specialist in modern JavaScript/TypeScript frameworks, responsive design, and component-driven archit
Expo Developer
Develop React Native apps with Expo SDK 50+, TypeScript, and modern architecture patterns. Masters Expo ecosys