skills.rest
bpteam
bpteamCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade HTML/CSS/JS, React, or Vue frontend interfaces with cohesive design.

Updated Mar 18, 2026
Search Tags:#typography#design#ui#frontend#react#css#aesthetics
One-click install
npx skills add https://github.com/bpteam/coder --skill frontend-design-bpteam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/bpteam/coder --skill frontend-design-bpteam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to translate vague ideas into production-ready, visually distinctive interfaces, leading to inconsistent experiences and delays.

Core Features & Use Cases

  • Produce production-grade HTML/CSS/JS, React, or Vue components with cohesive design language.
  • Define typography, color systems, motion, and accessibility to deliver polished UI.
  • Use cases include dashboards, landing pages, design systems, UI kits, and component libraries.

Quick Start

Describe a detailed frontend brief (component, page, or UI concept) and I will generate production-grade front-end 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 generate production-grade React components with a cohesive design language?▼

To generate production-grade React components with a cohesive design language, provide a detailed frontend brief describing your UI concept. The system outputs ready-to-use, framework-specific scaffolds that adhere to typography, color, and accessibility constraints.

What is the best way to build responsive dashboards using HTML, CSS, and Vue?▼

The best way to build responsive dashboards using HTML, CSS, and Vue is to define your dashboard requirements in a brief. You receive ready-to-use code or framework-specific scaffolds that support responsive behavior and polished UI aesthetics.

Can I use this to create a design system and UI kit from scratch?▼

Yes, you can create a design system and UI kit from scratch by detailing your component requirements. It delivers cohesive design guidance and production-grade frontend interfaces defining typography, color systems, and motion constraints.

Does the generated frontend code support accessibility and motion constraints?▼

Yes, the generated frontend code supports accessibility and motion constraints. It designs and implements production-grade interfaces that explicitly adhere to typography, color, motion, and branding constraints while supporting responsive behavior.

How do I translate vague UI ideas into ready-to-use frontend code?▼

To translate vague UI ideas into ready-to-use frontend code, describe your detailed frontend brief including the component, page, or UI concept. The system generates production-grade front-end code and design guidance resolving inconsistencies.

Related Skills

Explore More Design & Creative Skills→
Hff1230Hff1230

frontend-design

Generate production-ready HTML/CSS/JS, React, or Vue components from client briefs.

Community
Advanced
NITISH-gitbitNITISH-gitbit

claude-design

Generate custom HTML artifacts with embedded CSS and JavaScript.

Community
Intermediate
Aurora-AIAurora-AI

redesign-existing-projects

Audit and upgrade existing websites and apps without altering functionality.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate