skills.rest
cagdotin
cagdotinCOMMUNITY
Explore all skills by this author →
Website𝕏@0xcgnGitHub

frontend-design

Create frontend interfaces with HTML/CSS/JS, React, or Vue from user requirements.

36|Updated Jan 28, 2026
Search Tags:#design#frontend#react#vue#ui-design#web-components
One-click install
npx skills add https://github.com/cagdotin/agents --skill frontend-design-cagdotin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/cagdotin/agents/tree/main/extensions/frontend-dev/skills/frontend-design
Command: npx skills add https://github.com/cagdotin/agents --skill frontend-design-cagdotin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create visually distinctive, production-grade frontend interfaces that translate requirements into polished code and design, reducing iteration cycles and ensuring consistent UI quality.

Core Features & Use Cases

  • Generate high-quality frontend designs for web components, pages, dashboards, and UI systems.
  • Provide framework-agnostic or framework-specific implementations (HTML/CSS/JS, React, Vue) with tasteful aesthetics and accessibility considerations.
  • Use case: given a brief for a marketing landing page, deliver a cohesive design system and ready-to-run code that matches the specified aesthetic direction.

Quick Start

Provide a complete frontend design for the requested component or page and deliver production-ready HTML/CSS/JS or framework-based code.

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-grade React components from design requirements?▼

You can generate production-grade React components by providing a design brief with your aesthetic direction. The system translates requirements into ready-to-run code, applying typography, color systems, and accessibility standards directly to the React implementation.

Can I build a complete web UI design system using Vue?▼

Yes, you can build a complete web UI design system using Vue. Provide your UI requirements to generate cohesive design systems and distinctive interfaces, ensuring visual polish and accessibility are integrated into the delivered Vue code.

What is the best way to create accessible HTML and CSS landing pages?▼

The best way to create accessible HTML and CSS landing pages is to specify your aesthetic brief. The generation process implements design thinking and accessibility as core requirements, delivering cohesive, production-grade HTML/CSS/JS code ready for deployment.

Does this frontend design approach support framework-agnostic web components?▼

Yes, this frontend design approach supports framework-agnostic web components. You can request implementations using pure HTML, CSS, and JavaScript, ensuring tasteful aesthetics and accessibility considerations are maintained without depending on specific frameworks.

How do I ensure visual cohesion when building dashboards across different frameworks?▼

To ensure visual cohesion when building dashboards, define a unified design system in your brief. The generation process applies consistent typography, color systems, and motion to deliver polished, cohesive dashboard UI designs across React, Vue, or standard HTML.

Related Skills

Explore More Design & Creative Skills→
chidekinachidekina
2

frontend-design

Generate production-ready React, Vue, or HTML/CSS interfaces with cohesive design systems.

Community
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
tktcorporationtktcorporation
2

ui-craft

Implement UI components using reference libraries and design tokens.

Community
Intermediate
KurarionKurarion
72

frontend-design

Design and implement distinctive frontend interfaces in HTML/CSS/JS, React, or Vue.

Community
Advanced