skills.rest
ps-carvalho
ps-carvalhoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design

Provide structured design guidance for cohesive UI aesthetics across HTML/CSS/JS frameworks.

Updated Feb 22, 2026
Search Tags:#typography#design#ui#color#design-system#spacing#motion
One-click install
npx skills add https://github.com/ps-carvalho/cortex-agents --skill ui-design-ps-carvalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/ps-carvalho/cortex-agents/tree/main/.opencode/skills/ui-design
Command: npx skills add https://github.com/ps-carvalho/cortex-agents --skill ui-design-ps-carvalho

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, cohesive visual design in web interfaces is hard to achieve consistently; this guide codifies principles, patterns, and best practices to elevate aesthetics, accessibility, and polish.

Core Features & Use Cases

  • Visual design patterns, typography, color, spacing, and motion guidelines to create memorable interfaces.
  • Design-system practices, component patterns, and implementation guidance for dashboards, marketing pages, and apps.
  • Practical workflow notes, from design thinking to spec creation, to ensure a consistent aesthetic direction across projects.

Quick Start

Apply these guidelines to your UI project to establish a distinctive, cohesive visual identity from initial concept to production.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create cohesive UI design systems for web applications?▼

Create cohesive UI design systems by enforcing a design-spec workflow with structured spacing systems, responsive patterns, and implementation guidance to maintain consistent aesthetics across HTML/CSS/JS frameworks.

What are the best practices for maintaining consistent typography and color in dashboards?▼

Maintaining consistent typography and color in dashboards requires codifying principles and best practices into a design system that enforces a structured design-spec workflow and spacing system for accessible UI.

How do I implement responsive patterns and motion guidelines in HTML/CSS/JS frameworks?▼

Implement responsive patterns and motion guidelines in HTML/CSS/JS frameworks by applying production-grade design guidance that provides structured component patterns and implementation specifications for dashboards and marketing pages.

Can I use this UI design workflow for both marketing pages and app dashboards?▼

Yes, you can use this UI design workflow for marketing pages and app dashboards. It provides practical workflow notes from design thinking to spec creation to ensure a consistent aesthetic direction across various project types.

Why does my web interface lack a distinctive visual identity and polish?▼

Your web interface lacks a distinctive visual identity because distinctive, cohesive visual design is hard to achieve consistently without codified principles, patterns, and best practices to elevate aesthetics, accessibility, and polish.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
CodeReactOrNextCodeReactOrNext
3

frontend-design

Generate polished, customizable React components and HTML5/CSS3 templates for your next project with built-in TypeScript support and accessibility-first design.

Official
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
guideopsguideops

codex

Generate design-system guidelines for the Codex interface with typography, color, spacing, and accessibility.

Community
Advanced