词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code new-component for React JSX conventions

Create a small component using the project's JSX, default exports, destructured props, and inline style conventions.

中文

Install in Claude Code

Open the React project in Claude Code. This workflow follows Mental Kung Fu's JSX and inline styling.

  1. Review `.claude/skills/new-component/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/new-component/` in your project and save the reviewed file as `.claude/skills/new-component/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/new-component` in the slash menu.

Example task

Fixture component-19 needs a local reference card named ReferenceNote. Input is {title: 'Garden ideas', expanded: false}.

What to check

Create ReferenceNote.jsx with a default export. When collapsed, verify {visibleTitle: 'Garden ideas', detailVisible: false}. Use inline styles and keep React as the dependency.

Original SKILL.md on GitHub · Updated

Frequently asked question

When does this component need another UI library?

The project workflow uses React itself. Simple components can use available project data and React hooks.