skills.rest
LeroyAdonis
LeroyAdonisCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Build distinctive frontend interfaces with cohesive aesthetic direction.

Updated May 14, 2026
Search Tags:#typography#accessibility#ui-design#design-systems#frontend-design#react-components
One-click install
npx skills add https://github.com/LeroyAdonis/vector --skill frontend-design-leroyadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/LeroyAdonis/vector/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/LeroyAdonis/vector --skill frontend-design-leroyadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces often require a clear aesthetic vision and meticulous implementation, which many teams struggle to articulate and execute consistently.

Core Features & Use Cases

  • Aesthetic Direction: Establish a bold design direction (typography, color, motion) to guide UI implementation across components, pages, and systems.
  • Production-Grade Implementation: Deliver polished, accessible, and performant frontend code that aligns with brand and product goals.
  • Use Case: Design a dashboard with a unique visual identity, a reusable component library, and cohesive UI patterns for a multi-page app.

Quick Start

Build a small prototype that showcases the selected aesthetic direction on a single page.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade React component library with a cohesive design system?▼

Build a production-grade React component library by establishing a bold aesthetic direction for typography and color, ensuring scalable component architecture, accessibility, and performance constraints are met across multi-page apps.

What is the best way to create a distinctive UI design for a frontend dashboard?▼

Create a distinctive UI design for dashboards by applying a clear aesthetic vision that guides UI implementation, delivering polished, accessible, and performant frontend code aligned with your product goals.

How do I ensure my frontend UI meets accessibility and performance constraints?▼

Ensure frontend UI accessibility and performance by implementing production-grade code that satisfies explicit design vision requirements, scalable component architecture, and established accessibility standards.

Can I establish a clear aesthetic direction for my web interface before building the full app?▼

Establish an aesthetic direction for web interfaces by building a small prototype that showcases your selected typography, color, and motion design vision on a single page before full implementation.

Does this approach work for designing reusable component libraries and multi-page apps?▼

This approach works for reusable component libraries and multi-page apps by delivering cohesive UI patterns, a unique visual identity, and scalable architecture for multi-page applications.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
danghungtb26danghungtb26
3

ui-ux-pro-max

Generate design systems for web and mobile projects across nine technology stacks.

Community
Advanced
elwa2elwa2

normalize

Align UI features to design system standards and patterns.

Community
Advanced