skills.rest
itsmepratikg
itsmepratikgCOMMUNITY
Explore all skills by this author →
GitHub

brand-identity

Enforces visual identity standards for Tailwind CSS and Lucide-based UI development.

Updated Aug 23, 2026
Search Tags:#branding#style guide#tailwind css#icons#ui design
One-click install
npx skills add https://github.com/itsmepratikg/MapRecruit.ai-TypeScript --skill brand-identity-itsmepratikg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-identity
Source: https://github.com/itsmepratikg/MapRecruit.ai-TypeScript/tree/main/.maprecruit-skills/brand-identity
Command: npx skills add https://github.com/itsmepratikg/MapRecruit.ai-TypeScript --skill brand-identity-itsmepratikg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that all UI elements and features adhere to MapRecruit's established visual guidelines, preventing design inconsistencies and maintaining a professional brand image.

Core Features & Use Cases

  • Consistent Styling: Applies the defined color palette, typography, and icon set across the application.
  • Responsive Design: Ensures UI elements adapt correctly to different screen sizes.
  • Micro-interactions: Implements smooth transitions and animations for interactive elements.
  • Use Case: When developing a new dashboard widget, use this skill to ensure it uses the correct emerald-600 for primary actions, Inter font, and lucide-react icons, with appropriate hover effects.

Quick Start

Apply the brand identity guidelines to style the new user profile card.

Frequently Asked Questions about brand-identity

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce brand identity standards in Tailwind CSS?▼

To enforce brand identity in Tailwind CSS, apply specific color palettes like emerald-600 for primary actions, use the Inter font family, and integrate lucide-react icons to maintain consistent visual styling.

What is the best way to maintain UI design consistency for a web application?▼

Maintaining UI design consistency requires applying a unified style guide that defines color codes, typography, and icon usage, ensuring all dashboard widgets and UI elements adapt correctly across responsive breakpoints.

How do I use lucide-react icons with a specific color palette and typography?▼

Use lucide-react icons alongside your established color palette and typography by enforcing specific visual identity standards, ensuring interactive elements feature smooth transitions, animations, and appropriate hover effects.

Does this brand identity enforcement approach support responsive design breakpoints?▼

Yes, brand identity enforcement supports responsive design by ensuring UI elements adapt correctly to different screen sizes while maintaining the defined color palette, typography, and icon set across all application views.

Why are my UI components failing to match the established visual style guide?▼

UI components fail to match the visual style guide when they do not adhere to specific color codes, font families, and icon usage standards, leading to design inconsistencies across the application.

Can I use this approach to style a new dashboard widget with micro-interactions?▼

Yes, you can use this approach to style a new dashboard widget, ensuring it uses the correct emerald-600 for primary actions, Inter font, and lucide-react icons with smooth transitions and micro-interactions.

Related Skills

Explore More Design & Creative Skills→
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
PriyanshuSingh06PriyanshuSingh06

react:components

Convert Stitch designs into React components with Atomic Design and AST validation.

Community
Intermediate
HigorAlvesHigorAlves
4

shadcn

Manage shadcn/ui components with installation, theming, and documentation retrieval.

Community
Basic
GenuinehGenuineh

frontend-styling-twind

Configure Twind and Tailwind CSS design systems for reusable component styling.

Community
Intermediate