agentsclimarketplace

Create component

Skill viknesh20-20/claude-code-tool-kit/.claude/skills/create-component

Production-ready Claude Code configuration. 12 original agents, 200+ slash-command skills, 45+ MCP servers, 14 plugins, design + 3D + WebGPU + GSAP + RAG tooling. One-command Node.js installer for premium websites, SaaS apps, AI agents. Free, MIT, stack-agnostic.

Install
npx -y skills add viknesh20-20/claude-code-tool-kit --skill create-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Scaffolds a new component, module, or package following the project's existing structure, naming conventions, and patterns. Auto-detects framework and generates all necessary files including tests.

SKILL.md

3.2 KB, as published. Nobody here has run it

Create Component / Module

Detect Project Structure

!ls -d src/ app/ lib/ pkg/ cmd/ internal/ components/ pages/ modules/ features/ 2>/dev/null !ls package.json go.mod Cargo.toml pyproject.toml *.csproj Gemfile mix.exs 2>/dev/null

Existing Components (for pattern matching)

!find . -type d -maxdepth 4 \( -path "*/components/*" -o -path "*/modules/*" -o -path "*/features/*" -o -path "*/pkg/*" -o -path "*/internal/*" \) -not -path "*/node_modules/*" -not -path "*/.git/*" 2>/dev/null | head -20

Scaffolding Process

Step 1: Analyze Existing Patterns

  1. Find the most similar existing component/module
  2. Note its file structure:
    • Main implementation file
    • Test file
    • Types/interfaces file
    • Index/barrel file
    • Styles file (if frontend)
    • Storybook/docs file (if applicable)
  3. Note naming conventions:
    • PascalCase, camelCase, kebab-case, or snake_case?
    • File extensions (.tsx, .ts, .py, .go, etc.)
    • Test file suffix (.test.ts, test.go, test.py, _spec.rb, etc.)

Step 2: Determine What to Generate

Based on the detected framework:

React/Next.js/Vue:

ComponentName/
├── ComponentName.tsx       # Main component
├── ComponentName.test.tsx  # Tests
├── ComponentName.types.ts  # TypeScript interfaces
├── ComponentName.module.css # Styles (if CSS modules used)
└── index.ts               # Barrel export

Python:

module_name/
├── __init__.py            # Public exports
├── module_name.py         # Main implementation
├── models.py              # Data models (if applicable)
└── test_module_name.py    # Tests

Go:

packagename/
├── packagename.go         # Main implementation
├── packagename_test.go    # Tests
└── types.go               # Type definitions (if needed)

Rust:

module_name/
├── mod.rs                 # Module entry point
├── types.rs               # Types and structs
└── tests.rs               # Tests

C#/.NET:

ModuleName/
├── ModuleName.cs          # Main class
├── IModuleName.cs         # Interface
└── ModuleNameTests.cs     # Tests

Step 3: Generate Files

For each file:

  1. Use the patterns found in Step 1
  2. Include proper imports/using statements
  3. Add standard boilerplate (constructor, basic methods)
  4. Follow the project's export pattern
  5. Include a skeleton test file with at least one test

Step 4: Register the Component

  • Add to barrel exports if the project uses them
  • Register routes if it's a page/endpoint
  • Add to module system if applicable (Angular modules, Python packages, etc.)

Rules

  • Mirror existing patterns exactly — don't introduce new conventions
  • Minimal boilerplate — generate just enough to be useful, not bloated
  • Include tests — always create the test file
  • Don't guess — if you can't determine the convention, ask the user

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.