skills.rest
Eir-Space
Eir-SpaceOFFICIAL
Explore all skills by this author →
GitHub

eir-design-system

Provide Eir design tokens, React component starters, and brand SVGs.

2|2|Updated Feb 20, 2026
Search Tags:#branding#ui#web development#design system#assets#tokens#ux
One-click install
npx skills add https://github.com/Eir-Space/eir-open --skill eir-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: eir-design-system
Source: https://github.com/Eir-Space/eir-open/tree/main/skills/eir-design-system
Command: npx skills add https://github.com/Eir-Space/eir-open --skill eir-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides the official design language, reusable components, and brand assets for building Eir Space web applications, ensuring a consistent and polished user experience.

Core Features & Use Cases

  • Design Language: Access to Eir's color palette, typography, spacing, and motion guidelines.
  • Reusable Components: Pre-built UI elements like app shells and token definitions.
  • Brand Assets: Official logos and graphical elements for branding.
  • Use Case: A developer needs to create a new landing page for an Eir product and wants to ensure it adheres to the brand's visual identity. They would use this skill to access the design tokens and starter templates.

Quick Start

Use the eir-design-system skill to get the official Eir brand assets.

Frequently Asked Questions about eir-design-system

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

FAQPage Schema
How do I build a web application UI that follows official branding guidelines?▼

To build branded web applications, use this Skill to access official design tokens, including CSS custom properties for colors, spacing, and motion, alongside React component starters and brand SVGs.

What are design tokens and how are they used for UI development?▼

Design tokens are CSS custom properties defining colors, spacing, and motion guidelines. They are used in UI development to ensure consistent visual identity across web applications and agent interfaces.

Can I use the React component starters for a new landing page?▼

Yes, you can use the React component starters and app shells provided here to quickly scaffold a new landing page while ensuring it adheres to Eir's visual identity guidelines.

Does this design system include official brand assets and logos?▼

Yes, this design system includes official brand assets such as SVG logos and graphical elements needed to create visually consistent Eir-branded web applications and interfaces.

What's the best way to ensure consistent spacing and motion across an agent interface?▼

The best way to ensure consistent spacing and motion across an agent interface is to apply the provided CSS custom properties and motion guidelines directly to your UI components.

Do I need any external dependencies to use these UI components and assets?▼

No external dependencies are required. This Skill provides the necessary references and assets, including token definitions and brand SVGs, directly for your web development workflow.

Related Skills

Explore More Design & Creative Skills→
thehivegroup-aithehivegroup-ai

react-tailwind-conventions

Standardize Tailwind CSS conventions for React UI components.

Official
Intermediate
giuseppe-trisciuogliogiuseppe-trisciuoglio
322

unit-test-boundary-conditions

Generate JUnit 5 parameterized tests for boundary values and edge cases.

Community
Basic
s1366560s1366560
5

frontend-ui-ux-engineer

Generate React components and optimize frontend UI performance.

Community
Intermediate
BluebagAIBluebagAI
28

brand-guidelines

Apply Anthropic's official colors and typography rules to documents, designs, and UI assets.

Official
Intermediate