ui-component-contracts

Read and debug UI primitives before editing call sites. Use whenever a React/Tailwind/design-system component behaves unexpectedly, especially for icon or avatar lockups, variant confusion, wrapper misuse, padding/radius/background bugs, mismatched rendered footprints, or any case where inspecting the actual DOM is the fastest way to see which node owns the visual shell versus the inner content.

Jump to install Review files

Repository: vana-com/data-connect
Last source activity: March 6, 2026 at 07:53
Detected SKILL.md language: English
Stars: 26
Forks: 7

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/vana-com/data-connect/tree/main/.agents/skills/ui-component-contracts.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/vana-com/data-connect --skill ui-component-contracts

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

name	ui-component-contracts
description	Read and debug UI primitives before editing call sites. Use whenever a React/Tailwind/design-system component behaves unexpectedly, especially for icon or avatar lockups, variant confusion, wrapper misuse, padding/radius/background bugs, mismatched rendered footprints, or any case where inspecting the actual DOM is the fastest way to see which node owns the visual shell versus the inner content.

Back to search Back to installation

patch-first-debugging

Debug and repair code using minimal, reviewable patches instead of full-file rewrites. Use this whenever the user is fixing a bug, iterating on failing tests, asks for a surgical code change, wants a minimal diff, or is in a tight debug loop where output size and token cost matter. Prefer this even if the user does not explicitly say "patch."

2026-03-25

test-fix-loop

Build or use a tight automated test-fix loop that repairs one failing test at a time with minimal patches and narrow context. Use whenever the user wants a repair harness, constrained bug-fixing loop, failing-test repair workflow, or a prompt that turns the model into a surgical fix engine instead of a general coding assistant.

2026-03-25

cognitive-load

Reduce cognitive load when implementing or refactoring code for readability.

2026-03-24

View all from this repository

ui-component-contracts

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository