← All skill packs

UI Design & Frontend Skills

Skill pack
3 skills0 selected
vtrkaSkills in this pack

Use WHEN starting a new product, rebrand, or major design-system reset BEFORE prototype work to materialize an approved, machine-readable design system at .supervibe/artifacts/prototypes/design-system/. Triggers: ''нужен бренд'', ''разработай бренд'', ''фирстиль'', ''брендбук'', ''rebrand'', ''design system'', ''дизайн-система''.

English

Use WHEN a prototype, frontend handoff, or backend integration needs realistic mock data TO create schema-tied mock contracts and scenario fixtures before frontend implementation. Triggers: ''mock data contract'', ''prepare mocks'', ''data-fed prototype'', ''frontend before backend''.

English

Use when selecting, sequencing, or explaining Supervibe skills for a task. Maps user intent to skill chains without bypassing commands, receipts, CodeGraph, or confidence gates.

English

Includes Mock Data Contract, Using Supervibe Skills, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

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

Pack stats

Skills3CategoryproductStars0

What’s included

Brandbook

Use WHEN starting a new product, rebrand, or major design-system reset BEFORE prototype work to materialize an approved, machine-readable design system at .supervibe/artifacts/prototypes/design-system/. Triggers: ''нужен бренд'', ''разработай бренд'', ''фирстиль'', ''брендбук'', ''rebrand'', ''design system'', ''дизайн-система''.

Mock Data Contract

Use WHEN a prototype, frontend handoff, or backend integration needs realistic mock data TO create schema-tied mock contracts and scenario fixtures before frontend implementation. Triggers: ''mock data contract'', ''prepare mocks'', ''data-fed prototype'', ''frontend before backend''.

Using Supervibe Skills

Use when selecting, sequencing, or explaining Supervibe skills for a task. Maps user intent to skill chains without bypassing commands, receipts, CodeGraph, or confidence gates.

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 Brandbook 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.