skills.rest
ADLenehan
ADLenehanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Define frontend design rules for Battery dashboards using a 4px grid and Phosphor icons.

Updated Jan 13, 2026
Search Tags:#typography#ui#frontend#dashboard#color#design-system
One-click install
npx skills add https://github.com/ADLenehan/battery --skill frontend-design-adlenehan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ADLenehan/battery/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/ADLenehan/battery --skill frontend-design-adlenehan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Battery UI teams can enforce a precise, minimal design system across the dashboard, reducing visual drift and enabling faster, consistent UI development.

Core Features & Use Cases

  • 4px grid for spacing and alignment across components
  • Border radius & elevation with a unified system (rounded-none, rounded, rounded-lg)
  • Typography & iconography guidelines using system fonts and Phosphor icons
  • Dark mode readiness with accessible color semantics and borders
  • Use Case: standard admin dashboards, deployment management screens, and data-dense panels

Quick Start

Apply these Frontend Design Principles to style the Battery dashboard components with a consistent 4px grid, border radii, typography, and iconography.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I enforce a consistent enterprise dashboard design system?▼

To enforce enterprise dashboard design, apply a precise system specifying a 4px grid for spacing, consistent border radii, typography rules, and accessible color semantics across all UI components.

What typography and iconography rules should a frontend design system use?▼

Frontend design systems should use system fonts for typography and Phosphor icons for iconography to ensure visual consistency and reduce drift across admin interfaces and data-dense panels.

How do I apply a 4px grid to admin interface components?▼

Apply a 4px grid by standardizing spacing and alignment rules across all dashboard components, ensuring structured layout consistency for deployment screens and analytics panels.

Does this frontend design system support dark mode dashboards?▼

Yes, the frontend design system supports dark mode readiness by defining accessible color semantics and borders that maintain a consistent visual language across both light and dark themes.

Can I use these design principles for data-dense analytics panels?▼

Yes, you can use these frontend design principles for data-dense analytics panels, deployment management screens, and standard admin dashboards to enable faster, consistent UI development.

What is the best way to standardize border radius and elevation in a UI?▼

The best way to standardize border radius and elevation is to apply a unified system using predefined scales like rounded-none, rounded, and rounded-lg to minimize visual drift across components.

Related Skills

Explore More Design & Creative Skills→
Rub-gitRub-git

n8n:design-system

Guide Vue frontend development with Design System components and styles.

Community
Intermediate
sachio222sachio222

ios-hig-design

Apply Apple's Human Interface Guidelines to iOS UI design reviews.

Community
Advanced
ihlamuryihlamury
73

robinhood-ui-skills

Enforce Robinhood's UI design system constraints for dark mode interfaces with Inter font and a 4px grid.

Community
Intermediate
civictechdccivictechdc
1

visual-design-foundations

Creates visual systems with typography, color, spacing, and iconography guidelines.

Official
Intermediate