skills.rest
telum-ai
telum-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-quality

Validate UI component files against design-system.md standards.

2|Updated Dec 21, 2025
Search Tags:#design system#ui design#ux#aesthetics#visual quality#component personality
One-click install
npx skills add https://github.com/telum-ai/speck --skill visual-quality-telum-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-quality
Source: https://github.com/telum-ai/speck/tree/main/.cursor/skills/visual-quality
Command: npx skills add https://github.com/telum-ai/speck --skill visual-quality-telum-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that all user interface implementations not only function correctly but also adhere to the project's unique design philosophy and aesthetic standards, preventing generic or boilerplate UI.

Core Features & Use Cases

  • Design System Enforcement: Extracts and applies core design principles, bold choices, and visual vibe from design-system.md.
  • Universal Design Principles: Guides implementation across typography, negative space, motion, texture, states, color, and component personality.
  • Self-Check Mechanism: Provides a comprehensive checklist for developers to validate UI quality before committing.
  • Use Case: When implementing a new feature's UI, this Skill ensures the buttons have character, whitespace is deliberate, and typography creates clear hierarchy, all aligned with the project's specific design language.

Quick Start

Ensure the UI implementation for the new dashboard adheres to the project's design philosophy and bold choices before marking the story as done.

Frequently Asked Questions about visual-quality

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

FAQPage Schema
How do I enforce design system consistency in UI components?▼

To enforce design system consistency, this Skill extracts design philosophy and bold choices from your `design-system.md` and validates UI component files against those specific aesthetic standards using a self-check mechanism.

What design principles are checked during UI visual quality validation?▼

UI visual quality validation checks universal design principles including typography, negative space, motion, texture, state styling, color usage, and component personality to prevent generic boilerplate interfaces.

Can I use this to check visual quality in Vue and React files?▼

Yes, you can check visual quality in Vue and React files. The Skill processes UI component files including .tsx, .jsx, and .vue to ensure aesthetic excellence and adherence to your project's unique design language.

How do I avoid generic UI aesthetics when implementing new features?▼

You avoid generic UI aesthetics by applying extracted design philosophies and bold choices to your components, ensuring deliberate whitespace, clear typographic hierarchy, and distinct component personality.

Does this integrate with Speck workflow for story implementation?▼

Yes, this integrates with Speck workflow for story implementation and validation, allowing you to ensure UI components meet visual design standards before marking a story as done.

Related Skills

Explore More Design & Creative Skills→
Manish-Let-It-BeManish-Let-It-Be
1

stitch-design-taste

Generate Google Stitch design system specifications covering UI philosophy, color, typography, and interaction guidelines.

Community
Advanced
Owl-ListenerOwl-Listener
2.0k

design-qa-checklist

Verify design implementations against specifications with a structured QA checklist.

Community
Advanced
SandroBeatzSandroBeatz

lint-check

Run ESLint and TypeScript type checking on a codebase.

Community
Intermediate
R2W1csR2W1cs
1

lint-and-validate

Lint and validate JavaScript and Python code for syntax and style issues.

Community
Intermediate