skills.rest
AnvinX1
AnvinX1COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Systematize frontend design decisions for consistent, accessible web interfaces.

Updated Feb 12, 2026
Search Tags:#typography#accessibility#frontend#color#ux#design-system#motion
One-click install
npx skills add https://github.com/AnvinX1/med-rag --skill frontend-design-anvinx1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/AnvinX1/med-rag/tree/main/medical_genai_app/.agent/skills/frontend-design
Command: npx skills add https://github.com/AnvinX1/med-rag --skill frontend-design-anvinx1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to create cohesive, accessible, and scalable interfaces; this Skill provides a structured set of design-system principles, rules, and decision frameworks to unify product, design, and code.

Core Features & Use Cases

  • Selective reading rules and principled guidelines for UX psychology, color, typography, and motion to inform implementation before coding.
  • Built-in constraint analysis, design-audit templates, and best-practice patterns for design reviews, component libraries, and UI systems.
  • Real-world scenarios include building a design system for a SaaS dashboard, auditing accessibility, and evaluating visual hierarchy.

Quick Start

Review the UX psychology, color, typography, and visual-effects guidelines, then apply the principles to your current frontend task.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I systematize frontend design decisions for a web dashboard?▼

Systematize frontend design by applying structured principles for color, typography, layout, accessibility, and motion. This provides a reusable framework to unify product, design, and code across web apps, ensuring consistent and scalable interfaces.

What principles should I review before coding a component library?▼

Review UX psychology, color, typography, and visual-effects guidelines before coding. These selective reading rules and principled guidelines inform implementation, ensuring your component library follows established best-practice patterns.

How do I audit accessibility and visual hierarchy in a UI system?▼

Audit accessibility and visual hierarchy using built-in design-audit templates and constraint analysis. These templates evaluate your UI systems against established frontend design principles to identify and correct inconsistencies.

Does this frontend design approach work for SaaS applications?▼

Yes, this approach works for SaaS applications. Real-world scenarios include building a design system for a SaaS dashboard, auditing accessibility, and evaluating visual hierarchy to ensure cohesive web interfaces.

Can I use these design-system rules to unify product and engineering teams?▼

Yes, you can unify teams using these design-system rules. The framework provides a structured set of principles and decision frameworks that bridge product, design, and code, ensuring everyone follows consistent accessibility and visual standards.

Related Skills

Explore More Design & Creative Skills→
bitwize-music-studiobitwize-music-studio
408

album-conceptualizer

Plans and designs cohesive album concepts and track structures.

Official
Basic
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic
BenWork17BenWork17

frontend-design

Identify UI design direction using front-end design guidelines for web interfaces.

Community
Advanced
FoundationForgeFoundationForge

accessibility-review

Identify WCAG 2.1 AA accessibility issues in Figma designs or live pages.

Official
Intermediate