custom-elements
CommunityDefine and use custom HTML elements.
Software Engineering#documentation#html#javascript#web components#component development#custom elements
AuthorProfPowell
Version1.0.0
Installs0
System Documentation
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.jsonforhtml-validate. - Component Documentation: Generate
custom-elements.jsonfor 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'.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: custom-elements Download link: https://github.com/ProfPowell/vanilla-breeze/archive/main.zip#custom-elements Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.