skills.rest
tylersahagun
tylersahagunCOMMUNITY
Explore all skills by this author β†’
GitHub

skylar-visual-change

Modify UI component spacing, typography, color, and layout using design tokens.

Updated Aug 23, 2026
Search Tags:#design#ui#frontend#component#code#visual
One-click install
npx skills add https://github.com/tylersahagun/elmer --skill skylar-visual-change
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: skylar-visual-change
Source: https://github.com/tylersahagun/elmer/tree/main/pm-workspace-docs/archive/cursor-architecture-2026-02-07/.cursor/rules/Skylar/skylar-visual-change
Command: npx skills add https://github.com/tylersahagun/elmer --skill skylar-visual-change

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between design intent and code implementation, allowing for precise visual modifications to UI components based on plain language descriptions.

Core Features & Use Cases

  • Visual Component Updates: Modify colors, spacing, typography, and layout of existing UI elements.
  • Design-to-Code Translation: Directly implement designer feedback into the codebase.
  • Use Case: A designer says, "Make the primary button more prominent with a bolder color and larger font." This Skill will identify the button component, apply the requested visual changes using the design system's tokens and scales, and ensure responsiveness and accessibility.

Quick Start

Use the skylar-visual-change skill to increase the padding on the card component.

Frequently Asked Questions about skylar-visual-change

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

FAQPage Schema
How do I translate design changes into frontend code?β–Ό

To translate design changes into frontend code, use a skill that parses natural language descriptions to modify UI components, applying requested visual changes directly to spacing, typography, color, and layout.

Can I update UI component styles using natural language?β–Ό

Yes, you can update UI component styles using natural language. The skill interprets plain language feedback to locate specific component files and implement visual modifications using predefined design system tokens.

How do I implement design tokens when modifying frontend layouts?β–Ό

You implement design tokens when modifying frontend layouts by applying predefined design system scales for spacing and typography, ensuring that visual updates adhere to responsive design principles and accessibility standards.

What is the best way to apply design feedback to a codebase?β–Ό

The best way to apply design feedback to a codebase is translating plain language descriptions into precise visual modifications, ensuring the updated UI elements match the established design system tokens and accessibility requirements.

Does this visual change tool require locating component files manually?β–Ό

No, the visual change tool does not require locating component files manually. It automatically identifies the specific component files within the codebase needed to implement the requested visual design updates.

Related Skills

Explore More Design & Creative Skills→
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

flat

Standardize minimalist UI design with semantic tokens for colors, typography, and spacing.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate