skills.rest
jonnathan-ls
jonnathan-lsCOMMUNITY
Explore all skills by this author →
𝕏@JonnathanLSGitHub

frontend-design

Codify frontend design decisions across components, layouts, color, typography, and interactions.

Updated Feb 19, 2026
Search Tags:#typography#accessibility#ux#design-system#frontend-design#color-system
One-click install
npx skills add https://github.com/jonnathan-ls/ai-context-kit --skill frontend-design-jonnathan-ls
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jonnathan-ls/ai-context-kit/tree/main/skills/frontend-design
Command: npx skills add https://github.com/jonnathan-ls/ai-context-kit --skill frontend-design-jonnathan-ls

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design decisions are often inconsistent across teams and projects, leading to fragmented interfaces and higher maintenance costs.

Core Features & Use Cases

  • A principled framework for UI design decisions covering components, layouts, color systems, typography, and interactions.
  • Guidelines and reference materials to support design-system consistency and accessibility.
  • Checklist-driven workflows and evaluation prompts used during product reviews.

Quick Start

Begin by applying the Frontend Design System to your current UI task and iteratively improve typography, color, and layout decisions.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I maintain consistent frontend design decisions across multiple UI components?▼

To maintain consistent frontend design decisions across UI components, apply a principled framework covering layouts, typography, and color systems. This codifies design thinking to ensure cohesive interfaces and reduces fragmented UI maintenance costs.

What is the best way to apply accessibility principles to a web UI design system?▼

The best way to apply accessibility principles to a web UI design system is to integrate UX psychology and constraint analysis into workflows. Using checklist-driven evaluation prompts during product reviews ensures accessible, aesthetically consistent interfaces.

How do I structure a color system and typography for a new web interface?▼

Structure a color system and typography by applying a frontend design framework that codifies UI decisions. This guides constraint analysis and interaction patterns, delivering structured metadata for design system discovery and governance.

Can I use checklist-driven workflows for UI design evaluations during product reviews?▼

Yes, you can use checklist-driven workflows and evaluation prompts for UI design evaluations during product reviews. This approach systematically improves typography, color, and layout decisions while ensuring design-system consistency.

Why does inconsistent UI design increase project maintenance costs?▼

Inconsistent UI design increases project maintenance costs because fragmented interfaces require repeated corrections. Codifying frontend design thinking and applying a structured design system resolves this by ensuring component and layout consistency.

Related Skills

Explore More Design & Creative Skills→
webn77webn77

ascii-mockup-wireframe

Generate structured ASCII wireframes and mockups from page descriptions.

Community
Basic
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
NITRR-OfficialNITRR-Official
4

ux-researcher-designer

Generate user personas and map customer journeys for UX research.

Official
Intermediate
range-etrange-et

normalize

Audit and remediate UI deviations to match design system tokens and patterns.

Community
Intermediate