← All skill packs

UI Design & Frontend Skills

Skill pack
10 skills0 selected
comskySkills in this pack

Verify that the current Git branch, upstream state, and dirty working tree match the user's intended task before staging, committing, pushing, or continuing work from another session. Use this to detect stale branch reuse, leftover dirty files from previous sessions, unrelated commits on the current branch, cases where work should be split into a new branch or worktree, and post-publish cleanup decisions after push, PR creation, or PR merge.

English

Re-audit code changes to identify side effects, regression risks, and unhandled edge cases before merging or deploying.

English

Diagnose and fix CJK (Korean, Japanese, Chinese) text-wrapping issues in web UIs. Systematically traces mid-syllable breaks, orphaned glyphs, and awkward line splits through a layered fix strategy covering global CSS cascade, component-library overrides, headline balancing, and translation-level phrase binding. Produces an evidence-based diagnosis and verification report before any code change is applied.

English

Research and compare how competing products implement a similar feature at the UX and interaction level. Provides structured comparison tables and strategic differentiation recommendations.

English

Finalize documentation changes for production readiness by discovering existing conventions, verifying code-doc alignment, reviewing format/terminology/tone consistency, verifying branch/worktree intent, and structuring clean commits with a post-publish branch/worktree cleanup decision. Counterpart of finalize-and-commit for documentation projects.

English

Finalize code changes for production readiness by removing duplicate logic, auditing hardcoded values, verifying branch/worktree intent, verifying build integrity, structuring clean commits with Conventional Commits format, and forcing a post-publish branch/worktree cleanup decision.

English

Sync reusable frontend decisions into persistent project documentation after UI work. Use when frontend changes introduce or modify component APIs, variants, design-system tokens, styling conventions, layout behavior, accessibility rules, interaction patterns, responsive behavior, or agent operating instructions; when the user asks to reflect decisions in components.md, design system docs, AGENTS.md, CLAUDE.md, GEMINI.md, or similar project memory files; or before finalizing frontend work where future consistency depends on decisions made during implementation.

English

Ship an already-committed Git branch through GitHub: verify branch/worktree intent, push, create or mark a pull request ready for review, optionally wait for CI, optionally address review comments automatically, and merge with explicit safety gates. Use when a solo developer repeatedly asks to publish committed work, register a ready PR, handle PR feedback, and complete merge.

English

Explore open-source GitHub repository source trees via web browsing to analyze and compare feature implementations at the code level. Supports two modes: cross-project comparison and single-project deep dive. Use when evaluating how OSS projects implement a specific feature, choosing architecture patterns, or benchmarking implementation strategies.

English

Continuously detect recurring UI/UX concepts during frontend discussions, track conversation-wide recurrence, and register repeated concepts as structured knowledge assets in a Notion database via MCP.

English

Includes Branch Context Check, Change Reaudit, Cjk Text Wrap Audit, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

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

Pack stats

Skills10CategorygeneralStars0

What’s included

Branch Context Check

Verify that the current Git branch, upstream state, and dirty working tree match the user's intended task before staging, committing, pushing, or continuing work from another session. Use this to detect stale branch reuse, leftover dirty files from previous sessions, unrelated commits on the current branch, cases where work should be split into a new branch or worktree, and post-publish cleanup decisions after push, PR creation, or PR merge.

Change Reaudit

Re-audit code changes to identify side effects, regression risks, and unhandled edge cases before merging or deploying.

Cjk Text Wrap Audit

Diagnose and fix CJK (Korean, Japanese, Chinese) text-wrapping issues in web UIs. Systematically traces mid-syllable breaks, orphaned glyphs, and awkward line splits through a layered fix strategy covering global CSS cascade, component-library overrides, headline balancing, and translation-level phrase binding. Produces an evidence-based diagnosis and verification report before any code change is applied.

Competitive Feature Benchmark

Research and compare how competing products implement a similar feature at the UX and interaction level. Provides structured comparison tables and strategic differentiation recommendations.

Docs Finalize and Commit

Finalize documentation changes for production readiness by discovering existing conventions, verifying code-doc alignment, reviewing format/terminology/tone consistency, verifying branch/worktree intent, and structuring clean commits with a post-publish branch/worktree cleanup decision. Counterpart of finalize-and-commit for documentation projects.

Finalize and Commit

Finalize code changes for production readiness by removing duplicate logic, auditing hardcoded values, verifying branch/worktree intent, verifying build integrity, structuring clean commits with Conventional Commits format, and forcing a post-publish branch/worktree cleanup decision.

Frontend Decision Sync

Sync reusable frontend decisions into persistent project documentation after UI work. Use when frontend changes introduce or modify component APIs, variants, design-system tokens, styling conventions, layout behavior, accessibility rules, interaction patterns, responsive behavior, or agent operating instructions; when the user asks to reflect decisions in components.md, design system docs, AGENTS.md, CLAUDE.md, GEMINI.md, or similar project memory files; or before finalizing frontend work where future consistency depends on decisions made during implementation.

Gh Ship PR

Ship an already-committed Git branch through GitHub: verify branch/worktree intent, push, create or mark a pull request ready for review, optionally wait for CI, optionally address review comments automatically, and merge with explicit safety gates. Use when a solo developer repeatedly asks to publish committed work, register a ready PR, handle PR feedback, and complete merge.

Oss Code Analysis

Explore open-source GitHub repository source trees via web browsing to analyze and compare feature implementations at the code level. Supports two modes: cross-project comparison and single-project deep dive. Use when evaluating how OSS projects implement a specific feature, choosing architecture patterns, or benchmarking implementation strategies.

UX Sentinel

Continuously detect recurring UI/UX concepts during frontend discussions, track conversation-wide recurrence, and register repeated concepts as structured knowledge assets in a Notion database via MCP.

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 Branch Context Check 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