skills.rest
is-ivanov
is-ivanovCOMMUNITY
Explore all skills by this author →
GitHub

align-design

Align frontend component styling with HTML mockup CSS values.

2|1|Updated Nov 7, 2025
Search Tags:#frontend#visual regression#ui styling#design qa#mockup alignment#css comparison
One-click install
npx skills add https://github.com/is-ivanov/rpm-ddd --skill align-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: align-design
Source: https://github.com/is-ivanov/rpm-ddd/tree/main/.opencode/skills/align-design
Command: npx skills add https://github.com/is-ivanov/rpm-ddd --skill align-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you bring a frontend component into pixel-accurate alignment with its HTML mockup when the implemented UI differs in spacing, typography, layout, borders, or other visual details.

Core Features & Use Cases

  • Mockup-to-component comparison: Locates the relevant story mockup and frontend component, then checks visual styling differences systematically.
  • Design token alignment: Compares CSS values from the mockup against the live component and fixes mismatches using a defined checklist and styling guidance.
  • Safe UI refinement: Preserves behavior and testing hooks while updating only presentation details, making it useful for polishing registration forms, story-based pages, and other feature screens before review or QA.

Quick Start

Ask the AI to use the align-design skill to update a named component or story so its styling matches the corresponding mockup exactly.

Frequently Asked Questions about align-design

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

FAQPage Schema
How do I match my frontend component styling to an HTML mockup exactly?▼

Matching UI to mockups involves comparing implemented component CSS values against the mockup and correcting visual mismatches. This skill uses a checklist-driven workflow to systematically align spacing, typography, and layout while preserving component behavior.

What is visual regression testing for UI styling alignment?▼

Visual regression testing for UI styling alignment compares a live frontend component against its design mockup to detect and fix CSS value differences. It ensures pixel-accurate presentation by systematically checking spacing, borders, and typography.

How do I fix CSS comparison mismatches between a mockup and a story component?▼

Fixing CSS comparison mismatches involves locating the story mockup and frontend file, then applying styling corrections based on a defined checklist. This skill updates presentation details while preserving data-testid attributes and component behavior.

Can I update UI styling without breaking data-testid attributes and component behavior?▼

Yes, you can update UI styling without breaking data-testid attributes and component behavior by following a safe UI refinement workflow. This skill isolates presentation updates like spacing and typography from functional logic, ensuring testing hooks remain fully intact.

Does design QA work with Selenium validation for frontend mockup alignment?▼

Design QA works with Selenium validation by optionally executing visual checks after CSS corrections are applied. This skill supports build verification, test execution, and optional visual or Selenium validation to confirm the component matches the mockup.

When should I not use automated mockup alignment for frontend components?▼

You should not use automated mockup alignment when a frontend component lacks a corresponding HTML mockup or defined story number within the repository's product specification. This skill requires a mockup CSS reference to perform the visual comparison and correction workflow.

Related Skills

Explore More Software Engineering Skills→
jcteaguejcteague

mockup

Generate MDX mockups with embedded data and frontmatter from user stories.

Community
Intermediate
tapanshahtapanshah

migrate

Converts Cypress or Selenium test files to Playwright and updates locators.

Community
Advanced
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
semicolon-devteamsemicolon-devteam

generate-mockup

Generate UI mockups from design requirements using the 21st_magic_component_builder.

Official
Advanced