skills.rest
kftof
kftofCOMMUNITY
Explore all skills by this author →
GitHub

ui-kit-editor

Automates modification, extension and auditing of HTML UI kits while preserving coherence across tokens, components, assets.

Updated Apr 25, 2026
Search Tags:#html#audit#icons#design-system#ui-kit#tokens.css#components.css
One-click install
npx skills add https://github.com/kftof/ui-kit --skill ui-kit-editor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-kit-editor
Source: https://github.com/kftof/ui-kit/tree/main/ui-kit-editor
Command: npx skills add https://github.com/kftof/ui-kit --skill ui-kit-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the modification, extension, and auditing of HTML UI kits while preserving overall design coherence, enabling teams to update screens, components, and variants without breaking the system.

Core Features & Use Cases

  • Modifies, extends, or audits an existing HTML UI kit while preserving coherence, supporting tasks like adding a screen, updating a component, auditing a kit, creating a variant, or refactoring a design package.
  • Enforces kit integrity by ensuring essential pillars are present (tokens.css, ds/components.css, and ds/assets/icons) and guiding asset management across brand, illustrations, and images when needed.
  • Recommends a standardized workflow (include UI Kit.html, GUIDELINES.md) and provides a plan-before-action approach to minimize drift and maintain consistency.

Quick Start

Invoke this skill on a target kit to begin a guided modification session while preserving coherence across tokens, components, and assets.

Frequently Asked Questions about ui-kit-editor

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

FAQPage Schema
How do I modify an HTML UI kit without breaking the design system?▼

Modifying an HTML UI kit without breaking the design system requires a plan-before-action approach that preserves coherence across tokens.css, components.css, and asset directories to maintain DRY conventions.

What is the best way to audit an existing HTML UI kit?▼

Auditing an HTML UI kit involves verifying the presence of essential pillars like tokens.css, ds/components.css, and ds/assets/icons, while checking adherence to kit conventions to ensure design package consistency.

How do I add a new screen to an HTML UI kit while maintaining tokens?▼

Adding a new screen to an HTML UI kit involves extending components.css and utilizing established tokens.css to ensure the new layout adheres to the existing design system's DRY principles and visual coherence.

Do I need specific file structures to update HTML UI kit components?▼

Updating HTML UI kit components requires a specific project structure including tokens.css, ds/components.css, ds/assets/icons, and UI Kit.html to ensure modifications remain compatible with the design system.

Can I create component variants in an HTML UI kit automatically?▼

Creating component variants in an HTML UI kit can be automated by following kit conventions within components.css, ensuring the new variants integrate seamlessly without causing design drift across the project.

Why does my HTML UI kit lose design consistency when adding icons?▼

HTML UI kits lose design consistency when adding icons if assets are not managed correctly within ds/assets/icons, bypassing the established tokens.css and components.css conventions required for system coherence.

Related Skills

Explore More Design & Creative Skills→
kftofkftof

ui-kit-creator

Generate a complete HTML design system and UI kit package.

Community
Advanced
kftofkftof

ui-kit-brand-explorer

Generate six logo directions and seven brand assets for a UI kit.

Community
Advanced
outscaloutscal
62

asset-creator

Generates scalable SVG visuals from icons and shapes via Python scripts.

Official
Intermediate
ToqsickToqsick

ui-factory

Orchestrate the full UI-Factory chain from color system to dashboard.

Community
Advanced