One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill design-engineering-timekast
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Design Engineering
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.agent/skills/design-engineering
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill design-engineering-timekast

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill fixes UI that feels generic, inconsistently styled, or unclear by turning visual intent into production-ready, system-aligned interface improvements.

Core Features & Use Cases

  • Token- and variant-driven UI refinement: Applies semantic tokens and component variants to remove one-off styling and restore visual consistency.
  • Layout and interaction polish: Improves hierarchy, spacing rhythm, tables/cards/filter/forms/dashboard readability, and hover/focus/selected/pressed states.
  • System-respecting iconography and motion: Introduces or refines icon wrappers/visual variants and aligns motion transitions with the motion profile and reduced-motion needs.
  • Use Case: After selecting an approved skin, refine a dashboard’s header, KPI cards, tables, filters, and empty/loading states so the product feels premium without sacrificing trust or accessibility.

Quick Start

Ask the AI to implement the approved UI skin for the selected page, refining hierarchy, spacing, components, icon treatment, and interaction states while preserving existing product logic.

Frequently Asked Questions about Design Engineering

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

FAQPage Schema
How do I polish my dashboard UI to look premium and consistent using design tokens?

Dashboard UI refinement uses semantic design tokens and component variants to improve visual hierarchy, spacing, and interaction states. This approach removes one-off styling, ensuring consistent, production-ready frontend changes across screens and components.

What is the best way to refine frontend components like tables, cards, and forms?

Refining frontend components like tables, cards, and forms involves applying semantic tokens and component variants to standardize visual hierarchy and interaction states. This ensures consistent, production-ready styling without touching unrelated product logic.

How do I update iconography and interaction states without breaking existing product logic?

Update iconography and interaction states by applying system-respecting icon wrappers and visual variants while validating responsive and dark/light contrast behavior. This approach uses semantic tokens and requires restraint to avoid unrelated logic or excessive visual effects.

Do I need an approved UI skin before starting component variant and token styling?

Yes, an approved UI skin is required before starting token-based styling and component variant updates. The refinement process translates an approved visual direction and motion profile into production-ready frontend changes across pages and components.

Why does my UI look generic and how can semantic tokens make it look clearer?

UI looks generic due to inconsistently styled one-off elements and unclear hierarchy. Semantic tokens resolve this by standardizing visual direction into production-ready, system-aligned interface improvements, restoring trust and accessibility across light and dark modes.

When should I avoid using UI polish techniques for frontend implementation?

Avoid UI polish techniques when tasks require introducing unrelated logic or excessive visual effects that deviate from an approved skin. The process requires restraint, relying strictly on semantic tokens and component variants to validate responsive and contrast behavior.