skills.rest
shishiv30
shishiv30COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/shishiv30/pure --skill create-comp
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
RonkTsangRonkTsang
20

chakra-ui-builder

Generate Chakra UI component snippets and theme configuration templates.

Community
Advanced
eddmanneddmann
2

playwright

Render dynamic web pages with Playwright to capture HTML, text, and screenshots.

Community
Intermediate
myapihqmyapihq
83

my-image-api

Generate AI images from text prompts and retrieve public CDN URLs.

Official
Intermediate
maragudkmaragudk
27

gomponents

Construct type-safe HTML components with a Node-like API in Go.

Official
Intermediate