UI Design & Frontend Skills

Skill pack

AGENT SKILLS ATLAS

UI Design & Frontend Skills

Includes Baseline UI, Fixing Accessibility, Fixing Metadata, and other workflows.

Install with

Claude Code

Codex

Cursor

GitHub Copilot

Gemini CLI

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

Pack stats

Skills11CategorygeneralStars0

What’s included

Baseline UI

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

Fixing Accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive control

Fixing Metadata

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots direct

Fixing Motion Performance

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transit

Frontend Design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that

Frontend Slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to

Use when submitting any Ralph Workflow artifact as a markdown document via ralphsubmitmdartifact, when pre-checking a draft with ralphverifymdartifact, or when a submission returned diagnostics with codes like MD001-MD007, SPEC001-SPEC012, or REF001-REF004 and you need the closed markdown grammar

Submit Commit Cleanup Artifact

Use when submitting a commitcleanup artifact as markdown via ralphsubmitmdartifact with deletefile / addtogitignore / addtogitexclude actions, or when an action was rejected by the printable-ASCII rule or silently dropped by the security boundary

Submit Commit Message Artifact

Use when submitting a commitmessage artifact as markdown via ralphsubmitmdartifact with a commit or skip frontmatter variant, or when the conventional-commit subject was rejected and you need the exact subject rule

Submit Development Result Artifact

Use when submitting a developmentresult artifact as markdown via ralphsubmitmdartifact with ID-based proof entries in Plan Items Proven and Analysis Items Addressed, or when a completed result was rejected for a missing section or an unproven plan or analysis item

Theme Factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that y

Quick start

Choose your skills. Select individual skills above, or choose the entire pack.
Copy the install prompt. Use Copy install prompt above the list.
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 Baseline UI 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: AGPL-3.0. The author’s terms apply.

Installation guide →Skill review & security →