skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

kb-design-engineering

Translate approved UI direction into production interface code using semantic tokens.

Updated May 19, 2026
Search Tags:#design system#visual hierarchy#frontend implementation#ui polishing#tables and dashboards#tailwind tokens#a11y contrast
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-design-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kb-design-engineering
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.claude/skills/kb-design-engineering
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill kb-design-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns an approved visual direction into production-ready UI polish while preserving existing product behavior and logic.

Core Features & Use Cases

  • Scope-safe UI execution: Implements design changes at the correct screen/component level while keeping adjacent logic untouched.
  • Visual-to-system mapping: Converts visual intent into token, variant, and wrapper decisions so styling is consistent and maintainable.
  • High-leverage refinement: Improves common weak spots like headers, filter/search bars, data tables, KPI cards, navigation identity, and empty/loading states.
  • Restraint and validation: Applies changes with semantic tokens and component variants, then validates hierarchy, responsiveness, dark/light contrast, and interaction states.

Quick Start

Apply this skill to a screen whose tables and filter bar feel generic by asking the AI to scope the changes, map the visual intent into system tokens/variants, implement with restraint, and produce the required polish-pass output contract.

Frequently Asked Questions about kb-design-engineering

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

FAQPage Schema
How do I polish UI components without breaking existing product logic?▼

To polish UI without breaking product logic, translate approved visual directions into semantic tokens and component variants. This ensures styling changes are applied as system-level abstractions, keeping underlying product behavior and adjacent logic completely untouched.

What is the best way to improve visual hierarchy in data tables and dashboards?▼

Improving visual hierarchy in data tables and dashboards involves mapping visual intent to system tokens and applying restraint. Refine headers, filter bars, and KPI cards by adjusting spacing rhythm and interaction states using semantic tokens rather than scattered utility styling.

How do I apply tailwind tokens for frontend implementation without altering screen behavior?▼

Apply tailwind tokens for frontend implementation by mapping visual intent to semantic token decisions and component variants. This approach maintains consistent, maintainable styling across screens while validating hierarchy, responsiveness, and interaction states without altering product behavior.

Can I refine navigation identity and empty states using a design system without rewriting components?▼

Yes, you can refine navigation identity and empty states using a design system by scoping changes to the correct component level. Implement visual polish through wrapper decisions and component variants, ensuring high-leverage refinement without rewriting underlying component logic.

How do I validate a11y contrast and interaction states after a UI polish pass?▼

Validate a11y contrast and interaction states after a UI polish pass by checking the implemented semantic tokens against dark/light themes. Ensure visual hierarchy, responsiveness, and interaction states meet accessibility standards through a structured validation step.

Why does my UI styling break when I apply scattered utility classes instead of system tokens?▼

Scattered utility styling breaks UI consistency because it bypasses system-level abstractions. Mapping visual intent to semantic tokens and component variants ensures maintainable, scope-safe execution that preserves product logic and validates hierarchy across interaction states.

Related Skills

Explore More Design & Creative Skills→
TimeKastTimeKast

Design Engineering

Your message is missing

Official
Intermediate
alfadocsalfadocs

alfadocs-accessibility-review

Audit AlfaDocs interfaces for WCAG compliance and accessibility defects.

Official
Advanced
cosmicstack-labscosmicstack-labs
364

ui-design-system

Standardize UI design systems with tokens, component architecture, and governance.

Official
Advanced
MolcajeteAIMolcajeteAI
2

nativewind-patterns

Apply NativeWind utility-first CSS classes to React Native components.

Official
Basic