Skills
.Work. You
Rest

create-symbol-state-component

Community

Convert SVG symbols into stateful runtime components

Software Engineering#state management#svg#css selectors#dynamic components#runtime API#figma conversion#gradient fills
Authorwembrndvx
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill turns inline SVG HTML into a state-driven dynamic component so you can change visual states (like colors) efficiently at runtime without rewriting SVG markup.

Core Features & Use Cases

  • State-based rendering via dataset: Uses data-status so the component switches appearance by changing a single attribute rather than replacing innerHTML.
  • CSS-controlled gradients and fills: Predefines gradient and solid-color layers and targets them through data-status="..." selectors.
  • Runtime API for state control: Provides setStatus(config, status) and getStatus() to manage component state in a predictable way.
  • Layer naming conventions for consistent styling: Enforces layer-grad0~layer-grad9, layer-fill-primary, layer-fill-secondary, and layer-stroke so CSS can reliably map states to SVG parts.

Quick Start

Ask the AI to generate a symbol state component from Figma_Conversion/Static_Components/[project]/[component]/ and output views/component.html, styles/component.css, and runtime scripts that expose setStatus and getStatus for updating data-status.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: create-symbol-state-component
Download link: https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT/archive/main.zip#create-symbol-state-component

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.