ist-corporate-ui-style

Generates institutional UI designs for occupational safety and health management dashboards.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill ist-corporate-ui-style-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ist-corporate-ui-style
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/ist-corporate-ui-style
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill ist-corporate-ui-style-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing interfaces for occupational safety, health, and risk prevention platforms requires balancing emergency accessibility with corporate management features, which generic design systems fail to address. ## Core Features & Use Cases - Institutional Design Language: Defines a complete visual identity with safety-oriented color palettes (IST Green, Urgency Red, Warning Yellow) and typography rules for trust and legibility. - Emergency-First UX Patterns: Structures interfaces around a dual hierarchy separating immediate response (sticky emergency bars, accident reporting) from recurring management tasks (protocols, training, legal library). - Accessibility & Mobile Compliance: Enforces WCAG 2.1 AA contrast ratios, 48px touch targets, and collapsible accordions for field workers accessing protocols on mobile devices. - Use Case: Build a corporate dashboard for a mutual insurance company showing compliance status donut charts, a prominent accident report button, and a news feed for prevention campaigns. ## Quick Start Use the ist-corporate-ui-style skill to design a responsive dashboard for an occupational health portal with an emergency contact header and a services grid.

Frequently Asked Questions about ist-corporate-ui-style

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

FAQPage Schema
How do I design a dashboard for occupational safety management?▼

Structure the dashboard around a prevention hub with donut charts showing protocol compliance status, a highlighted accident report button, and a news feed for campaigns. Use a three-column grid on desktop collapsing to one column on mobile.

What color palette works for health and safety websites?▼

Use a safety green (#008F4C) for primary actions and navigation, white backgrounds for legibility, and dark grey (#333333) for body text. Reserve red (#D32F2F) exclusively for emergency banners and yellow (#FBC02D) for preventive alerts.

How should emergency contact information be displayed in a corporate UI?▼

Place emergency phone numbers in a fixed, high-contrast sticky header bar rather than the footer or menus. Pair clear text with literal icons like an ambulance or cross, and ensure touch targets are at least 48px tall.

Does this design approach meet WCAG accessibility standards?▼

Yes, the guidelines enforce WCAG 2.1 AA requirements including a 4.5:1 contrast ratio for white text on green backgrounds, a scalable 16px base font, and plain language navigation labels instead of internal medical codes.

How do I handle large document libraries on mobile interfaces?▼

Use collapsible accordion components like the HTML details element to organize extensive protocol libraries such as TMERT, PREXOR, and MMC. This prevents infinite scrolling and keeps mobile navigation manageable for field workers.