skills.rest
ojpbarbosa
ojpbarbosaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces with typography, color systems, and motion.

1|Updated Feb 15, 2026
Search Tags:#design#accessibility#React#frontend#UI#component#aesthetics
One-click install
npx skills add https://github.com/ojpbarbosa/treehacks-26 --skill frontend-design-ojpbarbosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ojpbarbosa/treehacks-26/tree/main/worker/skills/frontend-design
Command: npx skills add https://github.com/ojpbarbosa/treehacks-26 --skill frontend-design-ojpbarbosa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating distinctive, production-grade frontend interfaces without sacrificing consistency or aesthetics can be time-consuming and error-prone. This skill provides a repeatable, design-led approach to conceive and implement visually striking UI across projects.

Core Features & Use Cases

  • Bold, cohesive typography and color systems that scale across components and pages.
  • Framework-agnostic implementation guidance (HTML/CSS/JS, React, Vue) with production-grade code.
  • Use Case: deliver a dashboard UI with accessible controls, responsive layout, and polished interactions within a single sprint.

Quick Start

Provide a bold, production-grade frontend interface for a given project using React, Vue, or vanilla HTML/CSS/JS.

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 frontend UI with a cohesive color and typography system?▼

A cohesive frontend design system scales typography and color across components by applying a bold aesthetic direction. This ensures production-ready code with consistent visual language, accessible controls, and polished interactions across HTML/CSS/JS, React, or Vue pages.

Can I use this approach to create a React dashboard with accessible controls and responsive layout?▼

Yes, you can create a React dashboard with accessible controls and responsive layout. The process provides framework-agnostic implementation guidance for React, Vue, and vanilla HTML/CSS/JS, ensuring production-grade code with polished interactions.

Does this frontend design method support Vue and vanilla HTML/CSS/JS or only React?▼

This frontend design method supports Vue and vanilla HTML/CSS/JS alongside React. It provides framework-agnostic implementation guidance, ensuring production-grade code with a cohesive visual language and bold aesthetic direction across all supported frameworks.

What is the best way to ensure accessibility is included in frontend component design?▼

The best way to ensure accessibility in frontend component design is to integrate it directly into the visual language system. This approach guarantees production-ready code with accessible controls, cohesive typography, and responsive layouts across web components.

How do I add motion and polished interactions to a frontend interface without breaking visual consistency?▼

Adding motion and polished interactions requires a design-led approach that treats animation as part of the cohesive visual language. This ensures frontend interfaces maintain production-grade code integrity and bold aesthetics without sacrificing consistency across components.

Related Skills

Explore More Design & Creative Skills→
Ali1razAli1raz
1

frontend-design

Generate distinctive frontend interfaces with HTML/CSS/JS, React, or Vue code.

Community
Advanced
ouakarouakar

frontend-engineer

Scaffold React frontends with design tokens, routing, and Storybook documentation.

Community
Advanced
aquariuscookaquariuscook

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 AA compliance.

Community
Advanced
vcnttttvcntttt
1

frontend-design

Generate frontend interfaces from design requirements across frameworks.

Community
Advanced