skills.rest
vobase
vobaseOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Create production-ready frontend interfaces with intentional typography, color, layout, and motion.

59|14|Updated Mar 1, 2026
Search Tags:#typography#accessibility#responsive#ui-ux#frontend-design#color-system#motion-design
One-click install
npx skills add https://github.com/vobase/vobase --skill frontend-design-vobase
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/vobase/vobase/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/vobase/vobase --skill frontend-design-vobase

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The frontend-design skill eliminates generic, forgettable UI outputs by guiding agents to produce cohesive, production-ready frontends with a clear aesthetic point of view and rigorous implementation details that prioritize accessibility, responsiveness, and visual distinctiveness.

Core Features & Use Cases

  • Design Direction: Choose a bold, coherent aesthetic (tone, constraints, differentiation) and execute it with intentional decisions.
  • Typographic Systems: Modular scales, fluid type, pairing guidance, web font loading best practices, and vertical rhythm rules.
  • Color & Contrast: OKLCH-based palettes, tinted neutrals, WCAG contrast rules, and light/dark theming strategies.
  • Layout, Space & Grid: Fluid spacing, container queries, self-adjusting grids, and optical adjustments for polished composition.
  • Interaction & Motion: Interaction states, focus ring patterns, optimistic UI, motion timing/easing rules, and reduced-motion handling.
  • Responsive & Accessibility: Mobile-first patterns, input-detection media queries, safe-area handling, and accessible form and navigation patterns.
  • UX Writing & Polishing: Clear labels, specific error messages, translation-aware phrasing, and guidance for empty states and confirmations.
  • Use Case: Generate a production-ready, responsive landing page for a consumer product that uses a bold editorial aesthetic, carefully considered typography, accessible color tokens, purposeful motion, and thorough UX copy.

Quick Start

Design a production-ready, responsive landing page that embodies a single bold aesthetic direction, includes accessible typography and color tokens, and implements container queries and refined motion for page load and key interactions.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a production-grade frontend that avoids generic AI aesthetics?▼

To create a production-grade frontend that avoids generic AI aesthetics, apply a bold, coherent aesthetic direction with intentional decisions for typography, color, layout, and motion. This ensures a distinctive visual point of view rather than forgettable UI outputs.

What is an OKLCH color system and how do I use it for accessible web design?▼

An OKLCH color system uses OKLCH-based palettes and tinted neutrals to build accessible web designs. It enforces WCAG contrast rules and light/dark theming strategies, ensuring cohesive color tokens that meet accessibility standards across interfaces.

How do I implement responsive typography and fluid spacing using container queries?▼

Implement responsive typography and fluid spacing using container queries by applying modular type scales, fluid spacing rules, and self-adjusting grids. This approach allows components to adapt their layout and vertical rhythm based on their specific container dimensions.

Does this approach support reduced-motion handling and accessible interaction states?▼

Yes, this approach supports reduced-motion handling and accessible interaction states. It provides specific motion timing and easing rules, focus ring patterns, and optimistic UI guidelines to ensure interactions are both purposeful and accessible.

What is the best way to handle UX writing and empty states in a frontend design system?▼

The best way to handle UX writing and empty states in a frontend design system is to use clear labels, specific error messages, and translation-aware phrasing. This polishing step ensures forms, confirmations, and navigation are thorough and cohesive.

Related Skills

Explore More Design & Creative Skills→
mohamed-g-shoaibmohamed-g-shoaib

html-css-best-practices

Define HTML/CSS guidelines for accessible, maintainable, and performant web interfaces.

Community
Advanced
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
VoTruongDanhVoTruongDanh
2

motion-ui

Automate consistent Framer Motion UI interactions with design tokens.

Community
Advanced
Parallel-7Parallel-7
76

modern-frontend-design

Generate production-grade frontend interfaces with React, HTML, and OKLCH design systems.

Official
Advanced