skills.rest
ProfPowell
ProfPowellCOMMUNITY
Explore all skills by this author →
GitHub

custom-elements

Define custom HTML elements and generate custom-elements.json documentation.

4|Updated Jan 13, 2026
Search Tags:#documentation#html#javascript#web components#component development#custom elements
One-click install
npx skills add https://github.com/ProfPowell/vanilla-breeze --skill custom-elements
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: custom-elements
Source: https://github.com/ProfPowell/vanilla-breeze/tree/main/.claude/skills/custom-elements
Command: npx skills add https://github.com/ProfPowell/vanilla-breeze --skill custom-elements

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance and tools for defining, documenting, and using custom HTML elements within the project, ensuring consistency and enabling advanced component-based development.

Core Features & Use Cases

  • Custom Element Definition: Learn how to define new HTML tags with specific attributes, slots, and behaviors.
  • HTML Validation: Ensure custom elements are used correctly with elements.json for html-validate.
  • Component Documentation: Generate custom-elements.json for IDEs, Storybook, and other tools.
  • Use Case: When building a new reusable UI component like a product-card, use this skill to define its tag, attributes, and slots, and generate documentation for it.

Quick Start

Use the custom-elements skill to define a new element named 'my-widget' with a required attribute 'data-value'.

Frequently Asked Questions about custom-elements

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

FAQPage Schema
How do I define custom HTML elements with specific attributes and slots?▼

Custom HTML elements are defined by specifying new tags with required attributes and slots via command or manual JSON editing. This process generates a custom-elements.json file to document your component's structure for IDEs and Storybook.

What is a custom-elements.json file and when do I need it?▼

A custom-elements.json file is a Custom Elements Manifest standard used to document web components. You need it to enable tooling integration, allowing IDEs and Storybook to automatically recognize and support your custom elements.

How do I validate custom elements usage in my HTML?▼

You validate custom elements by configuring an elements.json schema for html-validate. This setup enforces correct usage of your custom HTML tags, verifying that required attributes and slots are properly implemented in your markup.

Should I build a CSS-only web component or a full JavaScript custom element?▼

Choosing between CSS-only and full JavaScript web components depends on your interactivity needs. This skill provides guidance on when a CSS-only approach suffices versus when to implement full JavaScript custom elements for complex behaviors.

Can I use custom elements with Storybook and my IDE?▼

Custom elements integrate directly with Storybook and IDEs via the generated custom-elements.json manifest. This file provides the necessary metadata, allowing your development tools to automatically detect, document, and support your custom HTML components.

Related Skills

Explore More Software Engineering Skills→
Nikolay-ShirokovNikolay-Shirokov
511

form-compile

Compiles predefined JSON-formatted lists of arbitrary key-value pairs (from stdin or a specified JSON file path argument if provided at runtime by caller -- otherwise uses defaults baked into compile() method — wait, simpler</think> needed. Let's rewrite cleanly:). Actually simplifies to:

Community
Advanced
dylantarredylantarre
38

storybook

Generate Storybook CSF 3.0 stories and MDX documentation for UI components.

Community
Intermediate
VMRam95VMRam95

web-design-guidelines

Audit React and HTML code for WCAG accessibility and Vercel design compliance.

Community
Intermediate
first-flukefirst-fluke
218

webf-native-ui-dev

Wrap Flutter widgets as HTML custom elements using WebF tooling.

Official
Advanced