skills.rest
justEstif
justEstifCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces for React, Vue, or vanilla HTML/CSS/JS projects.

Updated Dec 29, 2025
Search Tags:#React#UI#CSS#HTML#Vue#aesthetics#frontend-design
One-click install
npx skills add https://github.com/justEstif/sv-100-hours-tracker --skill frontend-design-justestif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/justEstif/sv-100-hours-tracker/tree/main/.opencode/skill/frontend-design
Command: npx skills add https://github.com/justEstif/sv-100-hours-tracker --skill frontend-design-justestif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill creates distinctive, production-grade frontend interfaces, elevating how UIs are designed and implemented.

Core Features & Use Cases

  • Bold aesthetic direction and meticulous implementation across HTML/CSS/JS, React, Vue, or other frameworks.
  • End-to-end UI design guidance plus working code for components, pages, or entire apps.
  • Use Case: Build a dashboard with a unique visual language, responsive behavior, and accessible interactions.

Quick Start

Provide your frontend requirements (component, page, or application) and preferred aesthetic direction; the Skill will generate production-ready code and design guidance.

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 a bold aesthetic direction?▼

To build production-grade frontend interfaces, you provide your UI requirements and preferred visual style to receive working code with enforced design systems, accessible typography, responsive behavior, and motion.

Can I use this to generate React and Vue UI components for a dashboard?▼

Yes, you can generate React and Vue UI components for a dashboard. The skill delivers working code for components, pages, or entire apps across React, Vue, and vanilla HTML/CSS/JS projects.

What's the best way to ensure accessible color and typography in frontend design?▼

The best way to ensure accessible color and typography is by enforcing a strict design system. This skill applies accessible color contrasts, responsive behavior, and polished UI principles directly to your generated code.

How do I create reusable web components with a unique visual language?▼

You create reusable web components with a unique visual language by submitting your frontend requirements. The skill outputs production-ready code enforcing a bold aesthetic direction and reusable component architecture.

Does this frontend design approach work for vanilla HTML, CSS, and JavaScript projects?▼

Yes, this frontend design approach works for vanilla HTML, CSS, and JavaScript projects. It supports end-to-end UI design guidance and working code generation across plain web formats and component frameworks.

Related Skills

Explore More Design & Creative Skills→
jngong-collabjngong-collab
1

ui-design

Generate high-fidelity UI design instructions for web and mini-program interfaces.

Community
Advanced
GaoZimeng0425GaoZimeng0425
6

frontend-design

Design and implement custom frontend interfaces with HTML/CSS/JS or React/Vue.

Community
Advanced
kibertoadkibertoad
1

add-api-query

Automate data fetching and mutation with API contracts, typed HTTP client, and React Query.

Community
Intermediate
polyuiislabpolyuiislab
1.2k

frontend-design

Generate production-grade frontend interfaces from bold aesthetic direction.

Community
Advanced