skills.rest
Qualiasolutions
QualiasolutionsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qualia-design

Refine typography, color, spacing, and components in frontend UI files.

Updated Aug 27, 2026
Search Tags:#design#ui#consistency#frontend#transformation#design-system#polish
One-click install
npx skills add https://github.com/Qualiasolutions/qualia-framework --skill qualia-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qualia-design
Source: https://github.com/Qualiasolutions/qualia-framework/tree/main/skills/qualia-design
Command: npx skills add https://github.com/Qualiasolutions/qualia-framework --skill qualia-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI polish is often manual, slow, and inconsistent. This skill provides a repeatable, one-shot transformation to critique, fix, and harden the UI, ensuring it aligns with design intent in a single pass.

Core Features & Use Cases

  • One-shot transformation that critiques, fixes, polishes, and hardens UI to look professional.
  • Works across the entire frontend codebase, specific files, or targeted sections such as dashboards.
  • When DESIGN.md exists, uses its values for typography, color, spacing, and components; otherwise falls back to project defaults to maintain brand consistency.

Quick Start

Run /qualia-design to apply a full UI polish across your target frontend files.

Frequently Asked Questions about qualia-design

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

FAQPage Schema
How do I polish frontend UI consistently across an entire codebase?▼

To polish frontend UI consistently, you can run a one-shot design transformation that critiques, fixes, and hardens typography, color, spacing, and components across your entire codebase in a single pass. It restricts changes to styling without touching business logic.

Can I apply a UI design transformation to just a specific section like a dashboard?▼

Yes, you can apply the UI design transformation to scoped sections like a dashboard, individual files, or the entire frontend codebase. This allows you to quickly refine and polish specific areas without affecting the rest of the application.

Does frontend UI polish require a design system file to work?▼

No, frontend UI polish does not strictly require a design system file. When a DESIGN.md file exists, the transformation uses its values for brand consistency; otherwise, it falls back to project defaults to maintain styling standards.

What is the best way to refine frontend typography and spacing without breaking business logic?▼

The best way to refine frontend typography and spacing without breaking business logic is to use a one-shot design transformation that restricts its changes strictly to styling. This ensures your core application logic remains completely untouched while the UI is hardened.

Do I need specific folder structures for frontend UI polish tools to work?▼

Yes, this frontend UI polish tool requires your target files to be located in the app/ and components/ directories. Ensuring your project follows this structure allows the transformation to accurately target and refine the UI.

Why does my frontend UI look unpolished after manual styling updates?▼

Frontend UI often looks unpolished after manual updates because the process is slow and prone to inconsistency. Applying a repeatable, one-shot design transformation critiques and fixes the UI to ensure professional alignment with your design intent.

Related Skills

Explore More Design & Creative Skills→
LisandroCacciatoreLisandroCacciatore

style-editor

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

Community
Advanced
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate
rakibulismrakibulism
2

visual-polish-reviewer

Identifies visual UI defects and outputs prioritized fixes with CSS recommendations.

Community
Intermediate