What is the primary design philosophy?

It follows the Pulse Radar brand: 'Data-Focused Minimalism,' which prioritizes content clarity, functional spacing, and semantic hierarchy over decorative gradients or complex layouts.

Does this skill support dark mode?

Yes, it utilizes semantic color tokens like bg-atom-problem and text-status-connected that are specifically designed to work across both light and dark themes without manual adjustment.

Can I use custom animations?

The skill supports subtle, functional motion but mandates the use of motion-reduce fallbacks for all animations to ensure a high-quality experience for all users.

How does it handle web accessibility?

The skill strictly enforces WCAG 2.1 AA standards, including 44px minimum touch targets, required ARIA labels for icon buttons, and ensuring status is never conveyed by color alone.

Which UI library does this skill use?

The skill is built primarily on shadcn/ui primitives and Tailwind CSS, using Lucide React for consistent and accessible iconography.

Pulse Radar Frontend Design

Name: Pulse Radar Frontend Design
Author: djimontyp

bydjimontyp

0•

디자인 도구

Creates production-grade React interfaces using shadcn/ui with a focus on data-driven minimalism and WCAG compliance.

This skill empowers Claude to build high-quality, accessible frontend components and layouts specifically tailored for the Pulse Radar design system. It leverages a robust shadcn/ui foundation to implement distinctive, data-focused interfaces while strictly adhering to professional design standards, including semantic tokenization, a 4px spacing grid, and comprehensive accessibility rules. Whether you're building complex dashboards or refining UI components, this skill ensures consistency, performance, and a polished aesthetic that prioritizes clarity over decorative trends.

주요 기능

01Semantic color token management for seamless light and dark mode support

020 GitHub stars

03Strict WCAG 2.1 AA accessibility enforcement including 44px touch targets

04Automated shadcn/ui component integration and configuration

05Data-focused minimalist design language (Pulse Radar Brand)

06Standardized 4px spacing grid and layout pattern enforcement

사용 사례

01Generating accessible dashboard components with activity heatmaps and status indicators

02Rapidly scaffolding new pages using standardized shadcn/ui primitives and custom design patterns

03Refactoring existing React components to follow Pulse Radar design tokens and WCAG standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add djimontyp/task-tracker frontend

For use in Claude.ai and ChatGPT

Download Skill