skills.rest
wembrndvx
wembrndvxCOMMUNITY
Explore all skills by this author →
GitHub

create-symbol-state-component

Convert inline SVG HTML into CSS-controlled components using a data-status attribute.

Updated Aug 27, 2026
Search Tags:#state management#svg#css selectors#dynamic components#runtime API#figma conversion#gradient fills
One-click install
npx skills add https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT --skill create-symbol-state-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-symbol-state-component
Source: https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT/tree/main/.claude/skills/2-component/create-symbol-state-component
Command: npx skills add https://github.com/wembrndvx/WEB_BUILDER_TOOLKIT --skill create-symbol-state-component

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about create-symbol-state-component

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

FAQPage Schema
How do I convert static SVG markup into a dynamic component with state management?▼

To convert static SVG markup into a dynamic component with state management, the Skill transforms inline SVG HTML using a `data-status` attribute. This approach enables visual states like colors to switch via CSS selectors at runtime without inefficient `innerHTML` replacement.

How do I control SVG gradient fills dynamically at runtime?▼

To control SVG gradient fills dynamically at runtime, the component predefines gradient and solid-color layers targeted through `data-status` selectors. It enforces layer naming conventions like `layer-grad0` through `layer-grad9` so CSS can reliably map states to specific SVG parts.

What is the best way to transform Figma-exported static components into runtime-ready views?▼

The best way to transform Figma-exported static components into runtime-ready views is using a pipeline that generates `views/component.html`, `styles/component.css`, and runtime scripts. This process creates interactive symbol variants controlled by a predictable runtime API.

Does this dynamic SVG state component approach require specific layer naming conventions?▼

Yes, this dynamic SVG state component approach requires specific layer naming conventions. You must name SVG layers using predefined structures like `layer-fill-primary`, `layer-fill-secondary`, and `layer-stroke` to ensure CSS can accurately target and map states to SVG elements.

How do I update component state interactively without rewriting SVG markup?▼

To update component state interactively without rewriting SVG markup, you use a runtime API that exposes `setStatus(config, status)` and `getStatus()`. These functions manage the component by updating only the dataset state attribute, avoiding full markup replacement.

Related Skills

Explore More Software Engineering Skills→
iressiress
1

figma-to-ids

Translates Figma designs into React/TypeScript code with IDS components and tokens.

Official
Intermediate
erclxerclx
2

setup-verify

Execute package.json scripts sequentially to validate project configuration.

Community
Intermediate
Ditto190Ditto190

state-management

Organize and synchronize application state across UI components with reusable containers and hooks.

Community
Intermediate
farmanlabfarmanlab
1

converting-figma-to-html

Convert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.

Community
Advanced