← All skill packs

UI Design & Frontend Skills

Skill pack
4 skills0 selected
briardevvSkills in this pack

Keeps UI work consistent with an app's DESIGN.md design system and decision log. Use when building or modifying UI in a repo with a DESIGN.md (or one that keeps drifting without it), when new screens must match existing ones, when buttons or patterns come out different every session, or when design decisions get lost between sessions.

English

Reverse-engineers a DESIGN.md (Google Labs format) from an already-built project and measures its design drift. Use whenever an existing codebase should adopt DESIGN.md, when UI values have multiplied (several grays, mixed radii, inconsistent buttons), when the owner says the UI looks inconsistent or "quedó desprolijo", or to re-audit drift after a migration batch — even if nobody says the word DESIGN.md.

English

Adversarial review of plans, specs, and proposals before execution — verifies references, extracts and rates assumptions, runs a pre-mortem, hunts what's missing, then pressure-tests its own findings for confidence and real-world severity. Use before executing an implementation plan, when asked to review a spec or proposal, or as the quality gate after writing-plans.

English

Disciplined causal analysis for explaining observed outcomes — competing hypotheses, evidence ranked by strength, active disconfirmation, and a discriminating next probe. Use when investigating why something happened (intermittent failures, regressions, production incidents, surprising benchmark results) BEFORE proposing fixes, especially when a "obvious culprit" is tempting.

English

Includes Designing Consistently, Extracting Design Markdown, Reviewing Plans, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills4CategorygeneralStars0

What’s included

Designing Consistently

Keeps UI work consistent with an app's DESIGN.md design system and decision log. Use when building or modifying UI in a repo with a DESIGN.md (or one that keeps drifting without it), when new screens must match existing ones, when buttons or patterns come out different every session, or when design decisions get lost between sessions.

Extracting Design Markdown

Reverse-engineers a DESIGN.md (Google Labs format) from an already-built project and measures its design drift. Use whenever an existing codebase should adopt DESIGN.md, when UI values have multiplied (several grays, mixed radii, inconsistent buttons), when the owner says the UI looks inconsistent or "quedó desprolijo", or to re-audit drift after a migration batch — even if nobody says the word DESIGN.md.

Reviewing Plans

Adversarial review of plans, specs, and proposals before execution — verifies references, extracts and rates assumptions, runs a pre-mortem, hunts what's missing, then pressure-tests its own findings for confidence and real-world severity. Use before executing an implementation plan, when asked to review a spec or proposal, or as the quality gate after writing-plans.

Tracing Root Causes

Disciplined causal analysis for explaining observed outcomes — competing hypotheses, evidence ranked by strength, active disconfirmation, and a discriminating next probe. Use when investigating why something happened (intermittent failures, regressions, production incidents, surprising benchmark results) BEFORE proposing fixes, especially when a "obvious culprit" is tempting.

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Designing Consistently skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: MIT. The author’s terms apply.
UI Design & Frontend Skills | Agent Skills Atlas