Frontend Components

UI component best practices for vanilla JavaScript and HTML. Use this skill when creating or modifying HTML elements, building reusable JavaScript modules, or structuring DOM components in this static website. Apply when working on .html files, JavaScript modules in js/ that manage UI state or rendering, or when creating modular, reusable UI patterns.

$ 설치

git clone https://github.com/adigunners/adigunners.github.io /tmp/adigunners.github.io && cp -r /tmp/adigunners.github.io/.claude/skills/frontend-components ~/.claude/skills/adigunners-github-io

// tip: Run this command in your terminal to install the skill


name: Frontend Components description: UI component best practices for vanilla JavaScript and HTML. Use this skill when creating or modifying HTML elements, building reusable JavaScript modules, or structuring DOM components in this static website. Apply when working on .html files, JavaScript modules in js/ that manage UI state or rendering, or when creating modular, reusable UI patterns.

When to use this skill

  • When creating or modifying HTML structure in index.html, winners.html, or other pages
  • When building JavaScript modules that manage UI components (ui-module.js, ui-manager.js, winners-module.js)
  • When implementing reusable UI patterns like leaderboards, countdown timers, or data tables
  • When structuring DOM manipulation logic with single responsibility and clear interfaces
  • When creating modular JavaScript components with configurable options
  • When building composable UI elements that combine smaller components
  • When refactoring monolithic HTML into smaller, reusable sections

Frontend Components

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

Instructions

For details, refer to the information provided in this file: frontend components