focusreactive-design

Community

Build brand-aligned interfaces and assets for FocusReactive with the full design system.

AuthorAlexHramovich
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you generate well-branded interfaces and assets that align with FocusReactive's design system for production work, prototypes, mocks, or any visual artifact.

Core Features & Use Cases

  • Design System Access: Access the full design system including colors, typography, and UI components.
  • Customization: Use the provided CSS, fonts, and React components to customize your output.
  • Use Case: Need to create a marketing page or presentation deck that matches FocusReactive's branding. Use this Skill to ensure consistency with their design standards.

Quick Start

To start using the skill, import colors_and_type.css into your HTML file and use any of the components from ui_kits/website/.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 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: focusreactive-design
Download link: https://github.com/AlexHramovich/fr-preview-migration/archive/main.zip#focusreactive-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 620,000+ vetted skills library on demand.