frontend-design

Implement production-ready frontend components with HTML/CSS/JS or frameworks.

3|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/ravnhq/typescript-blueprint --skill frontend-design-ravnhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ravnhq/typescript-blueprint/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/ravnhq/typescript-blueprint --skill frontend-design-ravnhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to achieve; teams struggle with cohesive aesthetics, maintainability, and accessibility across projects.

Core Features & Use Cases

  • Establish a bold aesthetic direction and design system guidelines.
  • Implement production-ready frontend components, pages, and UI patterns in HTML/CSS/JS or framework-specific code (React, Vue, etc.).
  • Ensure typography, color systems, motion, and accessibility are consistently applied across projects.

Use Case: Build a standout web component or page with a unique aesthetic direction and accessible interactions.

On delivery: Provide a polished, cohesive UI solution aligned with design direction.

Quick Start

Develop a distinct frontend component or page that embodies the chosen aesthetic direction and accessibility standards.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend interfaces with cohesive aesthetics?▼

Build production-grade frontend interfaces by establishing a bold aesthetic direction, implementing UI patterns in HTML/CSS/JS or framework code, and applying consistent typography, color systems, and motion across components to ensure maintainability.

Does this approach to UI design support React and Vue frameworks?▼

Yes, this UI design approach supports React, Vue, and other frameworks by implementing production-ready frontend components and pages that maintain strict accessibility standards and aesthetic consistency across your project.

What's the best way to ensure accessibility in a custom design system?▼

Ensure accessibility in a custom design system by applying strict requirements to typography, color contrast, and motion during the implementation of frontend components, delivering polished visuals with accessible interactions consistently applied.

How do I create a distinctive web component with a unique aesthetic direction?▼

Create a distinctive web component by defining a bold aesthetic direction first, then implementing production-ready HTML/CSS/JS or framework-specific code that delivers polished visuals and accessible interactions aligned with that design direction.

Why does my frontend UI lack cohesive design across different pages?▼

Your frontend UI lacks cohesive design when typography, color systems, and motion are not consistently applied through a defined design system, making it hard to achieve maintainable and accessible interfaces across projects.

Can I use this to build dashboards and complete design systems?▼

Yes, you can use this to build dashboards and complete design systems by establishing guidelines for typography and color systems, then implementing production-ready frontend components and pages that satisfy strict aesthetic and accessibility requirements.