skills.rest
raunakjaggi
raunakjaggiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate frontend interfaces with responsive layouts and accessible typography.

Updated Aug 27, 2026
Search Tags:#design#ui#accessibility#frontend#component#aesthetic#production-code
One-click install
npx skills add https://github.com/raunakjaggi/overrun --skill frontend-design-raunakjaggi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/raunakjaggi/overrun/tree/main/skills/frontend-design
Command: npx skills add https://github.com/raunakjaggi/overrun --skill frontend-design-raunakjaggi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend interfaces are hard to design and implement; this skill guides you to define a strong aesthetic and deliver ready-to-run code.

Core Features & Use Cases

  • Design-driven frontend implementations that pair bold visuals with accessible, responsive layouts.
  • Framework-agnostic guidance that works with HTML/CSS/JS, React, Vue, or vanilla setups.
  • Real-world scenarios include building a reusable component library, a marketing landing page, or a full application with a cohesive design system.

Quick Start

Describe your frontend requirements and I will generate ready-to-run frontend code that matches the chosen aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-ready frontend UI with a cohesive design system?▼

Generate production-ready frontend UI by describing your visual requirements to produce framework-appropriate code with cohesive aesthetics, accessible typography, and responsive layouts. This skill guides you to define a strong aesthetic and deliver ready-to-run HTML/CSS/JS or modern framework implementations.

Can I use this to build a reusable component library in React or Vue?▼

Yes, you can build a reusable component library in React, Vue, or vanilla HTML/CSS/JS. The guidance is framework-agnostic and adapts to your setup to deliver components with bold visuals and accessible, responsive layouts.

What's the best way to ensure my frontend components have accessible typography and responsive layouts?▼

The best way to ensure accessible typography and responsive layouts is to specify these requirements upfront when generating your frontend components. The skill applies accessibility standards and responsive design principles directly into the production-grade code output.

Does this skill work for building a full application or just individual web pages?▼

This skill works for building full applications, individual web pages, and reusable component libraries. You provide the frontend requirements and desired aesthetic, and it generates ready-to-run code scaled to your specific project scope.

How do I create a marketing landing page with a bold, distinctive aesthetic?▼

Create a marketing landing page with a bold aesthetic by describing your visual requirements and desired style. The skill pairs bold visuals with accessible, responsive layouts to deliver distinctive, production-grade frontend code ready for deployment.

Do I need to specify a frontend framework to get production-grade code?▼

No, you do not need to specify a frontend framework to get production-grade code. The skill provides framework-agnostic guidance that works with HTML/CSS/JS, React, Vue, or vanilla setups, adapting to your chosen environment.

Related Skills

Explore More Design & Creative Skills→
DyreanDyrean

frontend-design

Translate frontend requirements into UI code and design assets.

Community
Advanced
ky-zoky-zo

frontend-design

Generate production-grade frontend interfaces with typography, color, spacing, and responsive layouts.

Community
Advanced
AppleLampsAppleLamps
1

shadcn-component

Generate shadcn/ui components with Tailwind styling via npx.

Community
Intermediate
AgentWorkforceAgentWorkforce
790

frontend-design

Create production-grade React landing pages with accessible markup and responsive layouts.

Official
Advanced