Skills suchen.../

Ui Design Language | Skills Pool

Skill-Datei

Ui Design Language

Maintain visual alignment with existing UI color themes, typography, spacing, and interaction style. Use when refining or extending interface design language (color choices, chart styling, readability overlays, component polish) so new work matches established aesthetics and remains legible across responsive sizes.

robopony2k0 Sterne01.03.2026

Beruf
Kategorien: IDE-Plugins

Skill-Inhalt

Audit First

Identify existing color tokens, typography choices, spacing rhythm, and card chrome before styling new UI.
Reuse established visual primitives (accent hues, muted text tone, border alpha, shadow style) instead of inventing a parallel palette.
Confirm the target context (phase UI, HUD canvas, three-test dock) and match its local contrast level.

Header-First Widgets

For compact dock widgets, keep a persistent header visible in all states.
Structure headers as: indicator on the left, title in the center/left flow, actions on the right.
Keep primary actions (pin, minimize) visible in the header; avoid burying them in expanded-only content.
Use header clicks for expand/collapse and keep action clicks isolated from header toggles.

Minimize vs Close

In persistent dock patterns, do not fully remove widgets unless an explicit reopen affordance exists.
If a close icon is visually required, map it to behavior and label it accordingly in tooltip/ARIA.

Verwandte Skills

Schnellinstallation

Ui Design Language

npx skills add robopony2k/FIreFighterAI

Skill herunterladen Repository öffnen

Autor: robopony2k
Sterne: 0
Aktualisiert: 01.03.2026
Beruf

Auf dieser Seite

minimize/collapse

Preserve existing state models when possible (for example: minimized, hover, pinned) instead of introducing hidden states by default.

Apply Styling Decisions

Choose chart or panel domains for comparability across time; avoid auto-rescaling that changes interpretation frame-to-frame.
Add semantic scaffolding for dense visuals: threshold lines, categorical bands, and axis labels where users need quick state reading.
Keep color meaning consistent:
- Cool tones for lower intensity.
- Warm/amber for medium intensity and active marker states.
- Hot/red tones for high danger.
Preserve hierarchy: background layers first, guides second, data series third, active marker last.
Replace ambiguous abbreviations (CL, TM, MP) with meaningful, live indicators tied to current state.

Readability Rules

Guarantee label contrast against the actual panel background, not against a neutral canvas assumption.
Reserve explicit chart margins for axes and labels; avoid drawing text inside dense line paths.
Throttle X-axis labels by available width to prevent overlap on smaller docks.
Use short uppercase or compact labels for categorical axes when space is constrained.
Move frequently referenced status context into headers when it increases chart/body readability.

Responsiveness and Fit

Size chart containers to support overlays (bands + both axes + marker) without clipping.
Recheck small-width breakpoints after visual changes; adjust paddings and label density rather than removing meaning.
Keep hover/focus/interactive states visually coherent with existing button and card treatments.

Validation Checklist

Verify fixed domains remain stable when values fluctuate.
Verify threshold bands and axis labels remain visible in all relevant modes.
Verify seasonal or timeline labels align with the data window offset.
Verify marker position tracks current forecast index correctly.
Verify widget transitions across minimized, hover, and pinned states remain coherent.
Verify header actions are visible and usable in all visible states.
Verify minimize behavior never leaves users without access to the widget.
Run npm run check after TypeScript/CSS changes.

02

Header-First Widgets

03Minimize vs Close

04Apply Styling Decisions

05Readability Rules

06Responsiveness and Fit

07Validation Checklist

Automatisierungswerkzeuge

Coding Agent (bash-first)

Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.

Install Vscode Extension

How to install a VS Code extension from an extension ID. Useful when the user wants to add new capabilities to their VS Code environment by installing extensions.

microsoft184.0k

Launch

Launch and automate VS Code (Code OSS) using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test UI features, or take screenshots of VS Code. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch Code OSS with debugging'.

microsoft184.0k

Agent Customization

**WORKFLOW SKILL** — Create, update, review, fix, or debug VS Code agent customization files (.instructions.md, .prompt.md, .agent.md, SKILL.md, copilot-instructions.md, AGENTS.md). USE FOR: saving coding preferences; troubleshooting why instructions/skills/agents are ignored or not invoked; configuring applyTo patterns; defining tool restrictions; creating custom agent modes or specialized workflows; packaging domain knowledge; fixing YAML frontmatter syntax. DO NOT USE FOR: general coding questions (use default agent); runtime debugging or error diagnosis; MCP server configuration (use MCP docs directly); VS Code extension development. INVOKES: file system tools (read/write customization files), ask-questions tool (interview user for requirements), subagents for codebase exploration. FOR SINGLE OPERATIONS: For quick YAML frontmatter fixes or creating a single file from a known pattern, edit the file directly — no skill needed.

microsoft184.0k

Automatisierungswerkzeuge

Init

Generate or update chat customization files for AI coding agents

microsoft184.0k

Launch

Launch and automate VS Code Insiders with the Copilot Chat extension using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test the extension UI, or take screenshots. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch with debugging'.

microsoft184.0k