react-component

Name: react-component
Availability: InStock
Author: LumApps

Scaffold React components with LumX file structure and conventions.

26|9|Updated Jul 6, 2018

Search Tags:#documentation #react #design system #scaffolding #component #lumx

Ready to run

npx skills add https://github.com/lumapps/design-system --skill react-component-lumapps

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-component
Source: https://github.com/lumapps/design-system/tree/main/.claude/skills/react-component
Command: npx skills add https://github.com/lumapps/design-system --skill react-component-lumapps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized and efficient way to create, structure, test, and document React components within the LumX design system, ensuring consistency and reducing boilerplate code.

Core Features & Use Cases

Component Scaffolding: Generates the necessary file structure and boilerplate code for new React components.
Convention Enforcement: Guides users on best practices for naming, file organization, testing, and exporting components.
Use Case: A new developer joining the team needs to create a Tooltip component. They can use this Skill to quickly set up the Tooltip.tsx, Tooltip.test.tsx, Tooltip.stories.tsx, and index.ts files, adhering to all LumX conventions from the start.

Quick Start

Use the react-component skill to scaffold a new component named 'Avatar'.

Frequently Asked Questions about react-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold a new React component in the LumX design system?▼

To scaffold a React component in the LumX design system, use this Skill to generate the required file structure and boilerplate code. It creates the component implementation, SCSS styles, tests, stories, and index exports automatically.

What files do I need to create when building a React component for LumX?▼

When building a React component for LumX, you need a component file, an SCSS styles file, a test file, a stories file, and an index file. This Skill provides templates for all these files to ensure proper documentation and structure.

What's the best way to enforce naming and export conventions for React components?▼

The best way to enforce naming and export conventions for React components is to use scaffolding rules. This Skill guides file organization, naming, testing, and export conventions to ensure consistency and reduce boilerplate code.

Can I use this scaffolding tool for sub-components within the LumX design system?▼

Yes, you can use this scaffolding tool for sub-components within the LumX design system. It provides conventions and templates for creating both new components and sub-components, ensuring consistent structure across the package.

How do I set up React component documentation and stories correctly?▼

To set up React component documentation and stories correctly, use the provided templates for stories and site demo documentation. This Skill guides the creation of these files alongside the component implementation to maintain project standards.

Does this component scaffolding process include test file generation?▼

Yes, the component scaffolding process includes test file generation. It provides templates for component tests, ensuring that new components in the LumX design system are created with the necessary testing boilerplate from the start.