Skills
.Work. You
Rest

hart-agency-design

Community

Build and review Hart UI that matches tokens and prototypes.

Design & Creative#front-end#design system#ui review#component building#token alignment#prototype fidelity
Authorrafaeelricco
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents Hart Agency UI work from drifting away from the canonical design system and token truth, while still letting you build or review screens quickly using the right layout and component patterns.

Core Features & Use Cases

  • UI build + review for Hart’s two surfaces: Supports Hart Web Platforms and the Brand Ambassador Mobile App, including screens, pages, and components.
  • Token-first conflict detection: Flags conflicts between the design system, mental model, and prototype sources so the output stays consistent with globals.css and the design-system rules.
  • Guided intake and plan-before-build: Runs a short intake to define scope and surface, then proposes a plan before making changes.
  • Design-system extension support: Helps extend the design system by clarifying what’s being added (token, primitive, or pattern) and where it should live.

Quick Start

Ask the hart-agency-design skill to “Review this Hart Web Platforms screen for design-system compliance and propose the exact token-based fixes.”

Dependency Matrix

Required Modules

None required

Components

referencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: hart-agency-design
Download link: https://github.com/rafaeelricco/Hartopsprototype/archive/main.zip#hart-agency-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.