frontend-design

Name: frontend-design
Availability: InStock
Author: gensart-projs

Guide frontend designers through design-thinking principles for web UI.

Updated Jan 30, 2026

Search Tags:#typography #accessibility #color #design-systems #frontend-design #ux-psychology

Ready to run

npx skills add https://github.com/gensart-projs/cp-kit --skill frontend-design-gensart-projs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/gensart-projs/cp-kit/tree/main/packages/cp-toolkit/templates/skills/frontend-design
Command: npx skills add https://github.com/gensart-projs/cp-kit --skill frontend-design-gensart-projs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.

Core Features & Use Cases

Comprehensive design guidance across constraint analysis, UX psychology, typography, color, layout, motion, and accessibility.
Decision trees and checklists to structure design tasks, audits, and brand alignment.
Post-design workflow guidance and references to extend a design system into implementation.

Quick Start

Begin by applying frontend-design principles to your UI and run a quick audit using the included decision trees and guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I apply UX psychology and constraint analysis to web UI design?▼

Apply UX psychology and constraint analysis to web UI by using decision trees and checklists that guide design-thinking principles for components, layouts, and color schemes. This Skill structures these tasks to teach design principles rather than fixed values.

What is the best way to audit a design system for accessibility and typography?▼

The best way to audit a design system for accessibility and typography is to run the included decision trees and guidelines. This Skill provides comprehensive checklists to evaluate component-level styling, color contrast, and motion constraints.

How do I structure frontend design decisions for layouts and color schemes?▼

Structure frontend design decisions for layouts and color schemes by following constraint analysis workflows. This Skill provides decision trees that guide aesthetic interface creation and ensure brand alignment without relying on fixed values.

Can I use this design-thinking guidance for component-level styling and motion?▼

Yes, you can use this design-thinking guidance for component-level styling and motion. It covers comprehensive design principles across typography, color, layout, and motion to help you structure UI tasks and extend design systems into implementation.

When do I need design-system thinking for frontend design tasks?▼

You need design-system thinking for frontend design tasks when creating aesthetic interfaces, designing components, or aligning layouts with brand guidelines. This Skill teaches the underlying UX psychology and accessibility principles needed for these workflows.