skills.rest
LisandroCacciatore
LisandroCacciatoreCOMMUNITY
Explore all skills by this author →
GitHub

style-editor

Modifies HTML files and Tailwind tokens to maintain IronLog's frontend design system.

Updated Feb 18, 2026
Search Tags:#consistency#frontend#tailwind#tokens#design-system#ui-patterns#component-maintenance
One-click install
npx skills add https://github.com/LisandroCacciatore/lisandro-sport-performance --skill style-editor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-editor
Source: https://github.com/LisandroCacciatore/lisandro-sport-performance/tree/main/_agent/skills/style-editor
Command: npx skills add https://github.com/LisandroCacciatore/lisandro-sport-performance --skill style-editor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mantiene y extiende el sistema de diseño "Criterio Técnico" del sitio lisandrocacciatore.com / IronLog. Proporciona directrices y herramientas para modificar, crear o revisar cualquier archivo HTML del sitio (index.html, sobre-mi.html, simuladores como Wendler, ss, cube), páginas de aterrizaje segmentadas por buyer o componentes nuevos, asegurando que el resultado final sea visualmente indistinguible del resto del sitio en tono y estructura.

Core Features & Use Cases

  • Conjunto de patrones y tokens para gobernar tipografía, colores, espaciado y componentes.
  • Soporte para cambios controlados en frontend, con reglas IF → THEN y documentación de decisiones.
  • Ejemplos de uso: actualizar un componente UI existente o crear uno nuevo manteniendo la coherencia con el diseño.

Quick Start

Describe el cambio de frontend que quieres hacer y el sistema guiará el proceso de implementación.

Frequently Asked Questions about style-editor

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

FAQPage Schema
How do I maintain design system consistency when modifying frontend HTML files?▼

To maintain design system consistency, align frontend HTML modifications with Tailwind tokens, theme.js, and established coding conventions, ensuring typography, color, and structure match the existing visual tone across all pages.

What are design tokens and how do they govern UI component styling?▼

Design tokens are predefined variables governing typography, colors, and spacing. They ensure UI component styling remains consistent by mapping visual attributes to Tailwind classes and theme.js configurations across the frontend.

How do I create a new UI component without breaking existing design patterns?▼

Creating a new UI component without breaking design patterns involves following IF → THEN rules, documenting decisions, and matching new markup with established Tailwind tokens to preserve visual fidelity.

Does this design system approach work for segmented landing pages and simulators?▼

Yes, this design system approach works for segmented landing pages and simulators by applying consistent structural and visual rules across various HTML files like Wendler, ss, and cube.

What's the best way to update an existing UI component while preserving visual fidelity?▼

The best way to update an existing UI component while preserving visual fidelity is to revise the HTML structure while strictly aligning changes with Tailwind tokens and theme.js configurations.

Related Skills

Explore More Design & Creative Skills→
concept2cureconcept2cure

design-tokens

Generate CSS variable and Tailwind design tokens for light and dark modes.

Community
Advanced
0xRayAI0xRayAI

frontend-ui-ux-engineer

Apply UI/UX design principles and WCAG 2.1 AA accessibility guidelines to web interfaces.

Official
Intermediate
ag47-ptag47-pt
1

tailwind-patterns

Guide Tailwind CSS v4 architecture and responsive styling patterns.

Community
Intermediate
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced