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.