Skills
.Work. You
Rest

component-decomposition

Community

Migrate complex UI into clean vanilla components.

Software Engineering#frontend#migration#decomposition#component#ui-design#framer-motion#vanilla-js
Authortumes
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Use when migrating complex React/Framer Motion components to vanilla implementations, or when building new interactive components - layers static markup, styling, CSS animations, then vanilla JS only where needed

Core Features & Use Cases

  • Layered migration approach: separate static markup, styling, motion, and behavior for clear verification.
  • Framework-agnostic outputs: produce vanilla implementations that work without React or Framer Motion.
  • Performance and maintenance gains: reduce JS footprint by removing heavy libraries and keeping behavior minimal.
  • Verification-driven: each layer can be independently tested against the original behavior.

Quick Start

Decompose an existing React component into static markup, add CSS for styling, then implement vanilla JS only for behavior that CSS cannot achieve.

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: component-decomposition
Download link: https://github.com/tumes/dotfiles-nvim/archive/main.zip#component-decomposition

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 223,000+ vetted skills library on demand.