← All skill packs

UI Design & Frontend Skills

Skill pack
3 skills0 selected
rishi4792Skills in this pack

The house style for CINEMATIC MOTION + STILLS — best-in-the-world animated hero GIFs/MP4s and cinematic stills (deck covers, social cards, launch visuals), in one signature look. Triggers on requests for a "hero GIF/video", "cinematic" anything, "animated logo/wordmark", "launch/hero/demo asset", "motion graphic", "title card", "twitter/social video or card", "deck cover slide", or "make it cinematic / buzz.xyz / SpaceX / Nolan vibe". Give it a ONE-LINE BRIEF (product + a few beats) and it storyboards, builds a frame-deterministic HTML, renders GIF+MP4 (or a still), does a light self-review, and delivers. Does NOT trigger on functional UI pages/components/dashboards/forms — that is rk-house-style. This is the MOTION + cinematic-visual skill; rk-house-style is the product-UI skill.

English

Review-3 (FULL) — final adversarial review of the BUILT product via a multi-agent fan-out assuming every feature is broken until a re-run check proves it (reconciliation, design+a11y, exercised rollback, observability, idempotency, secrets). Ends with a human sign-off. Two clean rounds; cap 5. Trigger after compass:build, or on "review the build", "final review", "ready to ship".

English

The ENFORCED house design system — one premium look for every frontend, with gates that stop drift (not just advice). Triggers on building or editing a page, component, view, dashboard, screen, form, table, chart, or any UI surface ("build a page", "create a component", "design a dashboard", "make a form", "add a table", "redesign the UI", "build the frontend"). Does NOT trigger on backend/API/route logic, data/SQL/pipeline, schema/migration, CLI/scripts, test-only, or docs. Applies the active theme's pinned tokens + component recipes, and a self-critique gate that scores the work BEFORE the user sees it. The single design skill at user level (the generic novelty-biased ones were removed).

English

Includes Cinematic Hero, Review Build, and Rk House Style.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

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

Pack stats

Skills3CategoryproductStars0

What’s included

Cinematic Hero

The house style for CINEMATIC MOTION + STILLS — best-in-the-world animated hero GIFs/MP4s and cinematic stills (deck covers, social cards, launch visuals), in one signature look. Triggers on requests for a "hero GIF/video", "cinematic" anything, "animated logo/wordmark", "launch/hero/demo asset", "motion graphic", "title card", "twitter/social video or card", "deck cover slide", or "make it cinematic / buzz.xyz / SpaceX / Nolan vibe". Give it a ONE-LINE BRIEF (product + a few beats) and it storyboards, builds a frame-deterministic HTML, renders GIF+MP4 (or a still), does a light self-review, and delivers. Does NOT trigger on functional UI pages/components/dashboards/forms — that is rk-house-style. This is the MOTION + cinematic-visual skill; rk-house-style is the product-UI skill.

Review Build

Review-3 (FULL) — final adversarial review of the BUILT product via a multi-agent fan-out assuming every feature is broken until a re-run check proves it (reconciliation, design+a11y, exercised rollback, observability, idempotency, secrets). Ends with a human sign-off. Two clean rounds; cap 5. Trigger after compass:build, or on "review the build", "final review", "ready to ship".

Rk House Style

The ENFORCED house design system — one premium look for every frontend, with gates that stop drift (not just advice). Triggers on building or editing a page, component, view, dashboard, screen, form, table, chart, or any UI surface ("build a page", "create a component", "design a dashboard", "make a form", "add a table", "redesign the UI", "build the frontend"). Does NOT trigger on backend/API/route logic, data/SQL/pipeline, schema/migration, CLI/scripts, test-only, or docs. Applies the active theme's pinned tokens + component recipes, and a self-critique gate that scores the work BEFORE the user sees it. The single design skill at user level (the generic novelty-biased ones were removed).

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 Cinematic Hero 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