skills.rest
FHIDev
FHIDevOFFICIAL
Explore all skills by this author →
GitHub

designsystem

Guide developers in implementing the FHI Designsystem across React, Angular, Blazor, and Web Components.

1|Updated Feb 3, 2026
Search Tags:#react#angular#framework#tokens#design-system#web-components
One-click install
npx skills add https://github.com/FHIDev/Fhi.AgentSkills --skill designsystem-fhidev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designsystem
Source: https://github.com/FHIDev/Fhi.AgentSkills/tree/main/designsystem
Command: npx skills add https://github.com/FHIDev/Fhi.AgentSkills --skill designsystem-fhidev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides authoritative guidance for implementing the FHI Designsystem across projects, enabling consistent UI patterns, tokens, and components.

Core Features & Use Cases

  • Setup and usage guidance for the Designsystem package, including design tokens, theming, and framework integrations (React, Angular, Blazor) as well as plain web components.
  • Comprehensive references to components, tokens, and framework setup to accelerate UI development and ensure accessibility.
  • Real-world scenario: teams standardize components like fhi-button, fhi-input, and dialogs across multi-framework applications.

Quick Start

Install the Designsystem package and begin integrating components and tokens into your project.

Frequently Asked Questions about designsystem

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

FAQPage Schema
How do I install and set up a design system across React and Angular?▼

To set up the design system, install the package via npm and integrate components and tokens into your project. Use the default.css file for theming and import components individually across React, Angular, Blazor, or plain web components.

What are design tokens and how do I use them for theming web components?▼

Design tokens are style variables used to maintain visual consistency across UI components. You apply them by referencing the theme/default.css file, ensuring consistent theming across React, Angular, Blazor, and plain web components.

Can I use FHI design system components in a Blazor application?▼

Yes, the design system supports Blazor integration. It provides setup references for Blazor alongside React, Angular, and plain web components, allowing you to standardize UI elements like fhi-button and fhi-input across multi-framework applications.

What is the best way to ensure accessibility when implementing a design system?▼

The best way to ensure accessibility is to follow the design system's component references and integration guidelines. It provides built-in accessibility considerations for components like fhi-button, fhi-input, and dialogs across React, Angular, and Blazor integrations.

How do I import individual UI components like fhi-button and fhi-input?▼

You import individual UI components like fhi-button and fhi-input per-component after installing the npm package. This approach accelerates UI development by ensuring you only include the specific web components needed for your React, Angular, or Blazor project.

Related Skills

Explore More Software Engineering Skills→
vuminhieuvuminhieu

web-frameworks

Scaffold Next.js and Turborepo monorepos with RemixIcon shared UI packages.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 design tokens and CVA components.

Official
Advanced
roanbrasilroanbrasil
5

design-systems

Builds W3C-compliant design token systems and accessible component libraries with Storybook documentation.

Community
Advanced