← All skill packs

UI Design & Frontend Skills

Skill pack
10 skills0 selected
ihlamurySkills in this pack

Full plan-to-merged-PR pipeline — 45 phases with convergence loops, Goldmask risk analysis, pre-ship validation, bot review integration, cross-model verification, and conditional design sync. Use when running end-to-end from plan to merge, resuming an interrupted arc with --resume after a crash or session end, or when any named phase fails (forge, work, code-review, mend, test, ship, merge, etc. — see body for full phase list). Keywords: arc, pipeline, --resume, checkpoint, convergence, forge, mend, bot review, PR comments, ship, merge, design sync, Figma, VSM.

English

Cal's UI design system. Use when building interfaces inspired by Cal's aesthetic - light mode, Inter font, 4px grid.

English

Enables Claude to create and manage documents with tables and automation in Coda via Playwright…

English

Discover and share design work on Dribbble - browse design inspiration, manage portfolio, and find…

English

Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance…

English

Builds real-time collaborative features with Liveblocks including presence, cursors, storage, comments, and notifications. Use when adding multiplayer experiences, collaborative editing, or live cursors to React applications.

English

Miro's UI design system. Use when building interfaces inspired by Miro's aesthetic - light mode, Inter font, 4px grid.

English

Monzo's UI design system. Use when building interfaces inspired by Monzo's aesthetic - light mode, Inter font, 4px grid.

English

N26's UI design system. Use when building interfaces inspired by N26's aesthetic - dark mode, Inter font, 4px grid.

English

Use this skill to work with the Readwise Original API for creating, organizing, and reviewing highlights and books.

English

Includes Cal UI Skills, Liveblocks, Miro UI Skills, 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

Arc

Full plan-to-merged-PR pipeline — 45 phases with convergence loops, Goldmask risk analysis, pre-ship validation, bot review integration, cross-model verification, and conditional design sync. Use when running end-to-end from plan to merge, resuming an interrupted arc with --resume after a crash or session end, or when any named phase fails (forge, work, code-review, mend, test, ship, merge, etc. — see body for full phase list). Keywords: arc, pipeline, --resume, checkpoint, convergence, forge, mend, bot review, PR comments, ship, merge, design sync, Figma, VSM.

Cal UI Skills

Cal's UI design system. Use when building interfaces inspired by Cal's aesthetic - light mode, Inter font, 4px grid.

Coda

Enables Claude to create and manage documents with tables and automation in Coda via Playwright MCP

Dribbble

Discover and share design work on Dribbble - browse design inspiration, manage portfolio, and find designers

Ghost

Ghost CMS theme development with Handlebars templating, Alpine.js, Tailwind CSS, and performance optimization

Liveblocks

Builds real-time collaborative features with Liveblocks including presence, cursors, storage, comments, and notifications. Use when adding multiplayer experiences, collaborative editing, or live cursors to React applications.

Miro UI Skills

Miro's UI design system. Use when building interfaces inspired by Miro's aesthetic - light mode, Inter font, 4px grid.

Monzo UI Skills

Monzo's UI design system. Use when building interfaces inspired by Monzo's aesthetic - light mode, Inter font, 4px grid.

N26 UI Skills

N26's UI design system. Use when building interfaces inspired by N26's aesthetic - dark mode, Inter font, 4px grid.

Readwise

Use this skill to work with the Readwise Original API for creating, organizing, and reviewing highlights and books.

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 Arc 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.
  • License details are not provided in these listings. Check the author’s terms before using the skills.
UI Design & Frontend Skills | Agent Skills Atlas