create-comp

Generate reusable EJS components with JavaScript data and template files.

Updated Dec 17, 2022

Search Tags:#html #javascript #component #ui development #templating #ejs

Ready to run

npx skills add https://github.com/shishiv30/pure --skill create-comp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-comp
Source: https://github.com/shishiv30/pure/tree/main/.cursor/skills/create-comp
Command: npx skills add https://github.com/shishiv30/pure --skill create-comp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of reusable server-rendered EJS components, promoting code modularity and maintainability in Pure UI projects.

Core Features & Use Cases

Component Generation: Creates both the JavaScript data file (.js) and the EJS template file (.ejs) for new components.
HTML Conversion: Converts existing HTML snippets into reusable EJS components.
Image Handling: Integrates image assets using a CDN URL helper.
Use Case: You need to create a new comp_card component to display user profiles consistently across your application. This Skill will generate the necessary comp_card.js and comp_card.ejs files, allowing you to define the card's structure and data.

Quick Start

Use the create-comp skill to generate a new EJS component named 'user-profile'.

Frequently Asked Questions about create-comp

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

FAQPage Schema

How do I create reusable EJS components for server-side rendering?▼

To create reusable EJS components, this Skill generates paired JavaScript data files and EJS template files, establishing modular UI structures for server-side rendering and maintaining separation of data and markup.

Can I convert existing HTML into reusable EJS components?▼

Yes, you can convert existing HTML snippets into reusable EJS components by processing the markup through this Skill to generate the corresponding EJS template and JavaScript data files automatically.

How does EJS component generation handle image assets?▼

EJS component generation handles image assets by integrating a CDN URL helper, allowing you to manage and reference image paths efficiently within your generated templates without hardcoding local file paths.

What is the best way to structure UI components in a Pure UI framework?▼

The best way to structure UI components in a Pure UI framework is to separate data logic and presentation by using paired JavaScript and EJS files, which this Skill generates to enforce modular and maintainable code.

Do I need to manually create both the .js and .ejs files for a new UI component?▼

No, you do not need to manually create both files; this Skill automates the scaffolding process by generating the JavaScript data file and EJS template file simultaneously when you define a new component.