skills.rest
HaydernCenterpoint
HaydernCenterpointCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Align frontend UI components to a cohesive design system.

Updated Jun 11, 2026
Search Tags:#typography#frontend#color#ui-design#spacing#motion
One-click install
npx skills add https://github.com/HaydernCenterpoint/Codex-Skills --skill frontend-design-hayderncenterpoint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/HaydernCenterpoint/Codex-Skills/tree/main/.grok/skills/frontend-design
Command: npx skills add https://github.com/HaydernCenterpoint/Codex-Skills --skill frontend-design-hayderncenterpoint

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent frontend design across projects leads to poor readability, accessibility issues, and longer development cycles. This Skill provides a concise set of rules to enforce typography, spacing, color, layout, and motion.

Core Features & Use Cases

  • Typography: restrict fonts and weights to create a cohesive visual language.
  • Spacing & Layout: apply an 8px base unit and scalable rhythm to padding and margins.
  • Color & Motion: choose a dominant hue with accessible contrast and subtle motion guidelines.
  • Anti-slop Patterns: avoid decorative patterns that degrade usability.
  • Use Case: when building a new UI component or updating a design system, apply these rules to ensure consistency.

Quick Start

Ask the AI to apply the frontend-design rules to a UI component you are designing or updating.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I enforce consistent spacing and typography across a web UI component library?▼

Enforce consistent spacing and typography by applying a design system with an 8px base unit and restricted font weights. This aligns UI components to cohesive rules, eliminating style drift and ensuring readability across web apps.

What is style drift in frontend design and how do I prevent it?▼

Style drift in frontend design is inconsistent visual styling across components that degrades usability. Prevent it by enforcing a cohesive design system covering typography, spacing at the 8px scale, color usage, and motion guidelines.

How do I apply an 8px spacing scale to my frontend layout and padding?▼

Apply an 8px spacing scale by enforcing a scalable rhythm for padding and margins across your UI components. This ensures proportional whitespace and structural consistency throughout page-level frontend layouts.

What are anti-slop patterns in UI design and when should I use them?▼

Anti-slop patterns in UI design are rules that prevent decorative elements from degrading usability. Use them when building or updating UI components to avoid unnecessary visual clutter and maintain functional accessibility.

Can I use these frontend design rules for a page-level web app task?▼

Yes, you can use these frontend design rules for page-level web app tasks. The scope includes component libraries, design systems, and page-level UI tasks, enforcing layout, color, and motion guidelines across the application.

Related Skills

Explore More Design & Creative Skills→
arkcle83arkcle83

design-guide

Standardizes UI design across HTML, CSS, React, and other modern frameworks.

Community
Intermediate
Kevin-Liu-01Kevin-Liu-01
16

reticle-design-system

Organize UI design tokens, layout primitives, and components into a cohesive system.

Community
Intermediate
dralgorhythmdralgorhythm
111

design-systems

Standardize UI components and design tokens across projects.

Community
Advanced
anthrilanthril
3

design-tokens

Generate W3C Design Tokens JSON and export CSS variables, Tailwind v4, and Style Dictionary formats.

Official
Advanced