skills.rest
rileyhilliard
rileyhilliardCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design

Enforce precise design rules for dashboards and admin interfaces.

127|19|Updated Oct 23, 2025
Search Tags:#typography#design#UI#dashboard#spacing#craft#color-hierarchy
One-click install
npx skills add https://github.com/rileyhilliard/claude-essentials --skill design-rileyhilliard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/rileyhilliard/claude-essentials/tree/main/plugins/ce/skills/design
Command: npx skills add https://github.com/rileyhilliard/claude-essentials --skill design-rileyhilliard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design inconsistencies across dashboards and admin interfaces lead to fragmented user experiences, increased cognitive load, and slower development cycles.

Core Features & Use Cases

  • Enforces a precise design direction and foundation to ensure a cohesive visual language across SaaS UIs.
  • Defines typography, spacing, depth, and color hierarchy to guide designers and developers.
  • Use Case: When building a data-heavy admin panel, apply the Craft design system to achieve consistency and faster iteration.

Quick Start

  • Define the product context (dashboard or admin tool) and select a design direction.
  • Establish foundation: color system, typography, and spacing scale.
  • Apply depth strategy and layout guidelines in component design during implementation.

Frequently Asked Questions about design

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

FAQPage Schema
How do I maintain design consistency across SaaS dashboards and admin panels?▼

Maintain dashboard design consistency by codifying rules for spacing, typography, depth, color hierarchy, and layout. This establishes a precise visual language to prevent fragmented user experiences and reduce cognitive load in SaaS interfaces.

What is the best way to establish a design foundation for data-heavy admin tooling?▼

The best way to establish a design foundation for admin tooling is to define the product context, select a design direction, and set up a color system, typography, and spacing scale to guide implementation and faster iteration.

Can I apply these UI and layout rules during a design sprint?▼

Yes, you can apply these UI and layout rules during design sprints. The system is built to be loaded directly into design and development workflows to enforce precise, minimal design for dashboards and internal tools.

How do I set up spacing and typography scales for internal tool interfaces?▼

Set up spacing and typography scales by defining the product context first, then establishing the foundation rules for your UI. This codifies the exact visual language needed for cohesive internal tool interfaces.

Related Skills

Explore More Design & Creative Skills→
ibnuhalimmibnuhalimm

Architect

Gather project context and produce a detailed architecture plan.

Community
Advanced
yigitkonuryigitkonur
11

extract-saas-design

Extract design tokens, component specs, and layout patterns from SaaS dashboards.

Community
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
jeremydhoover-blipjeremydhoover-blip
7

designing-microcopy-systems

Define microcopy patterns for UI components within design systems.

Community
Intermediate