Skip to content

Search skills.../

Agent Skill Search Engine

Search

Search
Categories
Occupations

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Design System Enforcer | Skills Pool

Skill File

Design System Enforcer

Use this when adding or reviewing UI in the TMA Platform to keep sections aligned with the existing tokens, spacing, typography, motion presets, and premium dark visual language.

MrStratolution0 starsApr 12, 2026

Occupation
Categories: IDE Plugins

Skill Content

Use this skill when building or reviewing new sections, cards, forms, or page layouts.

Preserve the current TMA language

Reuse the existing:

tokens
spacing rhythm
typography patterns
CTA styles
card treatments
dark premium aesthetic
subtle preset-based motion

Inspect the current implementation before adding new styles:

shared TMA CSS files
current block renderers
existing public section patterns

Do not introduce

a second visual system
bright or generic marketing UI that clashes with TMA
uncontrolled animation behavior
inconsistent section/card/button styling
page-specific ad hoc style islands when shared styles should be reused

Required review points

Check:

Related Skills

Quick Install

Design System Enforcer

npx skillvault add MrStratolution/mrstratolution-tms-platform-github-skills-design-system-enforcer-skill-md

Download Skill Open repository

Author: MrStratolution
stars: 0
Updated: Apr 12, 2026
Occupation

On this page

01Preserve the current TMA language

desktop, tablet, and mobile behavior

spacing consistency between sections

readable hierarchy and CTA clarity

media/card proportions

no visual drift from existing premium dark direction

Implementation bias

Prefer:

shared classes and tokens
small extensions to existing styles
preset-based options over freeform styling

Avoid:

one-off style hacks that editors must work around later

02

Do not introduce

03Required review points

04Implementation bias

Graphic Designers

Automation Tools

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

Automation Tools

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

Graphic Designers